Jest测试导入ReactToastify.css时出现语法错误问题咨询

问题说明 #

执行Jest测试时，导入react-toastify/dist/ReactToastify.css文件触发语法错误，具体报错信息如下：

C:\Users\User\Documents\GitHub\zampliasurveys_frontend\node_modules\react-toastify\dist\ReactToastify.css:1
({"Object.":function(module,exports,require,__dirname,__filename,jest){:root {
^
SyntaxError: Unexpected token ':'

import { Footer } from "components/Footer/Footer";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
^
export const Layout = () => {
return (

at Runtime.createScriptFromCode (node_modules/react-scripts/node_modules/jest-runtime/build/index.js:1728:14)
at Object. (src/pages/Layout/index.tsx:8:1)
at Object. (src/AppRoutes.tsx:9:1)
at Object. (src/App.tsx:1:1)
at Object. (src/test/App.test.tsx:3:1)

核心原因是Jest默认会把所有导入的文件当作JavaScript解析，无法识别CSS语法，碰到:root这类CSS代码时就会抛出语法错误。

解决方法 #

情况1：Create React App（CRA）项目 #

CRA内置了静态资源处理的基础配置，只需两步操作：

1. 在项目根目录创建src/__mocks__/styleMock.js文件，写入如下内容：

module.exports = {};

2. 在package.json中添加Jest配置：

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

配置完成后，Jest会把所有CSS文件的导入替换为空对象，避免解析CSS语法。

情况2：自定义Jest配置的项目 #

如果是手动配置Jest的项目，需要借助第三方工具处理：

1. 安装依赖：

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

2. 在jest.config.js中添加模块映射规则：

module.exports = {
  // 其他已有的Jest配置...
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
  }
};

该工具会模拟CSS模块的导出逻辑，适合需要测试样式相关逻辑的场景。

临时方案：单个测试文件跳过CSS导入 #

如果只想在特定测试文件中忽略该CSS的导入，可以在测试文件顶部添加：

jest.mock("react-toastify/dist/ReactToastify.css", () => {});

这样当前测试文件导入该CSS时会被替换为空函数，不会触发语法错误。

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