React+TypeScript项目Jest测试axios遇意外令牌错误求助

核心原因与修复步骤 #

1. 让Jest兼容ES模块 #

axios默认发布ES模块版本，Jest默认无法解析这类语法，需在jest.config.js中调整转换规则：

module.exports = {
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.(js|jsx)$': 'babel-jest',
  },
  transformIgnorePatterns: [
    // 排除node_modules中需要转换的包，比如axios
    '/node_modules/(?!axios)/',
  ],
};

2. 修正Babel配置 #

确保.babelrc或babel.config.js包含React+TypeScript的预设：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

3. 正确Mock axios #

避免mock时出现语法冲突，推荐两种可靠方式：

• 方式一：直接mock模块

import axios from 'axios';
import { fetchData } from './your-fetch-module';

jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

test('成功获取数据', async () => {
  const mockResp = { data: { id: 1, name: 'test' } };
  mockedAxios.get.mockResolvedValue(mockResp);

  const result = await fetchData();
  expect(result).toEqual(mockResp.data);
});

• 方式二：创建本地mock文件
  在项目根目录新建__mocks__/axios.ts：

const mockAxios = {
  get: jest.fn(),
  post: jest.fn(),
};

export default mockAxios;

测试文件中无需额外配置，直接导入axios即可自动使用mock版本。

4. 检查TypeScript配置 #

确保tsconfig.json的关键配置正确：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "allowJs": true
  }
}

5. 补全依赖 #

确保安装了所有必要的开发依赖：

npm install --save-dev jest ts-jest @babel/preset-env @babel/preset-react @babel/preset-typescript babel-jest @types/jest

验证操作 #

1. 清空Jest缓存：jest --clearCache
2. 重新执行测试：npm test

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