How to mock `window.location.reload` in Jest and jsdom: https://remarkablemark.org/blog/2018/11/17/mock-window-location/

README.md

Links:

• Blog post
• Repl.it

jest-mock-window-location-reload.test.js

it('mocks window.location.reload', () => {
  const { location } = window;
  delete window.location;
  window.location = { reload: jest.fn() };

  expect(window.location.reload).not.toHaveBeenCalled();
  window.location.reload();
  expect(window.location.reload).toHaveBeenCalled();
  window.location = location;
});

package.json

{
  "scripts": {
    "test": "jest"
  },
  "dependencies": {
    "jest": "latest"
  }
}

Thanks, this whole thread was a lifesaver. :)

I tried this, but I always get the expect to pass even though when the window.location.reload is not called at all, or when expecting toHaveBeenCalledTimes(2)

Has anyone tried to make the test fail?

Thank you! The workaround joshjg provided worked! 🥇

Thank you! @laurenbarker This worked for me! :D

How is it this is working when the property is already deleted? (I'm using with TypeScript.)

delete window.location
window.location = { ...window.location, reload: jest.fn() }

With TypeScript, the above gave me Type '{ reload: Mock<any, any>; }' is missing the following properties from type 'Location': ancestorOrigins, hash, host, hostname, and 8 more.
This worked for me:

delete window.location
window.location = { ...window.location, reload: jest.fn() }

With this I get the error: The operand of a 'delete' operator must be optional.
Any ideas on how to fix? I've disabled TS for that line for now for as a temp fix.

@inalbant, you can use a type assertion:

// Type assertion is used so TypeScript won't complain about
// deleting the required property, `window.location`.
delete (window as Partial<Window>).location;
window.location = { ...window.location, reload: jest.fn() };

Solved my issue, thank you so much 🙏

@laurenbarker You saved my life 🙏

@laurenbarker 🙏