配置Jest允许静态文件后仍遇css-modules语法错误，如何生成快照？

我之前也碰到过一模一样的问题——哪怕已经配置了允许静态文件，Jest还是会在处理CSS Modules时抛出SyntaxError: Unexpected token。这是因为Jest默认只认JS/JSX文件，完全搞不懂CSS里的:local、:global或者模块化类名的语法。下面给你两个靠谱的解决思路，按需选择：

方法一：Mock CSS Modules（简单快捷，适合绝大多数场景） #

这个方法是让Jest加载CSS文件时用一个模拟文件代替，根本不解析真实的CSS代码，既避免了语法错误，还能让快照正常生成。

1. 修改你的Jest配置文件（jest.config.js或者package.json里的jest字段），添加moduleNameMapper：

module.exports = {
  // 保留你原有的其他配置
  moduleNameMapper: {
    // 匹配所有.css文件，指向我们要创建的mock文件
    '\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js'
  }
};

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

// 版本1：简单导出空对象，适合不需要关心类名的测试
module.exports = {};

// 版本2：用Proxy模拟类名映射，快照里会显示真实的类名（更推荐）
module.exports = new Proxy({}, {
  get: (target, className) => className
});

用版本2的话，你的组件快照里的类名会和真实代码里的一致，比如className={styles.splashContainer}在快照里会显示成class="splashContainer"，更贴近真实渲染效果。

方法二：用Babel插件解析CSS Modules（需要真实类名映射时用） #

如果你的测试依赖真实的CSS Modules类名映射（比如要测试类名是否正确应用），可以用Babel插件把CSS编译成Jest能识别的JS对象。

1. 安装依赖：

npm install --save-dev babel-plugin-transform-css-modules-raw

2. 修改你的Babel配置文件（.babelrc或者babel.config.js）：

{
  "presets": ["你的现有presets比如@babel/preset-react"],
  "plugins": ["transform-css-modules-raw"]
}

3. 确保Jest用Babel处理CSS文件，在jest.config.js里添加：

module.exports = {
  // 保留其他配置
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
    '^.+\\.css$': 'babel-jest'
  }
};

最后补充几个注意点 #

• 如果你用React生成快照，确保测试代码里用react-test-renderer正确渲染组件：

import React from 'react';
import renderer from 'react-test-renderer';
import Splash from './Splash';

test('Splash组件渲染正常并生成快照', () => {
  const component = renderer.create(<Splash />);
  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

• 如果用的是SCSS/SASS这类预处理器，记得把moduleNameMapper里的后缀改成\\.(scss|sass)$，或者对应调整Babel配置。
• 检查Jest配置是否正确加载，比如如果同时存在package.json里的jest字段和单独的jest.config.js，优先以jest.config.js为准。

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