如何在Jest/Enzyme测试中Mock CSS文件导入？

你之前直接用jest.mock('semantic-ui-css/semantic.min.css')无效，大概率是因为Jest默认不知道怎么处理非JS模块的导入，得给它指定处理规则或者提供具体的mock实现。下面给你几种靠谱的解决方式：

方法一：全局配置Jest自动mock所有CSS文件（推荐） #

这种方式一劳永逸，所有测试文件里的CSS导入都会被自动mock，不用每个文件单独写代码：

1. 先安装专门用来mock样式文件的依赖：

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

2. 在你的Jest配置文件（比如jest.config.js）或者package.json的jest字段中添加规则：

// jest.config.js示例
module.exports = {
  // 其他已有的配置...
  moduleNameMapper: {
    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
};

如果是在package.json里配置：

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

配置完成后，所有样式文件的导入都会被mock成空对象代理，不会再触发报错。

方法二：单独Mock这个Semantic UI CSS文件 #

如果你只想针对这一个CSS文件做mock，不想影响其他样式文件，可以这么操作：

1. 在项目根目录创建__mocks__文件夹（Jest会自动识别这个目录的mock文件），然后在里面创建对应路径的文件：__mocks__/semantic-ui-css/semantic.min.js（路径要和你导入的CSS文件完全对应）
2. 这个mock文件里只需要空导出就行：

// __mocks__/semantic-ui-css/semantic.min.js
module.exports = {};

3. 回到Header.test.js里调用mock：

jest.mock('semantic-ui-css/semantic.min.css');

这次Jest会自动找到你创建的mock文件，就能正常跳过CSS导入了。

方法三：在测试文件里直接指定mock实现 #

还有一种更轻量化的方式，不用额外创建文件，直接在测试文件里给mock指定空实现：

// Header.test.js
jest.mock('semantic-ui-css/semantic.min.css', () => {});

// 接着导入组件写测试用例
import Header from './Header';
// ...你的测试代码

这种方式适合临时给单个测试文件做mock，不用修改全局配置。

另外提一句，如果你的项目是用Create React App创建的，它本身已经内置了样式文件的mock逻辑，要是还是报错，可能是你自定义的Jest配置覆盖了默认设置，可以检查下配置有没有冲突。

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