如何解决jest-preview无法加载SCSS模块样式的问题

• 核对依赖版本：确保jest-preview版本不低于v0.3.0，同时babel-jest、css-loader版本与当前项目的React、Jest版本兼容。
• 检查jest.config.js的transform配置：
  必须保证CSS Modules文件的转换规则正确，且顺序无误，正确配置如下：

  module.exports = {
    transform: {
      "^.+\\.(js|jsx|ts|tsx)$": "babel-jest",
      "^.+\\.module\\.css$": "jest-preview/transform-css",
    },
    // 其他配置...
  };
  

  注意不要在moduleNameMapper中添加针对.module.css的映射规则，否则会覆盖jest-preview的样式处理逻辑。
• 确认测试与组件的样式引用：测试文件中需正确导入组件的CSS Modules文件（如import styles from './Button.module.css'），且组件内是通过className={styles[xxx]}或className={styles.xxx}的方式使用类名。
• 规范Jest Preview启动流程：
  1. 先在终端执行npx jest-preview启动预览服务
  2. 运行测试并调用preview()后，刷新预览页面查看样式
• 清除缓存：执行jest --clearCache和npx jest-preview --clear-cache，排除缓存导致的样式加载异常。

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