Create React App Rewired项目自定义Jest配置不生效如何解决？

问题根因 #

CRA 内置的 react-scripts 执行测试命令时，默认会忽略项目根目录下的独立 jest.config.js / jest.config.ts 配置文件，优先读取自身封装的内置 Jest 配置。create-react-app-rewired 作为 CRA 的扩展工具，默认遵循该逻辑，不会主动加载根目录下的 Jest 配置，所以你手动修改根目录的配置文件不会生效。
你全局搜索不到其他覆盖配置，是因为 CRA 的默认 Jest 配置存储在 node_modules/react-scripts 依赖包内部，不属于你的项目源码文件，排除 node_modules 目录的搜索自然找不到。

正确的自定义配置方式 #

• 方式一（最推荐）：通过 config-overrides.js（如果你的项目用TS版本就是config-overrides.ts）修改配置
  在配置文件中根据执行环境判断，测试环境下直接修改传入的配置对象即可，示例代码如下：

  // config-overrides.js
  module.exports = function override(config, env) {
    // 仅在测试环境下修改Jest配置
    if (env === 'test') {
      // 修改测试环境为node
      config.testEnvironment = 'node';
      // 其他ts-jest相关配置也可以在此处添加，例如配置preset、transform规则等
      config.preset = 'ts-jest';
    }
    return config;
  }
  

  这种方式会保留CRA内置的所有合理默认配置，只覆盖你需要自定义的部分，不会出现配置缺失的问题。
• 方式二：主动指定独立配置文件
  如果你坚持要使用根目录下的独立Jest配置文件，可以修改package.json中的test启动脚本，手动指定配置路径：

  {
    "scripts": {
      "test": "react-scripts test --config jest.config.ts"
    }
  }
  

  注意该方式需要你手动把CRA内置的默认Jest配置合并到自己的配置文件中，否则会缺失例如样式 mock、静态资源处理等内置规则，导致测试运行异常。

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