React异步请求组件测试报错：无法找到Loading...元素的解决方法

问题根源 #

你遇到的报错有两个核心原因：

1. 文本匹配不精确：组件渲染的是Loading...（带三个英文句号），但测试代码里写的是screen.getByText('Loading')，少了末尾的三个点，导致Testing Library找不到对应元素。
2. 异步时机不对：你把fetch mock成了立即resolve的Promise，再加上await act(async () => render(<Fetch/>))，会让组件在渲染完成后直接跳转到数据加载完成的状态，Loading...元素几乎瞬间被替换，测试来不及捕捉到它。

修复后的测试代码 #

下面是调整后的完整测试用例，同时解决上述两个问题：

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

describe('Fetch Component Behavior', () => {
  beforeEach(() => {
    // 重置mock，避免测试用例间的状态污染
    jest.restoreAllMocks();
  });

  test('shows loading state first, then renders post titles', async () => {
    // Mock fetch，让它延迟resolve，确保能捕捉到Loading状态
    global.fetch = jest.fn().mockResolvedValue({
      json: () => Promise.resolve([{
        body: "est rerum tempore vitae↵sequi sint nihil reprehenderit dolor beatae ea dolores n↵qui aperiam non debitis possimus qui neque nisi nulla",
        id: 2,
        title: "qui est esse",
        userId: 1
      }]),
      status: 200
    });

    // 先渲染组件，不等待异步操作完成
    render(<Fetch/>);

    // 立即检查Loading状态（注意文本要和组件完全一致）
    expect(screen.getByText('Loading...')).toBeInTheDocument();

    // 等待fetch完成和组件更新，验证数据渲染
    await waitFor(() => {
      expect(screen.getByText('qui est esse')).toBeInTheDocument();
    });

    // 验证fetch的调用正确性
    expect(global.fetch).toHaveBeenCalledTimes(1);
    expect(global.fetch).toHaveBeenCalledWith('https://jsonplaceholder.typicode.com/posts');
  })
});

关键调整说明 #

• 修正文本匹配：将测试中的'Loading'改为'Loading...'，和组件渲染的文本完全对齐。
• 调整测试流程：先渲染组件，立即检查Loading状态，再用waitFor等待异步操作完成后验证数据渲染。这种方式符合用户实际看到的组件过渡逻辑。
• 用waitFor替代手动act：Testing Library的waitFor会自动处理内部的act逻辑，比手动调用act更简洁可靠，它会持续等待断言条件成立（直到超时）。
• 添加beforeEach重置mock：确保每个测试用例都在干净的mock环境中运行，避免不同测试间的干扰。

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