如何使用jestjs使用window.location.reload（）刷新页面以模拟真实行为？

Question

测试组件时，我不能强迫我的页面刷新。

我在React中有一个功能分量，当按下按钮时，请刷新页面。 这是我尝试尽可能简化的组件：

import { useLocation } from "react-router-dom";

const Component: React.FC<{ initialData?: string | undefined }> = ({ initialData = undefined }) => {
    const [someInternalData, setSomeInternalData] = useState(initialData);
    const [someBoolean, setSomeBoolean] = useState(false);

    const location:any = useLocation();

    useEffect(() => 
        {
            if(location.state == null){
                console.log("first implementation");
            } else {
                const someDataFromLocation:string|undefined = location.state.someData;
                if(someDataFromLocation) {
                    setInternalData(someDataFromLocation);
                    setSomeBoolean(true);
                }
            }
        }
        ,
        [setSomeInternalData]
    );

    function refreshPage() {
        window.history.replaceState({}, document.title);
        window.location.reload();
    }

    return(
        <div>
           <div>
              <button type="button" data-testid="refresh-button" onClick={refreshPage}>Refresh</button>
           </div>
           ...//Need of the variable someBoolean for decide of what to display after
        </div>
    );
}

export default Component;

为了测试此组件，我在某个时候进行了以下测试，我想调用window.location.reload（）方法：

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

import Component from './Component';

//Other mock function for axios and child component but I don't need it for the problematic part of my test, I don't think it's the problem.
jest.mock('axios');
const mockChildComponent = jest.fn();

describe('Component', () => {
  afterEach(cleanup);

  beforeEach(()=>{
    jest.clearAllMocks()
  })

  const reload = window.location.reload;

  beforeAll(() => {
    Object.defineProperty(window, 'location', {
      value: { reload: jest.fn() }
    });
  });

  afterAll(() => {
    window.location.reload = reload;
  });

  test('it can be clicked', async () => {
    jest.spyOn(window.location, 'reload');

    render(<Router>
            <Sessions />
          </Router>,);

    //I then test the different functionality of my component which works very well until I need to call window.location.reload in my component

    fireEvent.click(screen.getByTestId(/refresh-button/i));

    await waitFor(() => {
      expect(window.location.reload).toHaveBeenCalledTimes(1); //OK but it's normal that it works because I mocked it

      //Expect some element to be visible on the page after I refresh but fail because window.location.state didn't work and I still have my old page
      expect(screen.queryByTestId(/some-test-id/i)).toBeInTheDocument();

      //Expect some other element to not be visible on the page after I refresh but fail because window.location.state didn't work and I still have my old page
      expect(screen.queryByTestId(/some-other-test-id/i)).toBeNull();
    });
  });
});

正如我尝试在评论中解释的那样，在测试了效果很好的组件的不同功能之后，我然后测试“刷新”按钮。

一旦我进入将使用window.location.reload（）的测试部分，该测试可以继续，但页面未重新加载，数据保持与在开始时相同测试并且不是重置为0。

您知道如何在模拟的window.location.reload（）中强制页面刷新吗？

如果您花时间帮助我，请提前感谢您