Next.js+Firebase项目Jest测试报错：Unexpected token 'export'

问题描述 #

运行Jest测试时出现以下语法错误，错误指向@firebase/auth的导出语句：

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from '@firebase/auth';
                                                                                      ^^^^^^
SyntaxError: Unexpected token 'export'

测试文件代码 #

import { render, screen } from "@testing-library/react";
import Navbar from "components/Navbar";

describe("Navbar", () => {
  it("renders a navbar", () => {
    render(<Navbar />);
    const navbar = screen.getByRole("navigation", {});

    expect(navbar).toBeInTheDocument();
  });
});

当前jest.config.js配置 #

// jest.config.js
const nextJest = require("next/jest");

const createJestConfig = nextJest({
  // 提供Next.js项目路径，用于在测试环境加载next.config.js和.env文件
  dir: "./",
});

// 自定义Jest配置
/** @type {import('jest').Config} */
const customJestConfig = {
  // 可添加测试前的初始化配置
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // 若使用TypeScript且baseUrl设为根目录，需配置此项以支持路径别名
  moduleDirectories: ["node_modules", "<rootDir>/"],
  testEnvironment: "jest-environment-jsdom",
  transformIgnorePatterns: ["/node_modules/(?!internmap|delaunator|robust-predicates)"],
};

// 异步导出配置以确保next/jest能正确加载Next.js配置
module.exports = createJestConfig(customJestConfig);

解决方案 #

问题根源是Jest默认不转译node_modules中的ES模块，而@firebase/auth等Firebase相关包使用了未转译的ES语法，导致测试解析失败。

修改jest.config.js中的transformIgnorePatterns，将Firebase相关包加入转译白名单：

const customJestConfig = {
  // 保留原有其他配置
  moduleDirectories: ["node_modules", "<rootDir>/"],
  testEnvironment: "jest-environment-jsdom",
  // 添加@firebase和firebase到白名单
  transformIgnorePatterns: ["/node_modules/(?!internmap|delaunator|robust-predicates|@firebase|firebase)"],
};

补充说明 #

• (?!...)是正则负向预查，代表除了括号内列出的包，其余node_modules内容跳过转译。加入@firebase和firebase后，Jest会处理它们的ES模块语法，解决导出语法错误。
• 若问题仍存在，可检查：
  1. 是否安装了babel-jest、@babel/preset-env和@babel/preset-react（Next.js项目通常已内置，缺失则手动安装）
  2. Navbar组件是否直接/间接导入了Firebase模块，确保转译配置覆盖所有相关依赖

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