使用Jest与React Testing Library mock API请求时数据未渲染问题

问题原因 #

1. 你没有主动调用jest.mock()启用你写的__mocks__/api.js模拟文件，测试运行时调用的还是真实的api.get方法，没有拿到你预设的mock返回值，user状态一直是undefined。
2. 你当前的断言只校验了data-testid为user-info的元素存在，这个元素在组件首次渲染时就会生成，不需要等异步请求完成，所以测试直接通过，但你调用debug时异步请求还没完成（或者根本没成功返回数据），自然看不到用户名。

修复步骤 #

1. 启用mock文件：在Home.test.js顶部添加jest.mock语句，路径要匹配你项目中utils/api.js相对于Home.test.js的真实路径，示例如下：

// 示例路径，根据你的实际文件结构调整
jest.mock('../../utils/api')

Jest会自动读取对应路径下__mocks__文件夹里的模拟文件，替换真实的api模块。

2. 修改断言逻辑：等待异步数据渲染完成后再做校验，不要只校验元素是否存在，示例如下：

describe("Home component", () => {
  it("should return a user name", async () => {
    render(<MockHomeComponent />);
    // 等待目标文本渲染，会自动等待异步状态更新
    const userDivElement = await screen.findByText(/Welcome Jeff/);
    expect(userDivElement).toBeInTheDocument();
    // 可选：校验api调用参数是否正确
    const api = require('../../utils/api').default;
    expect(api.get).toHaveBeenCalledWith('/users/self');
    screen.debug();
  });

  afterAll(cleanup);
});

修改完成后运行测试，debug输出就会显示Welcome Jeff了。

内容的提问来源于stack exchange，提问作者The Dead Man