如何修复Jest测试中的‘Must use import to load ES Module’错误？

错误信息 #

Must use import to load ES Module: ...\node_modules\react-markdown\index.js

      1 | import React from "react";
      2 | import styled from "styled-components";
    > 3 | import MDEditor from "@uiw/react-md-editor";
        | ^
      4 |
      5 | import { useNavigate } from "react-router-dom";
      6 |

      at Runtime.requireModule (node_modules/jest-runtime/build/index.js:840:21)
      at Object.require (node_modules/@uiw/react-markdown-preview/src/index.tsx:2:1)
      at Object.<anonymous> (node_modules/@uiw/react-md-editor/src/Editor.tsx:2:1)
      at Object.<anonymous> (node_modules/@uiw/react-md-editor/src/index.tsx:1:1)
      at Object.require (src/components/Card.tsx:3:1)
      at Object.require (src/pages/MainPage/Main.tsx:1:1)
      at Object.require (src/App.tsx:1:1)
      at Object.require (src/index.test.js:4:1)

我的配置文件 #

jest.config.js #

jest: {
        roots: ["<rootDir>/src"],
        collectCoverageFrom: [
            "src/**/*.{js,jsx,ts,tsx}",
            "!src/**/*.d.ts",
            "!**/node_modules/**",
        ],
        globals: {
            "js-jest": {
                useESM: true,
            },
        },
        extensionsToTreatAsEsm: [".js"],
        setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],
        testMatch: [
            "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
            "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}",
        ],
        testEnvironment: "jsdom",
        transform: { "^.+\\.(js|jsx|ts|tsx)?$": "babel-jest" },
        transformIgnorePatterns: ["node_modules/(?!react-markdown/)"],
        moduleNameMapper: {
            "^.+\\.svg$": "jest-svg-transformer",
            "\\.(css|less|scss|sass)$": "identity-obj-proxy",
        },
        moduleFileExtensions: ["js", "ts", "jsx", "tsx", "json", "node"],
        resetMocks: true,
    },

babel.config.js #

presets: [
        "@babel/preset-react",
        ["@babel/preset-env", { targets: { node: "current" } }],
        "@babel/preset-typescript",
    ],

package.json 中的test脚本 #

"test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"

已尝试的操作 #

• 使用node --experimental-vm-modules启动jest
• 在jest.config.js中配置globals["js-jest"].useESM: true

需求 #

我并未直接使用react-markdown，是依赖的@uiw/react-md-editor间接引入的，想知道错误原因和解决办法。

原因分析 #

错误本质是Jest处理ES模块的兼容性问题：react-markdown仅提供ES模块输出，而当前配置未正确处理该模块及其依赖链的转译，导致CommonJS环境下无法加载ES模块。

解决办法 #

• 修正jest.config.js关键配置

  • 把globals里的"js-jest"改为"babel-jest"，这是拼写错误，导致ES模块配置未生效
  • 扩展transformIgnorePatterns，将@uiw/react-md-editor、@uiw/react-markdown-preview以及react-markdown的核心依赖（如remark-*、rehype-*等）加入白名单，确保这些ES模块能被babel-jest转译
  • 更新extensionsToTreatAsEsm，添加.ts和.tsx，适配TypeScript文件的ES模块处理

  修改后的关键配置片段：

  globals: {
      "babel-jest": {
          useESM: true,
      },
  },
  extensionsToTreatAsEsm: [".js", ".ts", ".tsx"],
  transformIgnorePatterns: [
      "node_modules/(?!(react-markdown|@uiw/react-md-editor|@uiw/react-markdown-preview|remark-|rehype-|unified|unist-|bail|is-plain-obj|trough|vfile-)/)"
  ],
  

• 调整babel.config.js配置
  在@babel/preset-env中添加modules: false，禁止将ES模块转译为CommonJS，保证Jest能正确识别ES模块语法：

  presets: [
      "@babel/preset-react",
      ["@babel/preset-env", { 
          targets: { node: "current" },
          modules: false
      }],
      "@babel/preset-typescript",
  ],
  

• 清除Jest缓存
  执行命令清除旧缓存，避免配置修改后不生效：

  npx jest --clearCache
  

• 可选：明确项目模块类型
  如果项目本身使用ES模块，在package.json中添加"type": "module"，进一步明确模块系统，帮助Jest正确处理模块加载。

内容的提问来源于stack exchange，提问作者dev.kip