React项目运行Jest测试出现Cannot find module错误求助

针对你遇到的Cannot find module '@milkdown/core'错误，核心原因是Jest默认以CommonJS模式运行，而Milkdown是纯ESM模块，需要调整Jest和TypeScript配置来适配。以下是具体解决方案：

1. 更新Jest配置 #

修改你的jest.config.ts，添加转译ESM模块的相关配置：

import type { Config } from 'jest'

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  injectGlobals: true,
  // 允许Jest转译@milkdown开头的ESM模块（默认跳过node_modules）
  transformIgnorePatterns: ['/node_modules/(?!@milkdown)/'],
  // 采用NodeNext模块解析规则，适配ESM
  moduleResolution: 'NodeNext',
  // 支持的文件扩展名，覆盖默认配置确保ESM文件被识别
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  // 配置ts-jest以ESM模式转译TypeScript文件
  transform: {
    '^.+\\.(ts|tsx)$': ['ts-jest', { useESM: true }],
  },
}

export default config

2. 同步TypeScript配置 #

调整tsconfig.json，确保模块解析规则与Jest一致：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src", "jest.setup.ts"]
}

3. （可选）Mock Milkdown模块优化测试 #

如果你的测试不需要实际渲染编辑器功能，可通过Mock模块避免初始化开销和DOM依赖问题：

import React from 'react'
import { render } from '@testing-library/react'
import MilkdownEditor from '../src/MilkdownEditor'

// Mock @milkdown/core核心方法
jest.mock('@milkdown/core', () => ({
  makeEditor: jest.fn(() => ({
    create: jest.fn(),
  })),
}))

// Mock Milkdown插件（如果你的编辑器使用了插件）
jest.mock('@milkdown/preset-commonmark', () => ({
  commonmark: jest.fn(),
}))

test('test milkdown editor renders without errors', () => {
  render(<MilkdownEditor />)
})

配置说明 #

• transformIgnorePatterns: 解除Jest对@milkdown包的转译忽略，让ts-jest能处理其ESM代码。
• moduleResolution: NodeNext: 统一Jest和TypeScript的模块解析逻辑，适配ESM的导入导出规则。
• ts-jest的useESM选项: 让ts-jest生成ESM格式的转译代码，与Milkdown的模块格式兼容。

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