How can I mock the JavaScript window object using Jest

Question

I need to test a function which opens a new tab in the browser openStatementsReport contactIds      window open  a url   contactIds        I would like to mock the window s open function so I can verify the correct URL is passed in to the open function  Using Jest  I don t know how to mock the window  I tried to set window open with a mock function but this way doesn t work  Below is the test case it  correct url is called        gt      window open   jest fn      statementService openStatementsReport 111     expect window open  toBeCalled         But it gives me the error expect jest fn     not  toBeCalled    jest fn   value must be a mock function or spy      Received        function   Function anonymous   What should I do to the test case

User · Answer

There are a couple of ways to mock globals in Jest:

Use the mockImplementation approach (the most Jest-like way), but it will work only for those variables which has some default implementation provided by jsdom. window.open is one of them:

test('it works', () => {
  // Setup
  const mockedOpen = jest.fn();
  // Without making a copy, you will have a circular dependency problem
  const originalWindow = { ...window };
  const windowSpy = jest.spyOn(global, "window", "get");
  windowSpy.mockImplementation(() => ({
    ...originalWindow, // In case you need other window properties to be in place
    open: mockedOpen
  }));

  // Tests
  statementService.openStatementsReport(111)
  expect(mockedOpen).toBeCalled();

  // Cleanup
  windowSpy.mockRestore();
});

Assign the value directly to the global property. It is the most straightforward, but it may trigger error messages for some window variables, e.g. window.href.

test('it works', () => {
  // Setup
  const mockedOpen = jest.fn();
  const originalOpen = window.open;
  window.open = mockedOpen;

  // Tests
  statementService.openStatementsReport(111)
  expect(mockedOpen).toBeCalled();

  // Cleanup
  window.open = originalOpen;
});

Don't use globals directly (requires a bit of refactoring)

Instead of using the global value directly, it might be cleaner to import it from another file, so mocking will became trivial with Jest.

File ./test.js

jest.mock('./fileWithGlobalValueExported.js');
import { windowOpen } from './fileWithGlobalValueExported.js';
import { statementService } from './testedFile.js';

// Tests
test('it works', () => {
  statementService.openStatementsReport(111)
  expect(windowOpen).toBeCalled();
});

File ./fileWithGlobalValueExported.js

export const windowOpen = window.open;

File ./testedFile.js

import { windowOpen } from './fileWithGlobalValueExported.js';
export const statementService = {
  openStatementsReport(contactIds) {
    windowOpen(`a_url_${contactIds}`);
  }
}

User · Answer

If it s similar to the window location problem at window location href can t be changed in tests   890  you could try  adjusted   delete global window open  global window   Object create window   global window open   jest fn

User · Answer

We can also define it using global in setupTests     setupTests js global open   jest fn     And call it using global in the actual test      yourtest test js it  correct url is called        gt        statementService openStatementsReport 111       expect global open  toBeCalled

User · Answer

Instead of window use global  it  correct url is called        gt      global open   jest fn      statementService openStatementsReport 111     expect global open  toBeCalled          you could also try   const open   jest fn   Object defineProperty window   open   open

User · Answer

In my component I need access to window location search  This is what I did in the Jest test  Object defineProperty global   quot window quot       value        location          search   quot test quot                 In case window properties must be different in different tests  we can put window mocking into a function  and make it writable in order to override for different tests  function mockWindow search  pathname      Object defineProperty global   quot window quot         value          location            search          pathname                    writable  true          And reset after each test  afterEach      gt      delete global window location

User · Answer

I found an easy way to do it  delete and replace  describe  Test case        gt      const   open     window     beforeAll      gt           Delete the existing     delete window open         Replace with the custom value     window open   jest fn           Works for  location  too  eg         window location     origin   http   localhost 3100              afterAll      gt           Restore original     window open   open           it  correct url is called        gt        statementService openStatementsReport 111       expect window open  toBeCalled       Happy happy  joy joy

User · Answer

You can try this   import   as  Window from  jsdom lib jsdom browser Window    window open   jest fn   mockImplementationOnce      gt        return new  Window   parsingMode   html           it  correct url is called        gt        statementService openStatementsReport 111       expect window open  toHaveBeenCalled

User · Answer

In your Jest configuration  add setupFilesAfterEnv    quot   setupTests js quot    create that file  and add the code you want to run before the tests     setupTests js window crypto                  Reference  setupFilesAfterEnv  array

User · Answer

can test it  describe  TableItem Components        gt        let open url    quot  quot      const   open     window      beforeAll      gt            delete window open          window open    url    gt    open url   url                afterAll      gt            window open   open              test  string type   async      gt            wrapper vm openNewTab  http   example com           expect open url  toBe  http   example com

User · Answer

I m directly assigning jest fn   to window open  window open   jest fn         code expect window open  toHaveBeenCalledTimes 1  expect window open  toHaveBeenCalledWith   new-tab     blank

User · Answer

The following method worked for me  This approach allowed me to test some code that should work both in the browser and in Node js  as it allowed me to set window to undefined  This was with Jest 24 8  I believe   let windowSpy   beforeEach      gt      windowSpy   jest spyOn window   quot window quot    quot get quot         afterEach      gt      windowSpy mockRestore         it  should return https   example com        gt      windowSpy mockImplementation      gt         location          origin   quot https   example com quot                  expect window location origin  toEqual  quot https   example com quot         it  should be undefined         gt      windowSpy mockImplementation      gt  undefined      expect window  toBeUndefined

[javascript] How can I mock the JavaScript window object using Jest?

File ./test.js

File ./fileWithGlobalValueExported.js

File ./testedFile.js

Examples related to javascript

Examples related to mocking

Examples related to jestjs