如何在React Laravel Mix项目中配置Jest解决import语法报错

Jest默认运行在CommonJS环境，原生不识别ES Module规范的import语法，同时Laravel Mix自带的Babel构建配置不会自动对Jest的执行环境生效，没有经过转译的import语句会直接被Node.js解析抛出错误。

1. 安装依赖 #

执行对应包管理工具的安装命令，安装Jest和Babel转译相关依赖：

# npm 执行
npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

# yarn 执行
yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

2. 配置Babel转译规则 #

在项目根目录新建babel.config.json文件，写入以下配置，同时兼容ES模块语法和React JSX语法转译：

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

注意：不要将该配置写入.babelrc文件，Laravel Mix与Jest对.babelrc的作用域识别逻辑存在差异，使用根目录的babel.config.json可以同时兼容生产构建和测试环境的转译需求。

3. 新增Jest配置文件 #

在项目根目录新建jest.config.js文件，适配Laravel Mix的目录结构和资源解析规则：

module.exports = {
  // 匹配项目内所有测试文件，可根据自己的目录结构调整
  testMatch: ["**/resources/**/*.test.js"],
  // 指定js/jsx文件使用babel-jest转译
  transform: {
    "^.+\\.(js|jsx)$": "babel-jest"
  },
  // 放行node_modules中提供ES模块版本的依赖，按需替换成自己项目用到的ESM包
  transformIgnorePatterns: [
    "/node_modules/(?!(lodash-es|react-dnd|@mui/.*)/)"
  ],
  // Mock非JS静态资源，避免Jest解析样式、图片等文件报错
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "<rootDir>/resources/js/tests/__mocks__/styleMock.js",
    "\\.(jpg|jpeg|png|gif|svg|webp)$": "<rootDir>/resources/js/tests/__mocks__/fileMock.js"
  }
};

创建配置中引用的mock文件目录和对应文件：

• 新建resources/js/tests/__mocks__/styleMock.js，内容为：

module.exports = {};

• 新建resources/js/tests/__mocks__/fileMock.js，内容为：

module.exports = "test-file-stub";

4. 添加测试运行脚本 #

修改项目根目录package.json的scripts字段，添加测试执行命令：

{
  "scripts": {
    // 保留原有dev、prod等脚本，新增test命令
    "test": "jest"
  }
}

• 如果项目中配置了Laravel Mix的路径别名，比如将@指向resources/js目录，需要在jest.config.js中补充路径解析配置：

module.exports = {
  // 其他已有配置
  modulePaths: ["<rootDir>/resources/js"]
}

• 如果测试文件中写了JSX语法，要么将测试文件后缀改为.jsx，要么在transform规则中明确开启.js文件的JSX解析支持。
• 不要在package.json中设置"type": "module"开启Node原生ESM模式，Laravel Mix的依赖链大部分基于CommonJS规范，开启原生ESM会触发更多依赖兼容问题，通过Babel转译是稳定性最高的方案。

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