Jest单元测试如何模拟window.location.reload()真实刷新行为

Jest 搭配 JSDOM 的前端测试环境本身不支持真实浏览器的页面刷新能力。你当前对window.location.reload的mock只是将其替换为无逻辑的jest桩函数，调用后不会重置React组件树、不会清空组件内部state、不会重新初始化路由状态，自然无法得到真实刷新后的页面表现。
不要尝试在mock中实现真实刷新逻辑：JSDOM环境下如果真的触发reload行为，会直接中断测试进程，不具备可操作性。单测的核心是验证逻辑行为，不需要完整模拟浏览器的所有原生能力。

• 拆分验证逻辑，分两步覆盖刷新场景：
  1. 验证点击按钮后确实触发了刷新相关的浏览器API调用
  2. 单独验证页面初始加载（等价于刷新后重新挂载）时的渲染表现，不需要通过触发reload来模拟
• 修正后的测试代码参考：

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { render, screen, fireEvent, cleanup } from '@testing-library/react';
import Component from './Component';

jest.mock('axios');

describe('Component', () => {
  const originalReplaceState = window.history.replaceState;
  const originalReload = window.location.reload;

  afterEach(() => {
    cleanup();
    jest.clearAllMocks();
  });

  beforeAll(() => {
    // mock刷新相关API
    Object.defineProperty(window, 'location', {
      value: { reload: jest.fn() },
      writable: true
    });
    window.history.replaceState = jest.fn();
  });

  afterAll(() => {
    // 恢复原生API
    window.location.reload = originalReload;
    window.history.replaceState = originalReplaceState;
  });

  // 封装统一渲染方法，支持传入自定义路由状态
  const renderComponent = (locationState = null) => {
    if (locationState) {
      // 模拟路由带state的场景
      window.history.replaceState(locationState, '');
    }
    return render(
      <Router>
        <Component />
      </Router>
    );
  };

  test('refresh button triggers reload and page renders correctly after refresh', async () => {
    // 首次渲染，模拟用户进入页面操作后的状态
    const { unmount } = renderComponent();

    // 点击刷新按钮
    fireEvent.click(screen.getByTestId(/refresh-button/i));

    // 第一步验证：刷新相关API被正确调用
    expect(window.history.replaceState).toHaveBeenCalledWith({}, document.title);
    expect(window.location.reload).toHaveBeenCalledTimes(1);

    // 模拟真实刷新效果：卸载旧组件树，清空所有state后重新挂载（和浏览器刷新后React重新初始化的行为完全一致）
    unmount();
    // 如果你的刷新逻辑会在location上携带state，在这里传入对应state即可，例如 { someData: 'xxx' }
    renderComponent();

    // 第二步验证：刷新后的页面渲染符合预期
    expect(screen.getByTestId(/some-test-id/i)).toBeInTheDocument();
    expect(screen.queryByTestId(/some-other-test-id/i)).toBeNull();
  });
});

• 额外代码修正建议：
  你组件中的useEffect依赖数组不全，effect内用到了location、setSomeBoolean，但依赖只写了setSomeInternalData，容易触发闭包陷阱导致状态更新异常，建议将依赖数组修正为[location, setSomeInternalData, setSomeBoolean]。

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