React TypeScript项目Jest遇Unexpected Token错误，求配置方案

云原生阿岚

2026-8-6

解决Jest解析axios ES模块报错的配置方案

问题根源

当前报错是因为axios v1+版本默认发布ES模块格式，但你的Jest配置默认跳过了node_modules目录的转译，导致Jest无法解析axios里的import语句。同时你的Babel配置缺少React预设，可能也会影响React组件的测试转译。

具体修复步骤

1. 更新Jest配置，让Jest转译axios

修改jest.config.js，调整transformIgnorePatterns排除axios不被忽略转译，同时补充tsx文件的转译规则：

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
    preset: "ts-jest",
    testEnvironment: "jsdom",
    transform: {
        // 同时处理ts和tsx文件
        '^.+\\.(ts|tsx)?$': 'ts-jest',
    },
    // 不对axios进行转译忽略，让Jest处理它的ES模块语法
    transformIgnorePatterns: ['<rootDir>/node_modules/(?!axios/)'],
};

2. 完善Babel配置，添加React预设

首先安装React预设依赖：

npm install --save-dev @babel/preset-react

然后修改babel.config.js，加入@babel/preset-react支持React JSX语法转译：

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: {
                    node: 'current',
                },
            },
        ],
        // 添加React预设
        '@babel/preset-react',
    ],
};