Need help with jest-localstorage-mock?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

clarkbw
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

!
?

Need anything else?

Contributors list

# 38,493
Firefox
React
TypeScr...
Chrome
74 commits
# 198
nextjs
postman...
graphql...
angular...
28 commits
# 160,158
HTML
CSS
Shell
jest-te...
5 commits
# 80,734
Sass
dark-sy...
viml
Neovim
1 commit
# 209,479
TypeScr...
HTML
jest-te...
React
1 commit
# 73,339
Firefox
HTML
TypeScr...
Express
1 commit
# 197,526
React
iOS
React N...
HTML
1 commit
# 181,673
ESLint
lambda
GraphQL
serverl...
1 commit

Use this module with Jest to run web tests that rely on

localstorage
and / or
sessionStorage
where 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.

npm npm Codecov Greenkeeper badge Twitter

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.json
under the
jest
configuration section create a
setupFiles
array and add
jest-localstorage-mock
to the array. Also, ensure you have not enabled
resetMocks
.
{
  "jest": {
    "resetMocks": false,
    "setupFiles": ["jest-localstorage-mock"]
  }
}

If you already have a

setupFiles
attribute you can also append
jest-localstorage-mock
to 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

require
statement to an existing setup file.

__setups__/localstorage.js
import 'jest-localstorage-mock';
// or
require('jest-localstorage-mock');

Add that file to your

setupFiles
array:
"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.js
file:
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

localStorage
and
sessionStorage
object 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

localStorage
calls 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

sessionStorage
is empty, examples work with either
localStorage
or
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

localStorage
calls 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

localStorage
data 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.