Mocking 只有一个带有 Jest 的“窗口”属性

Question

I have a React component that makes a call to window.location.href .

As part of my Jest test, I mock the value of window.location.href as follows:

const mockWindow = { location: { href: 'https://stackoverflow.com/questions' } };
jest.spyOn(window, 'window', 'get').mockImplementation(() => mockWindow);

const wrapper = mount(<MyComponent />);

However when I run it, I get the following error:

TypeError: Right-hand side of 'instanceof' is not an object

    > |   const wrapper = mount(<MyComponent />);
      |                   ^

This tells me there is an internal React issue when rendering/mounting the component. The issue is specifically caused by me mocking the window object. When I uncomment that line and re-run it, it doesn't not raise this error.

I'm guessing that React internally makes other calls to window.* and because I mocked the whole object, those calls made by React return undefined and the component does not render.

How do I mock only a single property of window while leaving other properties untouched?

Alternately, are there any other reasons this would error? Or are there other clever ways to get around this issue?

Answer 1

Instead of doing jest.spyOn(window, 'window'...) try using (global, 'window'...) like the following:

const originalWindow = { ...window };
const windowSpy = jest.spyOn(global, "window", "get");
windowSpy.mockImplementation(() => ({
  ...originalWindow,
  location: {
    ...originalWindow.location,
    href: "http://my.test/page",
    replace: mockedReplace,
  },
}));

And after remeber to clean it up:

windowSpy.mockRestore();

You can check out better following this example