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

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

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

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

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

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        gt         Setup   const mockedOpen   jest fn         Without making a copy  you will have a circular dependency problem   const originalWindow        window      const windowSpy   jest spyOn global   quot window quot    quot get quot      windowSpy mockImplementation      gt            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        gt         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        gt      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

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

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

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

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

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

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

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

Examples related to javascript

Examples related to mocking

Examples related to jestjs