Jest测试文件引入SweetAlert2报CSS错误，附配置及目录结构

你的问题根源出在Jest对CSS文件的映射配置上——当前你把CSS/LESS文件映射到了真实的stylesheets目录，而SweetAlert2自身会引入内置的CSS文件，Jest尝试解析这些第三方CSS时找不到对应路径，就会抛出错误。

下面是具体的修复方案：

1. 推荐方案：用identity-obj-proxy处理CSS模块 #

这是Jest社区处理CSS最常用的方案，它会模拟CSS模块的导出逻辑，让Jest跳过真实CSS文件的解析，避免报错。

• 首先安装依赖：

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

• 然后修改package.json里的Jest配置，替换CSS/LESS的映射规则：

  "jest": {
      "moduleNameMapper": {
          "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/reactTests/__mocks__/fileMock.js",
          "\\.(css|less)$": "identity-obj-proxy"
      },
      "testPathIgnorePatterns": [
          "<rootDir>/node_modules/",
          "<rootDir>/client/src/stylesheets/"
      ]
  }
  

2. 备选方案：自定义CSS Mock文件 #

如果你不想引入第三方包，也可以自己写一个极简的mock文件：

• 在reactTests/__mocks__目录下新建cssMock.js，内容如下：

  module.exports = {};
  

• 然后修改Jest配置里的CSS映射：

  "\\.(css|less)$": "<rootDir>/reactTests/__mocks__/cssMock.js"
  

原配置出错的原因 #

你之前把CSS文件映射到client/src/stylesheets/这个真实目录，但SweetAlert2的CSS并不在这个路径下，Jest尝试去该目录寻找对应文件时自然会失败。而使用mock方案后，Jest会把所有CSS导入都当成一个空对象/模拟模块，不会去解析真实的CSS内容，也就从根源避免了错误。

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