如何为TypeScript编写的Create React App运行Jest单元测试？

安全阿岳

2026-8-15

解决TypeScript React项目Jest测试SyntaxError: Cannot use import statement outside a module报错

方案一：使用Create React App内置的测试配置（推荐）

Create React App针对TypeScript React项目已经预置了完整的Jest测试环境，无需手动执行jest --init，直接恢复默认配置即可：

删除手动创建的jest.config.ts文件
检查package.json中的test脚本，确保为：
```
"scripts": {
  "test": "react-scripts test"
}
```
执行yarn test，CRA会自动处理TypeScript、ES模块语法以及React组件的测试转译，你的TSX测试文件就能正常运行。

方案二：自定义Jest配置（适合需要自定义测试规则的场景）

如果必须保留手动初始化的Jest配置，需要补充转译相关配置，让Jest能识别TypeScript和ES模块语法：

1. 安装必要依赖

执行以下命令安装Babel转译相关包：

yarn add -D @babel/preset-typescript @babel/preset-react @babel/preset-env babel-jest identity-obj-proxy

identity-obj-proxy用于处理样式文件的导入（如果项目使用CSS/SCSS等）

2. 创建Babel配置文件

在项目根目录创建babel.config.js，添加如下内容：

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' } }],
    '@babel/preset-react',
    '@babel/preset-typescript'
  ]
};

3. 更新Jest配置

修改jest.config.ts，补充转译、文件匹配等关键配置：

export default {
  clearMocks: true,
  collectCoverage: true,
  coverageDirectory: "coverage",
  testEnvironment: "jsdom",
  // 配置转译规则，让babel-jest处理TS/TSX/JS/JSX文件
  transform: {
    '^.+\\.(ts|tsx)$': 'babel-jest',
    '^.+\\.(js|jsx)$': 'babel-jest'
  },
  // 指定Jest能识别的文件扩展名
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
  // 配置测试文件的匹配规则
  testMatch: [
    '**/tests/**/*.test.(ts|tsx|js)',
    '**/__tests__/**/*.test.(ts|tsx|js)'
  ],
  // 处理样式文件的导入
  moduleNameMapper: {
    '^.+\\.(css|less|scss|sass)$': 'identity-obj-proxy'
  }
};