Vite+TS+React项目Jest测试Redux thunk时Firebase报unexpected token错误

问题根因 #

报错来自两个核心问题：

• Firebase v9 是纯ESM格式的依赖，Jest默认运行在CommonJS环境，且默认不会转译node_modules下的文件，原配置里ts-jest仅处理.ts/.tsx后缀文件，无法识别Firebase包内的import语法，直接抛出语法错误。
• 仅mock providers文件无法阻断Firebase初始化逻辑的加载：thunk的依赖树中包含src/firebase/config.ts，该文件直接引入Firebase官方包，Jest解析依赖时会优先加载该文件，在mock生效前就触发了Firebase包的解析错误。

解决步骤 #

1. 调整Jest转译配置 #

修改jest.config.ts，让ts-jest同时处理JS文件，仅转译必要的ESM依赖，兼顾兼容性和测试运行速度：

export default {
  testEnvironment: "jsdom",
  transform: {
    // 匹配所有js/jsx/ts/tsx后缀文件交由ts-jest处理
    "^.+\.(js|jsx|ts|tsx)$": "ts-jest"
  },
  moduleNameMapper: {
    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
  },
  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
  // 排除node_modules下除firebase、@firebase之外的包，不做转译
  transformIgnorePatterns: [
    "/node_modules/(?!(firebase|@firebase)/)"
  ],
}

打开根目录tsconfig.json，在compilerOptions中添加配置，允许ts-jest处理JS文件：

{
  "compilerOptions": {
    // 原有配置保持不变
    "allowJs": true
  }
}

2. 补全Firebase相关模块的Mock #

原测试仅mock了providers文件，没有阻断config.ts中真实Firebase初始化逻辑的加载，推荐全局Mock配置文件，所有测试生效，无需重复编写代码。在jest.setup.ts末尾添加：

// 全局Mock Firebase配置，不执行真实的初始化逻辑
jest.mock('./src/firebase/config', () => ({
  auth: {}, // 对应代码中从config导出的auth实例
  db: {}    // 对应代码中从config导出的firestore实例
}));

如果仅需要在单个测试文件中隔离Firebase逻辑，也可以把上述mock代码直接写在对应测试文件顶部。

3. 测试文件逻辑调整 #

原测试文件保留providers的mock即可，参考代码：

import { checkingCredentials } from '../../../src/redux/auth/authSlice';
import { checkingAuthentication } from '../../../src/redux/auth/thunk';

// 保留providers的mock，后续测试中可给对应方法自定义返回值
jest.mock('../../../src/firebase/providers');

describe('thunk.ts (auth)', () => {
    const dispatch = jest.fn();

    beforeEach( () => jest.clearAllMocks() );

    test('should invoke checkingCredentials', async() => {
        await checkingAuthentication()( dispatch );
        expect( dispatch ).toHaveBeenCalledWith( checkingCredentials() )
    });
});

配置修改完成后重新执行npm run test，ESM语法报错会直接消除。测试运行时不会发起真实Firebase连接，thunk逻辑可正常验证。后续测试登录、登出等分支逻辑时，直接给mock的providers方法自定义返回值即可，无需依赖真实Firebase服务。

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