如何在React Testing Library中模拟浏览器刷新进行测试？

要模拟用户刷新页面的行为，核心是让组件完全卸载后重新初始化——rerender会保留原有组件实例的状态，达不到刷新效果。具体做法如下：

1. 关键思路 #

浏览器刷新后，React组件会被完全卸载，再重新挂载并初始化状态。对应到测试中，我们需要手动卸载当前组件实例，再重新渲染，以此模拟真实的刷新流程。

2. 修改测试代码 #

在render组件时保存返回的unmount方法，在需要模拟刷新的步骤先卸载组件，再重新渲染：

测试未保存时刷新数据丢失 #

test('未点击save时，刷新后输入内容清空', async () => {
  // 保存render返回的卸载方法
  const { unmount } = render(myUI());

  // 验证初始值为空
  expect(await screen.findByLabelText('Name')).toHaveValue('');

  // 输入测试内容
  await userEvent.type(screen.getByLabelText('Name'), 'Simon');
  expect(await screen.findByLabelText('Name')).toHaveValue('Simon');

  // 模拟页面刷新：先卸载组件，再重新渲染
  unmount();
  render(myUI());

  // 验证刷新后值为空
  expect(await screen.findByLabelText('Name')).toHaveValue('');
});

测试保存后刷新数据保留 #

test('点击save后，刷新页面内容仍存在', async () => {
  const { unmount } = render(myUI());

  // 输入内容并点击保存
  await userEvent.type(screen.getByLabelText('Name'), 'Simon');
  await userEvent.click(screen.getByText('save'));

  // 模拟刷新
  unmount();
  render(myUI());

  // 验证刷新后值仍为保存的内容
  expect(await screen.findByLabelText('Name')).toHaveValue('Simon');
});

3. 特殊场景处理 #

如果组件依赖全局状态管理（比如Redux、Context），刷新时还需要重置全局状态：

• Redux：每次测试前创建新的store实例，或调用重置action清空临时数据。
• Context：在测试中重新创建Context Provider，传入初始状态值。

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