如何使用React Testing Library测试条件渲染的文件上传预览元素

错误原因梳理 #

• 错误使用rerender方法：RTL的rerender用于给已挂载组件传入新props重新渲染，你直接传入全新的<Home />会重置组件所有内部状态，之前触发文件上传后设置的imageUrl会被清空，自然无法渲染预览元素。
• URL.createObjectURL的mock没有返回值：你只创建了空的mock函数，没有返回模拟的临时链接，导致setImageUrl传入的值为undefined，imageUrl && <img />的渲染条件不成立。
• 同步断言无法适配状态更新节奏：React状态更新可能是批量异步处理的，直接同步调用getByTestId可能还没等到DOM更新完成。

正确测试代码 #

// 可选：全局清理mock，避免单测之间互相污染
afterEach(() => {
  jest.clearAllMocks();
});

test("上传图片后正确渲染预览图", async () => {
  render(<Home />);
  // mock createObjectURL时返回模拟的临时链接
  global.URL.createObjectURL = jest.fn(() => "mock-temp-image-url");
  const testFile = new File(["test-content"], "pug.png", { type: "image/png" });

  // 触发文件上传事件
  const input = screen.getByTestId("fileuploadtestid");
  fireEvent.change(input, { target: { files: [testFile] } });

  // 使用findByTestId等待DOM更新，自动处理异步状态
  const previewImg = await screen.findByTestId("prevtestid");
  expect(previewImg).toBeInTheDocument();
  // 可选扩展断言：验证url生成逻辑正常
  expect(global.URL.createObjectURL).toHaveBeenCalledWith(testFile);
  expect(previewImg).toHaveAttribute("src", "mock-temp-image-url");
});

额外说明 #

• 完全删除原测试中的rerender调用，组件内部状态更新会自动触发重渲染，不需要手动调用。
• 如果你的项目使用了Jest 28+版本，URL.createObjectURL已经有默认全局实现，可以根据需要决定是否保留mock。
• 不要在测试中直接操作container返回的DOM节点，优先使用RTL的screen系列查询方法，更符合用户视角的测试规范。

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