运行 jest 测试时出现“找不到模块”错误

Question

我有使用 Milkdown 编辑器的 React 应用程序。我想使用 jest 测试这个应用程序。每当我运行导入 Milkdown 模块的笑话测试时，我都会收到以下错误：

Cannot find module '@milkdown/core' from 'src/MilkdownEditor.tsx'

我认为问题与

@milkdown/core

是一个esm模块有关。

有人可以帮助我了解在这种特殊情况下我应该如何配置 jest。

当前笑话配置：

import type { Config } from 'jest'

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  injectGlobals: true,
}

export default config

样品测试：

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

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

我创建了重现该问题的最小项目

我已经尝试应用一些建议（主要与配置 babel 相关），但没有任何帮助。

Answer 1

经过进一步检查，我想出了两个解决这个问题的方法：

解决方案1

按照jest文档中的建议，使用

--experimental-vm-modules

效果很好。为此，需要执行以下

jest.config.js

操作：

import type { Config } from 'jest'

const config: Config = {
  preset: 'ts-jest/presets/default-esm',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  injectGlobals: true,
}

export default config

并且为了更轻松地在

script

的

package.json

部分中定义 npm 脚本来运行测试：

"scripts": {
  "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest"
},

此解决方案的全面实施

解决方案2

此解决方案基于 babel

@babel/plugin-transform-modules-commonjs

。这是可以在周围找到的常见解决方案。但是，在这种特定场景中，需要在 jest 配置 (

moduleNameMapper

) 中进行额外的模块名称映射。目前我还无法解释这是什么原因。此外，有必要对

node_modules

应用 babel 变换，这是通过覆盖

transformIgnorePatters

来完成的。所以

jest.config.js

看起来如下：

import type { Config } from 'jest'

const config: Config = {
  preset: 'ts-jest',
  transform: {
    "^.+\\.[t]sx?$": "ts-jest",
    "^.+\\.[j]sx?$": "babel-jest"
  },
  transformIgnorePatterns: [
  ],
  moduleNameMapper: {
    "^@milkdown/prose/(.*)$": "<rootDir>/node_modules/@milkdown/prose/lib/$1.js",
    "^@milkdown/(.*)$": "<rootDir>/node_modules/@milkdown/$1"
  },
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  injectGlobals: true,
}

export default config

以下

babel.config.js

内容：

module.exports = {
  plugins: [
    "@babel/plugin-transform-modules-commonjs"
  ]
}

此解决方案的全面实施