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 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 window. I tried to set window.open with a mock function, but this way doesn't work. Below is the test case:

it('the correct URL is called', () => {
  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?

See also https://stackoverflow.com/questions/46274889/jest-test-fails-with-window-is-not-defined/50376346#comment133217121_50376346 — Michael Freidgeim, Feb 20 '23 at 04:21

score 205 · Answer 1 · edited Jan 29 '21 at 14:38

205

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(() => {
  windowSpy = jest.spyOn(window, "window", "get");
});

afterEach(() => {
  windowSpy.mockRestore();
});

it('should return https://example.com', () => {
  windowSpy.mockImplementation(() => ({
    location: {
      origin: "https://example.com"
    }
  }));

  expect(window.location.origin).toEqual("https://example.com");
});

it('should be undefined.', () => {
  windowSpy.mockImplementation(() => undefined);

  expect(window).toBeUndefined();
});

edited Jan 29 '21 at 14:38

Peter Mortensen

30,738
21
105
131

answered Jul 12 '19 at 02:46

tvsbrent

2,350
1
10
9

6

That's much better than `Object.defineProperty` since this allows not to affect other tests when mocking. – Sergey Apr 01 '20 at 16:18
5

This should be the accepted answer since it mocks/spies instead of changing the actual global property – user2490003 Dec 14 '20 at 03:23
2

I just used `x = jest.spyOn(window, 'open')` and `x.mockImplementation(() => {})`, fyi, but all i needed to mock was window.open. – temporary_user_name Sep 07 '21 at 19:31
@temporary_user_name I was looking for a way to mock window.open and you saved my day, thanks! – The Condor Mar 16 '22 at 15:28
I'm getting the `The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string. Consider using the "jsdom" test environment.` error. – cbdeveloper Aug 24 '22 at 12:54
3

Unfortunately not a compatible approach with typescript. – Brian C Dec 14 '22 at 20:38

score 127 · Answer 2 · edited Aug 04 '22 at 20:53

127

Instead of window, use global:

it('the correct URL is called', () => {
  global.open = jest.fn();
  statementService.openStatementsReport(111);
  expect(global.open).toBeCalled();
});

You could also try:

const open = jest.fn()
Object.defineProperty(window, 'open', open);

edited Aug 04 '22 at 20:53

Peter Mortensen

30,738
21
105
131

answered Jan 27 '17 at 07:19

Andreas Köberle

106,652
57
273
297

These approaches throw errors these days, but https://stackoverflow.com/a/56999581 still works. – marcw Apr 21 '23 at 07:06

score 34 · Answer 3 · edited Jan 29 '21 at 15:59

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

Sagar · Answer 4 · 2021-12-03T11:01:25.643

25

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')

edited Dec 03 '21 at 11:01

answered Sep 04 '20 at 07:22

Sagar

4,473
3
32
37

score 18 · Answer 5 · edited Jan 29 '21 at 15:56

In my component I need access to window.location.search. This is what I did in the Jest test:

Object.defineProperty(global, "window", {
  value: {
    location: {
      search: "test"
    }
  }
});

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, "window", {
    value: {
      location: {
        search,
        pathname
      }
    },
    writable: true
  });
}

And reset after each test:

afterEach(() => {
  delete global.window.location;
});

score 14 · Answer 6 · edited Aug 04 '22 at 21:13

14

We can also define it using global in setupTests:

// File 'setupTests.js'
global.open = jest.fn()

And call it using global in the actual test:

// File 'yourtest.test.js'
it('the correct URL is called', () => {
    statementService.openStatementsReport(111);
    expect(global.open).toBeCalled();
});

edited Aug 04 '22 at 21:13

Peter Mortensen

30,738
21
105
131

answered May 31 '18 at 05:36

Poh Zi How

1,489
3
16
38

score 9 · Answer 7 · answered Mar 13 '20 at 05:15

I found an easy way to do it: delete and replace

describe('Test case', () => {
  const { open } = window;

  beforeAll(() => {
    // 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(() => {
    // Restore original
    window.open = open;
  });

  it('correct url is called', () => {
    statementService.openStatementsReport(111);
    expect(window.open).toBeCalled(); // Happy happy, joy joy
  });
});

Chris Perry · Answer 8 · 2022-12-16T22:54:16.480

The `window` object in Jest is self-mocking

One of the things unaddressed in other answers is a comment by the OP:

Using Jest, I don't know how to mock the window.

The window object is already mocked and can be referenced out of the box.

From the documentation:

Jest ships with jsdom which simulates a DOM environment as if you were in the browser. This means that every DOM API that we call can be observed in the same way it would be observed in a browser!

Example:

describe('i am a window', () => {
    it('has a window object', () => {
      expect(window).toBeTruthy(); // test will pass
    });
});

score 5 · Answer 9 · answered Mar 01 '18 at 12:00

You can try this:

import * as _Window from "jsdom/lib/jsdom/browser/Window";

window.open = jest.fn().mockImplementationOnce(() => {
    return new _Window({ parsingMode: "html" });
});

it("correct url is called", () => {
    statementService.openStatementsReport(111);
    expect(window.open).toHaveBeenCalled();
});

score 5 · Answer 10 · edited Jan 29 '21 at 15:49

5

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

edited Jan 29 '21 at 15:49

Peter Mortensen

30,738
21
105
131

answered Aug 22 '19 at 15:01

serv-inc

35,772
9
166
188

