TypeScript+React+Jest项目运行快照测试报Unexpected token '<'错误如何解决

问题根因 #

你的tsconfig.json中jsx配置为preserve，意味着TypeScript编译时不会处理JSX语法，会原样保留<Button/>这类标签，而Jest默认无法识别原生JSX语法，所以抛出了Unexpected token '<'的错误。另外Jest 27+默认测试环境为Node，缺少浏览器DOM运行环境，也会导致React组件测试运行异常。

解决步骤 #

• 第一步：修改tsconfig.json的compilerOptions配置
  将"jsx": "preserve"修改为"jsx": "react-jsx"，这是React 17+支持的新JSX转换规则，不需要每个组件文件手动引入React即可正常编译JSX。如果你使用的是低于17的React版本，可以替换为"jsx": "react"。

• 第二步：安装jsdom测试环境依赖
  Jest 27版本开始默认移除了内置的jsdom环境，需要手动安装：

npm install --save-dev jest-environment-jsdom

• 第三步：更新jest.config.ts配置
  补充测试环境声明，同时完善transform匹配规则，修改后的完整配置如下：

import type {Config} from '@jest/types';

const config: Config.InitialOptions = {
    verbose: true,
    testEnvironment: 'jsdom',
    collectCoverageFrom: [
        'src/components/**/*.{ts,tsx}',
    ],
    coverageDirectory: 'reports/coverage/unit',
    coverageThreshold: {
        global: {
            branches: 90,
            functions: 90,
            lines: 90,
            statements: 90,
        },
    },
    transform: {'^.+\\.(ts|tsx|js|jsx)$': 'ts-jest'},
    testMatch: ['**/*.test.*'],
    coverageProvider: 'v8',
};

export default config;

完成以上修改后重新运行npm run test即可正常执行快照测试。

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