Category: JavaScript Answers

Sometimes, we want to fix "ReferenceError: document is not defined" error when trying to test a create-react-app project with Jest.

In this article, we’ll look at how to fix "ReferenceError: document is not defined" error when trying to test a create-react-app project with Jest.

How to fix "ReferenceError: document is not defined" error when trying to test a create-react-app project with Jest?

To fix "ReferenceError: document is not defined" error when trying to test a create-react-app project with Jest, we can call the shallow function to shallow mount our component for testing.

For instance, we write

import {
  shallow
} from 'enzyme';

it('renders without crashing', () => {
  shallow(< App / >);
});

to shallow mount the App component with shallow with Enzyme.

Conclusion

To fix "ReferenceError: document is not defined" error when trying to test a create-react-app project with Jest, we can call the shallow function to shallow mount our component for testing.

Sometimes, we want to test components using Date objects produce different snapshots in different timezones with Jest.

In this article, we’ll look at how to test components using Date objects produce different snapshots in different timezones with Jest.

How to test components using Date objects produce different snapshots in different timezones with Jest?

To test components using Date objects produce different snapshots in different timezones with Jest, we can use the timezone-mock package.

To install it, we run npm i timezone-mock.

Then we write

import timezoneMock from 'timezone-mock';

describe('when in Pacific timezone', () => {
  beforeAll(() => {
    timezoneMock.register('US/Pacific');
  });

  afterAll(() => {
    timezoneMock.unregister();
  });

  // ...
})

to call timezoneMock.register with the time zone we want to run our tests in.

And then we call timezoneMock.unregister to restore the test environment to its original time zone.

Conclusion

To test components using Date objects produce different snapshots in different timezones with Jest, we can use the timezone-mock package.

Sometimes, we want to mock the same function twice with different arguments with Jest.

In this article, we’ll look at how to mock the same function twice with different arguments with Jest.

How to mock the same function twice with different arguments with Jest?

To mock the same function twice with different arguments with Jest, we can call mockReturnValueOnce.

For instance, we write:

myMock
  .mockReturnValueOnce(100)
  .mockReturnValueOnce('x')
  .mockReturnValue(true);

to call mockReturnValueOnce on the mocked function myMock to return the values we want.

If we just want to check the argument that a mocked function is called with, we use

expect(mock).toHaveBeenNthCalledWith(1, 'foo');

to check the argument at position 1 is called with 'foo with toHaveBeenNthCalledWith.

Conclusion

To mock the same function twice with different arguments with Jest, we can call mockReturnValueOnce.

Sometimes, we want to mock an exported const in Jest.

In this article, we’ll look at how to mock an exported const in Jest.

How to mock an exported const in Jest?

To mock an exported const in Jest, we can use the jest.mock method.

For instance, we write:

const mockTrue = {
  ENABLED: true
};
const mockFalse = {
  ENABLED: false
};

describe('allowThrough', () => {
  beforeEach(() => {
    jest.resetModules();
  });

  test('success', () => {
    jest.mock('./constants', () => mockTrue)
    const {
      ENABLED
    } = require('./constants');
    const {
      allowThrough
    } = require('./allowThrough');

    expect(ENABLED).toBe(true);
    expect(allowThrough({
      value: 1
    })).toBe(true);
  });

  test('fail, ENABLED === false', () => {
    jest.mock('./constants', () => mockFalse)
    const {
      ENABLED
    } = require('./constants');
    const {
      allowThrough
    } = require('./allowThrough');

    expect(ENABLED).toBe(false);
    expect(allowThrough({
      value: 1
    })).toBe(false);
  });
});

to mock the ./constants with a function that returns the mocked exports.

Then can use the require the ./constants with require and get the ENABLED exported member.

Jest will use the mocked version of that for the test since we called jest.mock to mock it.

We use expect to check that the mocked ENABLED value it what we expect.

Conclusion

To mock an exported const in Jest, we can use the jest.mock method.