React组件Jest测试遇CSS错误：如何通过测试？

嘿，我之前也碰到过这个问题——Jest本身没办法直接处理CSS这类静态资源，所以当你的组件里引入了CSS（不管是普通CSS还是CSS Modules），测试就会报错。给你几个靠谱的解决办法，你可以根据自己的项目情况挑选：

方法1：用identity-obj-proxy处理CSS Modules #

如果你的项目用了CSS Modules（比如导入styles.css后用styles.className这种方式），这个方法最适合，它能让Jest正确识别类名，不会影响你对类名相关的断言。

步骤如下：

1. 先安装依赖：

npm install --save-dev identity-obj-proxy
# 或者用yarn
yarn add -D identity-obj-proxy

2. 配置Jest：
   • 如果项目根目录有jest.config.js，添加以下配置：

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

   • 如果是在package.json里配置Jest，就把这段加在jest字段下：

   {
     "jest": {
       "moduleNameMapper": {
         "\\.(css|less|scss|sass)$": "identity-obj-proxy"
       }
     }
   }
   

方法2：简单Mock成空模块 #

如果你的项目没用到CSS Modules，只是想让Jest忽略CSS文件，不让它报错，那就直接把CSS文件Mock成空对象：

1. 配置Jest：

   module.exports = {
     // 其他配置...
     moduleNameMapper: {
       "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js",
     },
   };
   

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

   module.exports = {};
   

这样Jest碰到CSS导入时，就会加载这个空模块，不会再抛出错误。

方法3：针对Create React App项目的特殊处理 #

如果你用的是Create React App（CRA），其实它默认已经帮你配置好了Jest处理CSS的逻辑，但如果你执行了eject或者自定义了配置，可能需要检查一下：

CRA默认的Jest配置是这样的：

"moduleNameMapper": {
  "^react-native$": "react-native-web",
  "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
  "^.+\\.(css|sass|scss)$": "<rootDir>/src/__mocks__/styleMock.js"
}

它会区分普通CSS和CSS Modules分别处理。如果你的测试报错，大概率是你修改了这个配置，恢复成默认或者按照前面的方法调整即可。

额外提示：TypeScript项目的类型声明 #

如果你的项目用了TypeScript，导入CSS文件时可能会出现TS类型错误，这时候可以在src目录下创建types/css.d.ts文件，添加类型声明：

declare module "*.css" {
  const classes: { [key: string]: string };
  export default classes;
}

declare module "*.scss" {
  const classes: { [key: string]: string };
  export default classes;
}

这样TypeScript就知道导入CSS文件会得到一个类名字典，不会再报错啦。

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