Create React App中配置Jest+TypeScript遇npm test错误求助

嘿，这个问题我碰到过好多次了——Create React App（CRA）为了让开发者不用折腾配置，默认锁定了一部分Jest的配置项，你在package.json里加的transform、testRegex、moduleFileExtensions正好是它不让自定义的那批，所以才会抛出这个错误。下面给你两种可行的解决思路：

方案一：移除不支持的配置项（最稳妥，推荐） #

其实CRA已经帮你把TypeScript项目的Jest配置都搞定了：

• transform：默认用babel-jest配合@babel/preset-typescript处理TS/TSX文件，不用你手动配置
• testRegex：默认会匹配所有.test.ts、.test.tsx、.spec.ts、.spec.tsx结尾的测试文件
• moduleFileExtensions：已经包含了ts、tsx、js、jsx这些常用后缀

你只需要打开package.json，把里面的transform、testRegex、moduleFileExtensions这几个配置删掉，保留CRA允许的collectCoverageFrom、coverageReporters等项就行。之后再运行npm test应该就能正常执行了。

方案二：如果确实需要自定义这些配置（用react-app-rewired绕过CRA限制） #

要是你有特殊需求（比如自定义测试文件匹配规则、添加自定义的transform处理），可以用react-app-rewired来覆盖CRA的默认配置，不用执行不可逆的eject操作：

1. 先安装依赖：

npm install --save-dev react-app-rewired customize-cra

2. 在项目根目录创建config-overrides.js文件，写入你的自定义Jest配置，比如：

const { override, adjustJestConfig } = require('customize-cra');

module.exports = override(
  adjustJestConfig((jestConfig) => {
    // 比如修改testRegex，匹配所有以.test.tsx结尾的文件
    jestConfig.testRegex = /\.test\.tsx$/;
    // 或者添加自定义transform处理某类文件
    jestConfig.transform['^.+\\.custom$'] = '<rootDir>/scripts/custom-transformer.js';
    return jestConfig;
  })
);

3. 修改package.json里的scripts，把test命令改成：

"scripts": {
  "test": "react-app-rewired test",
  // 其他命令保持不变
}

这样CRA就会加载你自定义的Jest配置了。

额外注意点 #

• 如果你在测试时遇到Type类型检查的错误，可以在test命令后加上--watchAll=false（比如npm test -- --watchAll=false），或者检查你的tsconfig.json里的strict、noImplicitAny等配置是否和测试文件兼容。
• 不要轻易执行npm run eject，这个操作会把CRA的所有默认配置都暴露出来，之后就没法再享受CRA的自动更新了。

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