测试NextJS应用时遇ReferenceError: TextEncoder is not defined问题求助

问题背景 #

测试Next.js应用时触发ReferenceError: TextEncoder is not defined错误，错误栈指向whatwg-url依赖（该依赖被MongoDB相关包调用）。尝试在配置或测试文件顶部导入TextEncoder未解决问题。

解决方案 #

方法1：全局注入TextEncoder/TextDecoder（推荐） #

通过Jest的setupFilesAfterEnv配置，在测试环境初始化后全局挂载Node.js的TextEncoder和TextDecoder：

1. 修改Jest配置文件：

const nextJest = require('next/jest')
const createJestConfig = nextJest({
  dir: './',
})
const customJestConfig = {
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
  // 添加setup文件路径
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
}
module.exports = createJestConfig(customJestConfig)

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

const { TextEncoder, TextDecoder } = require('node:util');

global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;

方法2：直接在测试文件中注入（临时方案） #

如果不想全局配置，可以在测试文件最顶部添加注入代码：

import { TextEncoder, TextDecoder } from 'node:util';
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;

// 原测试代码
import Home from '../pages/index'
import '@testing-library/jest-dom'
import { fireEvent, render, screen } from '@testing-library/react'

describe('Home Page', () => {
  it('renders home component', () => {
    render(<Home />)
    expect(screen.getByTestId('home-page')).toBeInTheDocument()
  })
})

原因分析 #

TextEncoder是浏览器和Node.js都支持的API，但Jest使用的jest-environment-jsdom环境中，并未全局挂载该API。而MongoDB相关依赖（如whatwg-url）会在全局作用域查找TextEncoder，导致找不到时抛出错误。通过将Node.js内置的TextEncoder挂载到global对象，即可让依赖正常调用该API。

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