Next.js项目用Jest测试Firebase时出现fetch is not defined错误

问题根源 #

你的测试运行在Node.js环境中，而Node.js默认没有全局的fetch API。Firebase Functions模块初始化时依赖了fetch，导致测试启动时触发未定义错误。单纯安装node-fetch或whatwg-fetch但未正确配置全局挂载时机，就会出现你遇到的情况。

可行解决方案 #

方案1：使用Next.js官方Jest配置（推荐） #

Next.js自带适配的Jest配置，能自动处理fetch等浏览器API的环境兼容：

1. 安装依赖：

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

2. 项目根目录创建jest.config.js：

const nextJest = require('next/jest')

const createJestConfig = nextJest({ dir: './' })

const customJestConfig = {
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(customJestConfig)

该配置会自动在测试环境注入fetch，无需额外手动配置。

方案2：手动配置全局fetch并确保加载时机 #

如果坚持自定义Jest配置，需保证Firebase模块加载前完成fetch的全局挂载：

1. 安装node-fetch：

npm install --save-dev node-fetch

2. 创建jest.setup.js文件：

import fetch from 'node-fetch'
global.fetch = fetch

3. 在jest.config.js中指定前置加载文件：

module.exports = {
  // 其他已有配置...
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jsdom',
}

setupFilesAfterEnv会在每个测试文件执行前加载，确保Firebase初始化时fetch已存在。

方案3：用jest-fetch-mock模拟fetch #

如果测试不需要真实网络请求，用mock库更高效：

1. 安装依赖：

npm install --save-dev jest-fetch-mock

2. 在jest.setup.js中启用mock：

import fetchMock from 'jest-fetch-mock'
fetchMock.enableMocks()

此方式既解决fetch未定义问题，还能拦截所有请求进行断言。

额外注意 #

测试时需确保Firebase配置的环境变量正确加载，可在jest.config.js中添加：

module.exports = {
  // 其他配置...
  setupFiles: ['<rootDir>/load-env.js'],
}

然后创建load-env.js加载环境变量：

require('dotenv').config({ path: '.env.local' })

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