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"
  }
}

No longer works in jsdom 14

TypeError: Cannot redefine property: reload

I found a workaround for newer versions in the comments here:

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

Thanks for sharing your workaround for jsdom >=14 @joshjg

I've updated the gist and blog post

(Chrome 77 / Electron 61) Now Cannot delete property 'location' of [object Window] 😞

Working for Class Components, but not working for modules :(

Working in storybooks. Thanks a lot!

Thanks for this!

Thank you 👍

Thank you as well, updated a few packages and reload started throwing a TypeError as described above. Rewired using this gist. Works like a charm 👍

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() }

Thank you for this! 👍

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.

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 should be able to do

        const reloadSpy = jest.fn();

        Object.defineProperty(window, "location", {
            value: { reload: reloadSpy },
        });

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.

Worked for me. (context: Next.js, strict option is disabled by default)

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 should be able to do

        const reloadSpy = jest.fn();

        Object.defineProperty(window, "location", {
            value: { reload: reloadSpy },
        });

Unfortunately, this returns an error:

TypeError: Cannot assign to read only property 'location' of object '#<Window>'

Thanks!
Worked with createObjectURL and revokeObjectURL

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() };

Worked perfectly. Congrats!

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 🙏