Reactjs&Jest, Testing action that also changes localStorage

Question

in my react + redux app I have an action that besides returning type and payload also changes localStorage like:

export const cancel = () => {
  localStorage.removeItem("MyAppData");
  return { type: types.USER_CANCEL};
};

my test looks like:

test("user cancels", () => {
  const action = actions.cancel();
  expect(action).toEqual({
    type: types.USER_CANCEL
  });
});

writing no test for local storage I get

  ● user cancels

    ReferenceError: localStorage is not defined

      33 |
      34 | export const cancel = () => {
    > 35 |   localStorage.removeItem("MyAppData");
         |   ^
      36 |   return { type: types.USER_CANCEL};
      37 | };
      38 |

      at Object.localStorage [as cancel] (src/actions/AllActions.js:35:3)
      at Object.cancel (__test__/actions/AllActions.test.js:56:26)

Therefore I made a mock for local storage

const mockStorage = {};
const localStorage = {
  setItem: (key, val) => Object.assign(mockStorage, { [key]: val }),
  getItem: key => mockStorage[key],
  removeItem: key => {delete mockStorage[key];console.log("Deleted: ", key);},
  clear: () => mockStorage
};
export default localStorage;

either importing this mock or using localStorage API, I still get same error

I got confused in how should I test that when I call cancel() also localStorge.removeItem is also called or the key and value is removed?

Answer 1

For some reason, there's no window.localStorage object inside Jest's test env. I'd recommend you to assign your mock to the window object. You can do it inside beforeAll method in your test file or globally for all your tests as described here.

After that, your code and tests will use it as native localStorage:

test("user cancels", () => {
  localStorage.setItem("MyAppData", "some_data");

  const action = actions.cancel();
  expect(action).toEqual({
    type: types.USER_CANCEL
  });

  expect(localStorage.getItem("MyAppData")).toBeNull();
});

Answer 2

If you're mocking localStorage, mock all its methods such as removeItem in order to see if it is invoked, you can use console.log in its mocked method.

Inside jest.config.js

Add

  setupFiles: [
    './jest.globals.js'
  ],

jest.globals.js

const mockStorage = {};
const localStorage = {
  setItem: (key, val) => Object.assign(mockStorage, {[key]: val}),
  getItem: key => mockStorage[key],
  removeItem: key => { delete mockStorage[key]; console.log('Deleted: ' + key); },
  clear: () => mockStorage,
};
global.localStorage = localStorage;

Now localStorage will be available globally throughout your tests.

To test:

test("user cancels", () => {
     const action = actions.cancel();
      expect(action).toEqual({
        type: types.USER_CANCEL
      });

      expect(localStorage.getItem("MyAppData")).toBeNull();
});

Edit:

As a final solution update your jest.config.js to use testEnvironment: "jsdom" this would use the localStorage of jsdom, you no longer will need to mock it.

Answer 3

Thanks to @Ayushya and @Oleksandr Kovpashko. I just found out if the app is created by CRA the whole approach is much more simpler. so uninstalled all packages and revert back to CRA defaults. and to the best of my knowledge, only one answer was mentioning that. Also I was searching more at jest docs where the answer was in CRA docs

so create src/setupTests.js

const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  removeItem: jest.fn(),
  clear: jest.fn()
};
global.localStorage = localStorageMock;

by default the test script of CRA is

 "test": "react-scripts test --env=jsdom",

that can be changed to node