求Jest + React + TypeScript可用的默认配置示例

首先，你的现有配置确实遗漏了几个关键部分——比如React测试必需的DOM环境、更严谨的模块路径映射，还有TypeScript测试的类型支持优化。下面是一个经过生产环境验证的完整配置，我会逐一拆解每个项的作用：

完整的 jest.config.js #

module.exports = {
  // 指定测试文件的根目录
  roots: ['<rootDir>/src'],

  // 转换规则：处理TS/TSX文件和静态资源
  transform: {
    '^.+\\.tsx?$': 'ts-jest',
    '^.+\\.(css|styl|less|sass|scss|png|jpg|jpeg|gif|svg|ttf|woff|woff2)$': 'jest-transform-stub',
  },

  // 测试文件匹配规则
  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',

  // 支持的文件扩展名
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

  // React测试需要的DOM环境（关键！你的配置里缺这个）
  testEnvironment: 'jsdom',

  // 模块路径映射：处理别名（比如@/components）
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
    '\\.(css|less|scss|sass)$': 'jest-transform-stub',
  },

  // 忽略不需要转换的第三方库
  transformIgnorePatterns: ['/node_modules/(?!(axios|some-esm-library)/)'],

  // Enzyme快照序列化器
  snapshotSerializers: ['enzyme-to-json/serializer'],

  // 测试前的初始化文件（用<rootDir>确保路径正确）
  setupFilesAfterEnv: ['<rootDir>/src/setupTests/enzymeConfig.ts'],

  // 覆盖率报告配置（可选但实用）
  collectCoverageFrom: [
    'src/**/*.{ts,tsx}',
    '!src/**/*.d.ts',
    '!src/index.tsx',
    '!src/serviceWorker.ts',
  ],
  coverageDirectory: '<rootDir>/coverage',
  coverageReporters: ['html', 'text-summary', 'lcov'],
};

关键补充项解释 #

• testEnvironment: 'jsdom'：React是基于浏览器DOM的，Jest默认用Node环境，必须显式指定jsdom才能模拟浏览器环境，否则会报document is undefined之类的错误。
• moduleNameMapper：不仅处理静态资源，还支持路径别名（比如把@/components/Button映射到src/components/Button），让测试文件的导入更简洁。
• transformIgnorePatterns：避免转换某些第三方ES模块，防止测试时出现语法错误。
• collectCoverageFrom等覆盖率配置：帮你快速查看代码测试覆盖率，优化测试用例。

配套依赖安装 #

确保你安装了所有必需的依赖：

npm install --save-dev jest ts-jest @types/jest jest-environment-jsdom enzyme @types/enzyme enzyme-adapter-react-16 enzyme-to-json jest-transform-stub

（注：enzyme-adapter-react-16要对应你的React版本，比如React 17用@wojtekmaj/enzyme-adapter-react-17）

配套初始化文件：enzymeConfig.ts #

放在src/setupTests/enzymeConfig.ts（路径要和setupFilesAfterEnv对应）：

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16'; // 对应你的React版本

configure({ adapter: new Adapter() });

TypeScript测试配置：tsconfig.test.json #

在项目根目录创建这个文件，专门用于测试环境的TypeScript配置：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "module": "CommonJS",
    "target": "ES5",
    "esModuleInterop": true,
    "allowJs": true
  },
  "include": ["src/**/*", "__tests__/**/*"]
}

运行测试脚本 #

在package.json里添加测试命令：

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage"
  }
}

这样配置后，你的Jest测试就能完美支持React + TypeScript，解决之前可能遇到的环境错误、路径问题和类型支持不足的情况。

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