Next.js v12 ESM模式下Jest Mock React Hook失败求助

问题根源 #

ESM模式下Jest的模块加载顺序是核心问题——你的测试代码中，组件Test的导入时机早于Mock生效，导致组件加载了原始的useTest Hook，而非Mock版本。

修正后的测试代码 #

调整导入逻辑，确保Mock优先生效，同时适配ESM模块的Mock规则：

// Test.test.tsx
import { jest } from "@jest/globals";

// 1. 先声明Mock，必须标记为ESM模块
jest.unstable_mockModule("../hooks/useTest", () => ({
  __esModule: true,
  useTest: jest.fn(() => ({ test: "mocked" }))
}));

// 2. 动态导入所有依赖，确保Mock已生效
const { useTest } = await import("../hooks/useTest");
const { Test } = await import("../components/wallet/Test");
const { render, screen } = await import("@testing-library/react");

describe("test hook mocking", () => {
  it("mocks hook as expected", () => {
    render(<Test />);
    
    // 同步渲染场景用getByText即可
    expect(screen.getByText("mocked")).toBeInTheDocument();
  });
});

关键调整项 #

• 添加__esModule: true：Jest处理ESM模块Mock时，需要这个标识来正确识别导出结构，否则会忽略Mock配置。
• 严格控制导入顺序：所有依赖（组件、测试库）必须在jest.unstable_mockModule执行后，通过await import动态加载，保证Mock先于模块解析完成。
• 替换findByText为getByText：你的组件是同步渲染，findByText用于异步加载场景，这里用getByText更准确，避免不必要的等待超时。

额外排查要点 #

• 检查Jest配置文件（jest.config.js）的ESM支持：

export default {
  extensionsToTreatAsEsm: [".ts", ".tsx"],
  moduleNameMapper: {
    "^(\\.{1,2}/.*)\\.js$": "$1" // 适配ESM的.js后缀导入规则
  },
  transform: {} // Next.js 12的Rust编译器已处理代码转换，无需额外babel-jest
};

• 确保运行命令正确：NODE_OPTIONS=--experimental-vm-modules npx jest，不能省略--experimental-vm-modules参数。
• 校验相对路径：组件中useTest的导入路径../../hooks/useTest和测试中的../hooks/useTest必须对应同一文件，路径错误会导致Mock不生效。

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