Jest升级至29后出现TypeError: Cannot read property 'explorerPage' of undefined

问题场景 #

将Jest从23升级到29后，TypeScript项目中出现以下错误：

TypeError: Cannot read property 'explorerPage' of undefined

涉及代码如下：

TestPageDefs模块 #

import { lxExplorer } from "../pageObjects/explorer/lxExplorer.pom";
export class TestPageDefs {
  // Page object files
  public static explorerPage: lxExplorer = new lxExplorer();
}

引用模块 #

import { TestPageDefs } from "../../helpers/TestPageDefs";

export class lxLinkAnalysis extends BasePluginPage<lxLinkAnalysis> {
  public ebsLinkClassifyCountQuery: string = TestPageDefs.explorerPage.ebsTableQuery + " | link    'Log Source' | classify Count";
}

核心原因 #

Jest 29在模块加载、初始化顺序及循环依赖处理上做了严格改进，相比Jest 23，新版本会更严格地保证模块初始化完整性，旧版本中被掩盖的模块初始化顺序问题或循环依赖问题会暴露出来。

解决方案 #

1. 排查循环依赖 #

检查lxExplorer.pom文件是否间接导入了lxLinkAnalysis或TestPageDefs，循环依赖会导致模块初始化不完整，进而出现TestPageDefs未定义的情况。可通过手动梳理导入链或使用madge等工具扫描项目循环依赖。

2. 延迟静态属性初始化 #

将TestPageDefs中的静态属性改为延迟初始化的getter，避免在模块加载阶段就实例化对象，确保访问时模块已完全初始化：

import { lxExplorer } from "../pageObjects/explorer/lxExplorer.pom";
export class TestPageDefs {
  private static _explorerPage: lxExplorer;

  public static get explorerPage(): lxExplorer {
    if (!this._explorerPage) {
      this._explorerPage = new lxExplorer();
    }
    return this._explorerPage;
  }
}

3. 延迟引用属性的初始化 #

将lxLinkAnalysis中的属性改为getter，在实际访问时才去获取TestPageDefs的静态成员，避开模块初始化顺序冲突：

import { TestPageDefs } from "../../helpers/TestPageDefs";

export class lxLinkAnalysis extends BasePluginPage<lxLinkAnalysis> {
  public get ebsLinkClassifyCountQuery(): string {
    return TestPageDefs.explorerPage.ebsTableQuery + " | link    'Log Source' | classify Count";
  }
}

4. 调整Jest配置 #

Jest 29默认的模块隔离策略可能加剧问题，可尝试修改jest.config.js中的相关配置：

module.exports = {
  // 关闭模块隔离，匹配旧版本Jest默认行为
  isolatedModules: false,
  // 关闭自动重置mock，避免影响模块状态
  resetMocks: false
};

注意：isolatedModules关闭后可能影响TypeScript类型检查效率，需根据项目情况权衡。

5. 检查TypeScript编译配置 #

确保tsconfig.json中的配置与Jest 29兼容：

{
  "compilerOptions": {
    "module": "CommonJS", // 或ESNext，需与Jest模块处理逻辑一致
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

内容的提问来源于stack exchange，提问作者Manoj Kumar