clarkbw/ jest-localstorage-mock
About the developer
281 Stars 
32 Forks 
BSD 3-Clause "New" or "Revised" License 
160 Commits 
7 Opened issues 
Description
A module to mock window.localStorage and window.sessionStorage in Jest
Services available
Contributors list
Use this module with Jest to run web tests that rely on
localstorageand / or
sessionStoragewhere you want a working localStorage API with mocked functions.
This module has no runtime dependencies so your project won't pull in additional module dependencies by using this.
Jest 24+
Note that with
[email protected]and above this project potentially duplicating functionality.
Install
This should only be installed as a development dependency (
devDependencies) as it is only designed for testing. The module is transpiled via babel to support the current active Node LTS version (6.11.3).
yarn:
yarn add --dev jest-localstorage-mock
npm:
npm i --save-dev jest-localstorage-mock
Setup
The simplest setup is to use the module system, you may also choose to create a setup file if needed.
Module
In your
package.jsonunder the
jestconfiguration section create a
setupFilesarray and add
jest-localstorage-mockto the array. Also, ensure you have not enabled
resetMocks.
{
"jest": {
"resetMocks": false,
"setupFiles": ["jest-localstorage-mock"]
}
}
If you already have a
setupFilesattribute you can also append
jest-localstorage-mockto the array.
{
"jest": {
"resetMocks": false,
"setupFiles": ["./__setups__/other.js", "jest-localstorage-mock"]
}
}
Setup file
Alternatively you can create a new setup file which then requires this module or add the
requirestatement to an existing setup file.
__setups__/localstorage.js
import 'jest-localstorage-mock';
// or
require('jest-localstorage-mock');
Add that file to your
setupFilesarray:
"jest": {
"setupFiles": [
"./__setups__/localstorage.js"
]
}
In create-react-app
For a create-react-app project you can replace the suggested mock with this at the beginning of the existing
src/setupTests.jsfile:
require('jest-localstorage-mock');
You must also override some of create-react-app's default jest configuration. You can do so in your
package.json:
{
"jest": {
"resetMocks": false
}
}
For more information, see #125.
In tests
By including this in your Jest setup you'll allow tests that expect a
localStorageand
sessionStorageobject to continue to run. The module can also allow you to use the mocks provided to check that your localStorage is being used as expected.
The
__STORE__attribute of
localStorage.__STORE__or
sessionStorage.__STORE__is made available for you to directly access the storage object if needed.
Test Examples
Check that your
localStoragecalls were made when they were supposed to.
test('should save to localStorage', () => {
const KEY = 'foo',
VALUE = 'bar';
dispatch(action.update(KEY, VALUE));
expect(localStorage.setItem).toHaveBeenLastCalledWith(KEY, VALUE);
expect(localStorage.__STORE__[KEY]).toBe(VALUE);
expect(Object.keys(localStorage.__STORE__).length).toBe(1);
});
Check that your
sessionStorageis empty, examples work with either
localStorageor
sessionStorage.
test('should have cleared the sessionStorage', () => {
dispatch(action.reset());
expect(sessionStorage.clear).toHaveBeenCalledTimes(1);
expect(sessionStorage.__STORE__).toEqual({}); // check store values
expect(sessionStorage.length).toBe(0); // or check length
});
Check that
localStoragecalls were not made when they shouldn't have been.
test('should not have saved to localStorage', () => {
const KEY = 'foo',
VALUE = 'bar';
dispatch(action.notIdempotent(KEY, VALUE));
expect(localStorage.setItem).not.toHaveBeenLastCalledWith(KEY, VALUE);
expect(Object.keys(localStorage.__STORE__).length).toBe(0);
});
Reset your
localStoragedata and mocks before each test to prevent leaking.
beforeEach(() => {
// to fully reset the state between tests, clear the storage
localStorage.clear();
// and reset all mocks
jest.clearAllMocks();
// clearAllMocks will impact your other mocks too, so you can optionally reset individual mocks instead:
localStorage.setItem.mockClear();
});
test('should not impact the next test', () => {
const KEY = 'foo',
VALUE = 'bar';
dispatch(action.update(KEY, VALUE));
expect(localStorage.setItem).toHaveBeenLastCalledWith(KEY, VALUE);
expect(localStorage.STORE[KEY]).toBe(VALUE);
expect(Object.keys(localStorage.STORE).length).toBe(1);
});
test('should not be impacted by the previous test', () => {
const KEY = 'baz',
VALUE = 'zab';
dispatch(action.update(KEY, VALUE));
expect(localStorage.setItem).toHaveBeenLastCalledWith(KEY, VALUE);
expect(localStorage.STORE[KEY]).toBe(VALUE);
expect(Object.keys(localStorage.STORE).length).toBe(1);
});
See the contributing guide for details on how you can contribute.