如何在NextJS 15快照测试中阻止动态CSS类生成？

Next.js 15 对 styled-jsx 的内部模块结构做了调整，导致旧版 mock 方案失效。以下是适配新版本的修复步骤：

1. 重构 Mock 文件 #

创建/更新 __mocks__/styled-jsx/css.js，确保导出的 API 与新版 styled-jsx 完全对齐：

const css = () => '';
css.resolve = () => ({ className: '', styles: '' });
css.global = () => '';
css.default = css;

export { css };
export default css;

若你的项目直接从 styled-jsx 根模块导入 css，需额外创建 __mocks__/styled-jsx/index.js：

export const css = () => '';
css.resolve = () => ({ className: '', styles: '' });
css.global = () => '';

export default { css };

2. 更新 Jest 配置 #

修改 jest.config.js 中的 moduleNameMapper，替换原有的 css 文件匹配规则，改为精准匹配 styled-jsx 的模块路径：

const jestConfig = {
  moduleNameMapper: {
    '^styled-jsx/css$': '<rootDir>/__mocks__/styled-jsx/css.js',
    '^styled-jsx$': '<rootDir>/__mocks__/styled-jsx/index.js',
    // 保留其他原有映射规则...
  },
  // 其他 Jest 配置项...
};

export default jestConfig;

3. 特殊场景处理（可选） #

如果快照中仍出现动态类，检查测试文件是否使用了 styled-jsx 的其他导出（如 StyleSheet），需在 mock 文件中补充对应空实现：

// 在 __mocks__/styled-jsx/index.js 中添加
export const StyleSheet = { create: () => ({}) };

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