CODEWITHSUNDEEP
javascriptreactjsjestjs
Daniel Billingham
Daniel Billingham

Reputation: 1411

mocking global.window in jest

I have a function, that runs on both node and in the browser, which I want to test with jest:

const myFn = () => {
  if(typeof window !== 'object'){
     return 1;
  }
  return 2;
}

How am I able to set the global window object to undefined, to test the node branch, and that 1 is returned.

e.g.

  test('myTest', ()=> {
      global.window = undefined;
      expect(myFn()).toEqual(1); // result: 2
  });

Ive tried the suggestions here with no success: Mocking globals in Jest

Upvotes: 16

Views: 14848

Answers (2)

Andrey Edounov
Andrey Edounov

Reputation: 31

With new version of jsdom you can do the following:

import { JSDOM } from 'jsdom';

let windowSpy: any;
beforeEach(() => {
  windowSpy = jest.spyOn(global as any, 'window', 'get');
});
afterEach(() => {
  windowSpy.mockRestore();
});

describe('', () => {
  it ('', () => {
    const { window } = new JSDOM();
    windowSpy.mockImplementation(() => window);
    // now you have `window` in test environment
  });
});

Upvotes: 3

nbkhope
nbkhope

Reputation: 7474

You can try using the @jest-environment docblock, available since v20.0.0, to change the environment for different tests. By default it uses jsdom, but you can change it to use node. Here is an excerpt from their documentation:

/**
 * @jest-environment jsdom
 */

test('use jsdom in this test file', () => {
  const element = document.createElement('div');
  expect(element).not.toBeNull();
});

Ref: https://facebook.github.io/jest/docs/en/configuration.html#testenvironment-string

Upvotes: 15

Related Questions