JSDom 11.12.0 - how to mock localStorage?

Question

Since the latest release of JSDom, I'm not able to mock localStorage anymore.

I've tried the following methods:

1. Object.defineProperty(window, 'localStorage', {value: LocalStorageMock})
2. window.localStorage = LocalStorageMock;
3. jest.spyOn(window.localStorage, 'setItem')

Any of those methods not worked for me, I get always the original localStorage.

Answer 1

setItemSpy = jest.spyOn(Storage.prototype, 'setItem'); works for me.

Saw this fix here: https://github.com/facebook/jest/issues/6858#issuecomment-413677180

Answer 2

I actually ran into this same issue when updating Jest, not sure if that's what happened to you but I found this fix here: https://github.com/facebook/jest/issues/6766

From OlivierB-OB:

As a temporary workaround you can install jsdom "11.11.0" (exact) as a dev-dependency in your package. jest-environment-jsdom should then use this version instead of the lastest "11.12.0" causing the behavior. Cheers!

After that I mocked localstorage in test setup and spying was back to normal.

And an implementation of localstorage mock: https://github.com/facebook/jest/issues/2098 lacks removeItem though, so you might need to add it.

Answer 3

You can use the dom-storage package available via npm:

const Storage = require('dom-storage');
global.localStorage = new Storage(null, { strict: true });
global.sessionStorage = new Storage(null, { strict: true });

We use the latest release of jsdom for our unit tests and the above method has worked great.