javascriptreactjsjestjs

how to spy on window.location functions?


i need to cover my code with some unit tests and in one of then i have the following situation.

app.tsx

async someMethod(                   
  window.location.replace(sessionStorage.getItem(REDIRECT_VALUE));
)

and in my test file

window.location.replace = jest.fn();
somevariable.SomeMethod = jest.fn();
expect(window.location.replace).toHaveBeenCalledWith("some url to redirect on");

I'm getting the following error :

Cannot assign to read only property 'replace' of object '[object Location]'

I've tried other approachs like

backupState = window.location
delete window.location;
window.location = Object.assign(new URL("https://example.org"), {
     ancestorOrigins: "",
     replace: jest.fn()
  });
});

but i get different errors for each one of them, is there another way of doing it?

Previously I was using :

history.location.push(sessionStorage.getItem(REDIRECT_VALUE));

and

expect(auth.history.push).toHaveBeenCalled();

and in that case the test went OK.


Solution

  • One way to test it is:

    Create a mock function to location.replace:

    const replaceMock = jest.fn();
    

    And spyOn window, replacing location object and setting the replaceMock to replace.

    Complete test example:

    const replaceMock = jest.fn();
    
    describe('replace Location test ', () => {
    
      it('should call location with specific arg', () => {
        jest.spyOn(global as any, 'window', 'get').mockImplementationOnce(() => ({
          location: {
            replace: replaceMock,
          },
        }));
    
        someMethod();
    
        expect(replaceMock).toBeCalledWith('XX Value you want to test XX');
      });
    });