score 4 · Answer 11 · edited Aug 04 '22 at 20:50

4

Try simply:

let windowOpenSpy: jest.SpyInstance;
beforeEach(() => {
    windowOpenSpy = jest.spyOn(window, 'open');
});

it('should open window with dashboard url', () => {
    expect(windowOpenSpy).toBeCalledWith('your URL', '_blank');
});

edited Aug 04 '22 at 20:50

Peter Mortensen

30,738
21
105
131

answered Aug 25 '21 at 08:03

Evgeniy Boytsov

214
2
8

An explanation would be in order. – Peter Mortensen Aug 04 '22 at 20:50
this is how I imagined the answer looking, and I can say this approach worked for me. – Harleyz Mar 13 '23 at 06:06

score 2 · Answer 12 · edited Jan 29 '21 at 14:35

2

In your Jest configuration, add setupFilesAfterEnv: ["./setupTests.js"], create that file, and add the code you want to run before the tests:

// setupTests.js
window.crypto = {
   .....
};

Reference: setupFilesAfterEnv [array]

edited Jan 29 '21 at 14:35

Peter Mortensen

30,738
21
105
131

answered May 08 '19 at 10:52

stefan

2,685
2
24
31

score 1 · Answer 13 · edited Aug 04 '22 at 20:51

1

You can test it:

describe('TableItem Components', () => {
    let open_url = ""
    const { open } = window;
    beforeAll(() => {
        delete window.open;
        window.open = (url) => { open_url = url };
    });
    afterAll(() => {
        window.open = open;
    });
    test('string type', async () => {
        wrapper.vm.openNewTab('http://example.com')
        expect(open_url).toBe('http://example.com')
    })
})

edited Aug 04 '22 at 20:51

Peter Mortensen

30,738
21
105
131

answered Jan 31 '21 at 06:03

MohammadReza Abbasi

490
2
13

An explanation would be in order. – Peter Mortensen Aug 04 '22 at 20:51

Alex Fallenstedt · Answer 14 · 2021-09-14T00:27:55.390

I have a utility function which allows me to mock any method on the window like so:

  function givenMockWindowMethods(methods: Partial<{ [key in keyof Window]: jest.Mock<any, any> }>): () => void {
    const mocks = Object.values(methods);

    Object.entries(methods).forEach(([key, value]) => {
      Object.defineProperty(window, key, { value });
    });

    return (): void => mocks.forEach((mock) => mock?.mockClear());
  }

So if I need to mock the open method (or anything really) on the window, I can do:

      const cleanupMocks = givenMockWindowMethods({ open: jest.fn() });
      // expect(...).toBe(...)

      //at the end of the test, clean it up
      cleanupMocks()

score 0 · Answer 15 · edited Sep 28 '21 at 20:04

0

const windowSpy = jest.spyOn(iFrame, "contentWindow", "get");
windowSpy.mockImplementation(() => ({
  location: {
    origin: "https://test.com",
    href: "href",
    hash: "hash"
  }
}));

edited Sep 28 '21 at 20:04

Tom

8,509
7
49
78

answered Sep 02 '21 at 15:56

Thuy

1,493
1
11
11

An explanation would be in order. – Peter Mortensen Aug 04 '22 at 20:50

score 0 · Answer 16 · edited Aug 04 '22 at 20:48

I tried a similar test, and it worked with me...

My code:

export const Blah = () => {
        const BLAH = 'https://www.google.com/'
        const handleBlah = () => {
            window.open(BLAH, '_blank')
        }

    return (
        <button onClick={handleBlah}> BLAHBLAH </button>
    )
}

My test using Jest:

it('should be able to render "BLAHBLAH " button ', () => {
    window.open = jest.fn();
    const BLAH = 'https://www.google.com/'
    const { getByText } = render(<Blah/>) // Get text by my page Blah
    const buttonGoToBlah = getByText('BLAHBLAH') // Get button by text
    fireEvent.click(buttonGoToBlah) // Simulate the click event

    expect(window.open).toHaveBeenCalledTimes(1) // Expect the window.open have to been called at least once.
    expect(window.open).toHaveBeenCalledWith(BLAH, '_blank'); // And the page should be the same called in my BLAH page
})

score 0 · Answer 17 · answered Jul 05 '23 at 10:31

Date: July 2023

Jest version: 28.1.3

This version spys on window.open (via global.open) then restores window.open after all tests are completed.

const realOpen = global.open; // store real window.open

describe('Given [thing you are testing]', () => {
  beforeAll(() => {
    jest.spyOn(global, 'open'); // create spy in beforeAll hook
  });

  afterAll(() => {
    global.open = realOpen; // after all the tests are completed restore window.open in afterAll hook
  });

  it('the correct URL is called', () => {
    jest.clearAllMocks(); // clear all mocks before running statementService.openStatementsReport
    statementService.openStatementsReport(111);
    expect(global.open).toBeCalled();
  });
});

How can I mock the JavaScript 'window' object using Jest?

17 Answers17

File ./test.js

File ./fileWithGlobalValueExported.js

File ./testedFile.js

The `window` object in Jest is self-mocking

Example:

Linked

Related

How can I mock the JavaScript 'window' object using Jest?

17 Answers17

File ./test.js

File ./fileWithGlobalValueExported.js

File ./testedFile.js

The window object in Jest is self-mocking

Example:

Linked

Related

The `window` object in Jest is self-mocking