Jest执行React单元测试报错SyntaxError: Unexpected token .原因排查

这个问题我之前踩过坑！核心原因是Jest默认只处理JavaScript/TypeScript文件，当你的组件导入.css这类样式文件时，它会把CSS代码当成JS来解析，遇到.bluePawn这种不符合JS语法的代码时，自然就抛出SyntaxError: Unexpected token .的错误了。

下面给你两种简单可行的解决办法：

方法一：用Mock文件Stub样式导入 #

这是社区最常用的方案，让Jest把所有样式导入替换成空对象，跳过实际解析：

1. 打开你的jest.config.json，添加moduleNameMapper配置项：

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

2. 在项目根目录创建__mocks__文件夹，里面新建styleMock.js文件，内容只有一行：

module.exports = {};

方法二：使用jest-transform-stub包 #

这个包专门用来处理非JS文件的导入，配置更简洁：

1. 先安装依赖：

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

2. 修改jest.config.json的transform配置：

{
  "transform": {
    "\\.(css|less|scss|sass)$": "jest-transform-stub"
  }
}

配置完成后，重新运行你的测试命令：

jest --config=jest.config.json --watch

测试套件应该就能正常执行了！

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