使用Jest+React Testing Library测试时导入静态资源报错如何解决

问题原因及修复方案 #

你遇到的报错是因为jest配置未生效，无法识别静态图片格式，具体修复步骤如下：

1. 修正jest配置导出语法
   你的jest.config.js第一行导出写错了，少了末尾的s，导致整个配置未被jest加载，你配置的静态资源映射规则完全没有生效。
   修改前：

module.export = {

修改后：

module.exports = {

2. 确认静态资源mock文件存在
   检查你项目根目录下是否有__mocks__/fileMock.js文件，没有的话手动创建，文件内容如下即可：

module.exports = 'icon.webp';

这里返回的内容就是你测试中import icon from "../../static/kolo_icon.webp"拿到的值，刚好匹配你测试里的断言逻辑。

3. 修正测试文件匹配规则（可选，避免后续匹配不到测试文件）
   你当前配置里的testMatch正则有多余的无效字符，修正为：

testMatch: ['<rootDir>/src/client/**/*.test.{js,jsx}'],

按上述步骤修改后重新运行测试即可解决报错。

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