Category: JavaScript

Sometimes, we want to mock the JavaScript window object using Jest.

In this article, we’ll look at how to mock the JavaScript window object using Jest.

How to mock the JavaScript window object using Jest?

To mock the JavaScript window object using Jest, we can use the jest.spyOn method.

For instance, we write

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

to call jest.spyOn to mock the get global function in the beforeEach callback.

In the afterEach callback, we call windowSpy.mockRestore to restore window to its original state.

And then we call windowSpy.mockImplementation to mock it window.get with a function that returns location.origin.

And then we check that window.location.origin is "https://example.com".

This test should pass because of the mock.

Conclusion

To mock the JavaScript window object using Jest, we can use the jest.spyOn method.

Sometimes, we want to test for object keys and values with Jest.

In this article, we’ll look at how to test for object keys and values with Jest.

How to test for object keys and values with Jest?

To test for object keys and values with Jest, we can use the toMatchObject method.

For instance, we write:

const expected = {
  name: 'foo'
}
const actual = {
  name: 'foo',
  type: 'bar'
}
expect(actual).toMatchObject(expected)

to check if the expected.name property matches the actual.name property.

The type property is ignored in the test since type isn’t in actual.

Conclusion

To test for object keys and values with Jest, we can use the toMatchObject method.

To mock local storage in Jest tests, we can create our own mock local storage methods.

For instance, we write

const localStorageMock = (() => {
  let store = {};
  return {
    getItem(key) {
      return store[key];
    },
    setItem(key, value) {
      store[key] = value.toString();
    },
    clear() {
      store = {};
    },
    removeItem(key) {
      delete store[key];
    }
  };
})();
Object.defineProperty(window, 'localStorage', {
  value: localStorageMock
});

to create the localStorageMock object by creating an IIFE that returns an object that manipulates the store object.

It has getItem to return store[key].

setItem sets store[key] to value converted to a string.

clear sets store to an empty object.

And removeItem removes the store property with the given key with delete.

And then we attach our mocked local storage object to window with Object.defineProperty.

Sometimes, we want to clear the Jest cache.

In this article, we’ll look at how to clear the Jest cache.

How to clear the Jest cache?

To clear the Jest cache, we can run jest with the --clearCache option.

We run

jest --clearCache

to clear the Jest cache.

Or we can put it in a script in package.json with

{
  //  ...
  "scripts:" {
    "clearJest": "jest --clearCache"
  }
  // ...
}

and run npm run clearJest

Conclusion

To clear the Jest cache, we can run jest with the --clearCache option.

Sometimes, we want to get the code coverage report using Jest.

In this article, we’ll look at how to get the code coverage report using Jest.

How to get the code coverage report using Jest?

To get the code coverage report using Jest, we run jest with the coverage option.

For instance, we run

npx jest --coverage

to run Jests tests and generate a code coverage report after that.

Conclusion

To get the code coverage report using Jest, we run jest with the coverage option.