Vite项目Jest环境中global.fetch未定义的问题求助

解决Vite迁移后Jest测试的fetch问题及挂起问题 #

一、并行测试时fetch未定义的修复

Jest 28+默认采用node测试环境，而Node环境原生不提供fetch。你之前通过globals配置的方式在并行测试中失效，是因为Jest并行运行时会为每个测试文件创建独立的隔离环境，全局变量无法跨环境继承。

正确的处理方式是指定测试环境为jsdom（jsdom 16.5+版本已内置fetch），并配合setupFilesAfterEnv而非setupFiles来引入polyfill：

// jest.config.js
module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  // 其他Vite相关配置，比如转译规则
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
};

在setupTests.js中引入polyfill：

import 'whatwg-fetch';

二、测试挂起的排查与解决

测试挂起通常源于未处理的Promise或未关闭的资源连接，结合Apollo Client的场景，可从以下几点修复：

1. 规范jest-fetch-mock的mock清理
   在setupTests.js中添加测试前的mock重置，避免跨测试的mock污染：

   import fetchMock from 'jest-fetch-mock';
   
   fetchMock.enableMocks();
   beforeEach(() => {
     fetchMock.resetMocks();
   });
   

2. 使用Apollo官方Mock工具隔离真实请求
   不要在测试中使用真实的Apollo Client实例，改用MockedProvider包裹组件，确保所有GraphQL请求都被mock：

   import { MockedProvider } from '@apollo/client/testing';
   
   test('组件渲染测试', () => {
     render(
       <MockedProvider mocks={[你的查询Mock]}>
         <目标组件 />
       </MockedProvider>
     );
     // 测试逻辑
   });
   

3. 开启句柄检测定位问题
   在jest.config.js中添加detectOpenHandles配置，让Jest自动检测未关闭的资源连接，帮助定位挂起因：

   module.exports = {
     detectOpenHandles: true,
     // 其他配置
   };
   

综合配置示例

最终的jest.config.js：

module.exports = {
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
  detectOpenHandles: true,
  transform: {
    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
  },
};

setupTests.js：

import 'whatwg-fetch';
import fetchMock from 'jest-fetch-mock';

fetchMock.enableMocks();
beforeEach(() => {
  fetchMock.resetMocks();
});

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