Jest测试React组件时CSS文件@字符引发语法错误求助

Jest是JavaScript测试工具，默认无法解析CSS这类非JS文件，当组件导入包含@charset、@import等CSS语法的文件时，就会触发SyntaxError: Invalid or unexpected token错误。以下是两种简单的解决方法：

方法1：使用jest-transform-stub转译CSS文件 #

• 安装依赖包：

  npm install --save-dev jest-transform-stub
  

• 修改你的jest.config.json，添加transform规则：

  {
    "transform": {
      "^.+\\.jsx?$": "babel-jest",
      "^.+\\.css$": "jest-transform-stub"
    }
  }
  

方法2：手动Mock CSS文件 #

如果不想额外安装依赖，可以直接用Jest的模块映射功能Mock CSS：

• 在jest.config.json中添加moduleNameMapper配置：

  {
    "moduleNameMapper": {
      "^.+\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
  

• 在项目根目录创建__mocks__文件夹，里面新建styleMock.js文件，内容如下：

  module.exports = {};
  

验证修改 #

保存配置后，重新运行测试命令：

npm test

此时Jest会忽略CSS文件的解析，不再触发@字符相关的语法错误。

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