使用ts-jest集成create-react-app修复TypeScript测试覆盖率不准确问题

我之前在维护用create-react-app + react-scripts-ts搭建的TypeScript项目时，也碰到过执行--coverage生成的覆盖率报告完全不准的情况——要么很多TS代码没被统计到，要么覆盖率数值明显不符合实际。后来发现核心问题是默认的jest配置没有正确处理TypeScript的编译转换，换成ts-jest就能解决这个问题。下面分两种方案给你详细说明：

方案一：Eject后自定义Jest配置（不可逆，但配置更灵活） #

如果你能接受eject（一旦执行就无法恢复到默认的封装状态），可以按照以下步骤操作：

1. 安装必要依赖
   首先安装ts-jest和对应的类型定义：

npm install --save-dev ts-jest @types/jest
# 用yarn的话：
yarn add --dev ts-jest @types/jest

2. 执行Eject
   在项目根目录运行：

npm run eject

执行前记得备份代码，这个操作会把所有配置文件暴露到项目根目录，不可逆。

3. 修改package.json中的Jest配置
   找到package.json里的jest字段，替换成如下配置：

"jest": {
  "preset": "ts-jest",
  "testEnvironment": "jsdom",
  "collectCoverageFrom": [
    "src/**/*.{ts,tsx}",
    "!src/**/*.d.ts" // 排除类型定义文件，避免干扰覆盖率统计
  ],
  "transform": {
    "^.+\\.(ts|tsx)$": "ts-jest" // 用ts-jest处理所有TS/TSX文件
  },
  "moduleFileExtensions": [
    "ts",
    "tsx",
    "js",
    "jsx",
    "json",
    "node"
  ],
  "coverageReporters": [
    "json",
    "lcov",
    "text",
    "clover" // 可选，根据需要添加你想要的报告格式
  ]
}

4. 更新测试脚本
   把package.json里的test脚本改成直接调用jest：

"scripts": {
  "test": "jest --coverage",
  "test:watch": "jest --watch" // 可选，添加watch模式方便开发
}

方案二：不Eject，用react-app-rewired自定义配置（推荐） #

如果不想eject破坏项目的封装性，可以用react-app-rewired和customize-cra来覆盖默认配置：

1. 安装依赖

npm install --save-dev react-app-rewired customize-cra ts-jest @types/jest

2. 创建配置覆盖文件
   在项目根目录新建config-overrides.js，内容如下：

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

module.exports = override(
  addJestConfig({
    preset: 'ts-jest',
    collectCoverageFrom: [
      'src/**/*.{ts,tsx}',
      '!src/**/*.d.ts'
    ],
    transform: {
      '^.+\\.(ts|tsx)$': 'ts-jest'
    },
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx']
  })
);

3. 更新package.json的脚本
   把默认的start、build、test脚本替换成用react-app-rewired执行：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --coverage",
  "eject": "react-scripts-ts eject" // 保留eject选项，可选
}

常见问题排查 #

如果你执行过程中遇到错误，可以检查这几点：

• 确保@types/jest的版本和jest版本兼容（比如jest 27.x对应@types/jest 27.x）；
• 检查collectCoverageFrom是否正确包含了你需要统计的文件，有没有误排除核心代码；
• 如果遇到模块解析错误，确认moduleFileExtensions里包含了ts和tsx。

现在你再运行npm run test，应该就能得到准确的TypeScript代码覆盖率报告了。

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