Electron+React项目Jest测试报decorators-legacy语法错误 配置Babel未解决

问题根因 #

报错的本质不是装饰器语法未开启，而是Jest默认不识别CSS等静态资源，误将.css文件作为JavaScript代码解析，把CSS原生的@import语法识别成了JS装饰器语法，才抛出了这个误导性的错误。你之前配置的装饰器插件本身没有问题，但没有解决静态资源解析的核心矛盾。

可行解决方案 #

步骤1：安装依赖 #

安装样式 mock 工具，用于Jest环境下代理样式文件导入：

npm install --save-dev identity-obj-proxy

步骤2：修复Babel配置 #

你提供的.babelrc存在语法错误，且.babelrc为目录级配置，会被react-scripts自带的Babel配置覆盖，做以下修改：

1. 重命名.babelrc为babel.config.json（项目级Babel配置，优先级更高）
2. 补全配置开头缺失的{，最终完整配置如下：

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
}

步骤3：配置Jest静态资源映射 #

在项目package.json中新增jest配置字段，指定静态资源的解析规则：

{
  // 原有package.json内容保持不变
  "jest": {
    "testEnvironment": "jsdom",
    "moduleNameMapper": {
      "\\.(css|less|scss|sass)$": "identity-obj-proxy",
      "\\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$": "<rootDir>/__mocks__/fileMock.js"
    },
    "transform": {
      "^.+\\.(js|jsx)$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "/node_modules/"
    ]
  }
}

步骤4：创建静态资源mock文件 #

在项目根目录新建__mocks__文件夹，添加两个文件：

1. fileMock.js 用于mock图片、字体等资源：

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

2. （可选）如果不需要用identity-obj-proxy，也可以新增styleMock.js mock所有样式文件：

module.exports = {};

此时需要将jest.moduleNameMapper中样式的配置替换为"\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"

验证 #

重新运行测试命令即可解决报错：

npm run test

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