如何测试异步调用成功后渲染内容的React组件？

要测试这个异步加载的组件，核心是模拟getUserData函数返回预设的测试数据，验证组件的加载状态和最终内容渲染是否符合预期，下面是具体实现步骤：

1. 先做好模块抽离（推荐） #

如果getUserData是直接写在组件文件里的，建议把它抽离到单独的工具/API模块（比如./api.js），这样更方便测试时进行模拟。抽离后的模块示例：

// ./api.js
export async function getUserData() {
  // 原本的异步请求逻辑
}

组件里改成导入使用：

import { getUserData } from './api';

const MyScreen = () => {
  // ... 组件原有代码
}

2. 用Jest + React Testing Library实现测试 #

第一步：模拟getUserData函数 #

在测试文件顶部，用Jest的mock方法模拟API模块的导出，让getUserData返回我们预设的模拟数据：

jest.mock('./api', () => ({
  getUserData: jest.fn().mockResolvedValue({ email: 'a@b.c' })
}));

第二步：编写测试用例 #

验证组件初始显示加载状态，异步完成后显示正确的邮箱：

import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
import MyScreen from './MyScreen';
import { getUserData } from './api';

describe('MyScreen 组件测试', () => {
  it('加载阶段显示"Cargando..."，完成后渲染用户邮箱', async () => {
    // 渲染组件
    render(<MyScreen />);

    // 验证初始加载状态存在
    expect(screen.getByText('Cargando...')).toBeInTheDocument();

    // 等待加载状态消失，再验证邮箱显示
    await waitForElementToBeRemoved(() => screen.getByText('Cargando...'));
    expect(screen.getByText('a@b.c')).toBeInTheDocument();

    // 可选：验证getUserData被正确调用过一次
    expect(getUserData).toHaveBeenCalledTimes(1);
  });
});

特殊情况处理（未抽离函数的场景） #

如果暂时没法抽离getUserData，可以用jest.spyOn来模拟组件内部的函数，但这种方式耦合度更高，不推荐长期使用：

// 假设getUserData是组件所在模块的导出
import * as screenModule from './MyScreen';

// 在测试用例里模拟
const mockGetUserData = jest.spyOn(screenModule, 'getUserData').mockResolvedValue({ email: 'a@b.c' });

// 测试完成后恢复原函数
afterAll(() => {
  mockGetUserData.mockRestore();
});

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