如何修正React官方测试示例以适配React/Jest/Fetch异步测试场景

你遇到的问题本质是测试配置或断言逻辑错误导致的，不需要修改业务代码加global前缀，有以下几种更合理的实现方式：

方案1：全局mock fetch（无需改动业务代码） #

Jest运行的jsdom测试环境中，顶层fetch默认指向globalThis.fetch，只需要在组件渲染前正确覆盖global.fetch，结合异步断言等待流程完成即可：

// 测试文件代码示例
import { render, screen } from '@testing-library/react';
import User from './User';

// 每个测试用例执行前完成mock
beforeEach(() => {
  global.fetch = jest.fn(() =>
    Promise.resolve({
      json: () => Promise.resolve({ address: '123, Charming Avenue' }),
    })
  );
});

// 测试用例执行后清理mock避免污染
afterEach(() => {
  jest.clearAllMocks();
});

test('加载并展示用户地址', async () => {
  render(<User id="1" />);
  // 必须用异步断言等待useEffect内的异步流程执行完成、组件重渲染
  expect(await screen.findByText('123, Charming Avenue')).toBeInTheDocument();
});

注意：不要使用同步断言直接判断渲染内容，useEffect内的fetch请求是异步执行的，同步断言会在请求返回、状态更新前就执行，就会出现你遇到的始终匹配到loading...的报错。

方案2：模块级mock fetch（无全局污染） #

如果担心全局mock会影响其他测试用例，可以把fetch请求封装为独立模块，再对模块进行mock：

1. 封装请求模块src/api.js：

export const fetchUserData = (userId) => fetch(`/${userId}`).then(res => res.json());

2. 业务组件直接引入使用：

import { useState, useEffect } from 'react';
import { fetchUserData } from './api';

export default function User(props) {
  const [user, setUser] = useState(null);
  useEffect(() => {
    fetchUserData(props.id).then(setUser);
  }, [props.id]);

  if (!user) return <div>loading...</div>;
  return <div>{user.address}</div>;
}

3. 测试文件直接mock该模块即可，不需要操作全局对象：

import { render, screen } from '@testing-library/react';
import User from './User';

// mock整个请求模块
jest.mock('./api', () => ({
  fetchUserData: jest.fn(() => Promise.resolve({ address: '123, Charming Avenue' }))
}));

test('加载并展示用户地址', async () => {
  render(<User id="1" />);
  expect(await screen.findByText('123, Charming Avenue')).toBeInTheDocument();
});

方案3：使用工具库简化mock逻辑 #

如果项目中有大量fetch请求需要mock，可以使用jest-fetch-mock工具库，它会自动完成fetch的全局挂载和mock初始化，仅需要在Jest配置中引入一次，后续所有测试用例都可以直接调用fetch.mockResponse自定义返回值，不需要手动编写mock逻辑。

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