如何测试src从REST API动态获取的React图片组件

核心错误原因 #

• jest.mock调用位置错误：jest会自动将所有jest.mock调用提升到整个模块的最顶部执行，写在测试用例内部的mock不会生效，Person组件导入时拿到的仍然是原始的client实例，mock逻辑完全没有被应用。
• mock导出结构不匹配：如果你的./service/Client文件是默认导出client实例，你当前mock直接返回方法对象的写法和实际导出结构不一致，导致组件调用的依然是原始方法，没有走mock逻辑。
• 断言逻辑不合理：初始渲染时img的src是空值，提前用getByRole拿到的是初始状态的节点，waitFor内部需要实时读取节点的最新属性才能判断状态是否更新完成。

修正后的测试代码 #

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

// 模块顶部声明mock，匹配实际的导出结构，适配默认导出client实例的场景
jest.mock("./service/Client", () => {
  return {
    __esModule: true,
    default: {
      fetchRandomUser: jest.fn().mockResolvedValue({picture:{large: 'personImage'}})
    }
  };
});
// 导入mock后的client实例用于后续断言
import client from "./service/Client";

test('fetches image from random user API', async () => {
  render(<Person />);
  const image = screen.getByRole('img');
  // 等待src属性更新为预期值
  await waitFor(() => {
    expect(image.src).toContain('personImage');
  });
  expect(client.fetchRandomUser).toHaveBeenCalledTimes(1);
});

如果你是命名导出client实例，只需要调整mock返回的结构，把default换成你对应的导出变量名即可。

内容的提问来源于stack exchange，提问作者Lars Juel Jensen