I keep getting "localStorage is not defined" in Jest tests which makes sense but what are my options? Hitting brick walls.
25 Answers
Great solution from @chiedo
However, we use ES2015 syntax and I felt it was a little cleaner to write it this way.
class LocalStorageMock { constructor() { this.store = {}; } clear() { this.store = {}; } getItem(key) { return this.store[key] || null; } setItem(key, value) { this.store[key] = String(value); } removeItem(key) { delete this.store[key]; }
}
global.localStorage = new LocalStorageMock;Figured it out with help from this:
Setup a file with the following contents:
var localStorageMock = (function() { var store = {}; return { getItem: function(key) { return store[key]; }, setItem: function(key, value) { store[key] = value.toString(); }, clear: function() { store = {}; }, removeItem: function(key) { delete store[key]; } };
})();
Object.defineProperty(window, 'localStorage', { value: localStorageMock });Then you add the following line to your package.json under your Jest configs
"setupTestFrameworkScriptFile":"PATH_TO_YOUR_FILE",
Currently (Oct '19) localStorage can not be mocked or spied on by jest as you usually would, and as outlined in the create-react-app docs. This is due to changes made in jsdom. You can read about it in the jest and jsdom issue trackers.
As a workaround, you can spy on the prototype instead:
// does not work:
jest.spyOn(localStorage, "setItem");
localStorage.setItem = jest.fn();
// either of these lines will work:
jest.spyOn(window.localStorage.__proto__, 'setItem');
window.localStorage.__proto__.setItem = jest.fn();
// assertions as usual:
expect(localStorage.setItem).toHaveBeenCalled();If using create-react-app, there is a simpler and straightforward solution explained in the documentation.
Create src/setupTests.js and put this in it :
const localStorageMock = { getItem: jest.fn(), setItem: jest.fn(), clear: jest.fn()
};
global.localStorage = localStorageMock;Tom Mertz contribution in a comment below :
You can then test that your localStorageMock's functions are used by doing something like
expect(localStorage.getItem).toBeCalledWith('token')
// or
expect(localStorage.getItem.mock.calls.length).toBe(1)inside of your tests if you wanted to make sure it was called. Check out
5Unfortunately, the solutions that I've found here didn't work for me.
So I was looking at Jest GitHub issues and found this thread
The most upvoted solutions were these ones:
const spy = jest.spyOn(Storage.prototype, 'setItem');
// or
Storage.prototype.getItem = jest.fn(() => 'bla');A better alternative which handles undefined values (it doesn't have toString()) and returns null if value doesn't exist. Tested this with react v15, redux and redux-auth-wrapper
class LocalStorageMock { constructor() { this.store = {} } clear() { this.store = {} } getItem(key) { return this.store[key] || null } setItem(key, value) { this.store[key] = value } removeItem(key) { delete this.store[key] }
}
global.localStorage = new LocalStorageMockor you just take a mock package like this:
it handles not only the storage functionality but also allows you test if the store was actually called.
If you are looking for a mock and not a stub, here is the solution I use:
export const localStorageMock = { getItem: jest.fn().mockImplementation(key => localStorageItems[key]), setItem: jest.fn().mockImplementation((key, value) => { localStorageItems[key] = value; }), clear: jest.fn().mockImplementation(() => { localStorageItems = {}; }), removeItem: jest.fn().mockImplementation((key) => { localStorageItems[key] = undefined; }),
};
export let localStorageItems = {}; // eslint-disable-line import/no-mutable-exportsI export the storage items for easy initialization. I.E. I can easily set it to an object
In the newer versions of Jest + JSDom it is not possible to set this, but the localstorage is already available and you can spy on it it like so:
const setItemSpy = jest.spyOn(Object.getPrototypeOf(window.localStorage), 'setItem');I found this solution from github
var localStorageMock = (function() { var store = {}; return { getItem: function(key) { return store[key] || null; }, setItem: function(key, value) { store[key] = value.toString(); }, clear: function() { store = {}; } };
})();
Object.defineProperty(window, 'localStorage', { value: localStorageMock
});You can insert this code in your setupTests and it should work fine.
I tested it in a project with typesctipt.
3I thought I would add another solution that worked very neatly for me in TypeScript w/ React:
I created a mockLocalStorage.ts
export const mockLocalStorage = () => { const setItemMock = jest.fn(); const getItemMock = jest.fn(); beforeEach(() => { Storage.prototype.setItem = setItemMock; Storage.prototype.getItem = getItemMock; }); afterEach(() => { setItemMock.mockRestore(); getItemMock.mockRestore(); }); return { setItemMock, getItemMock };
};My component:
export const Component = () => { const foo = localStorage.getItem('foo') return <h1>{foo}</h1>
}then in my tests I use it like so:
import React from 'react';
import { mockLocalStorage } from '../../test-utils';
import { Component } from './Component';
const { getItemMock, setItemMock } = mockLocalStorage();
it('fetches something from localStorage', () => { getItemMock.mockReturnValue('bar'); render(<Component />); expect(getItemMock).toHaveBeenCalled(); expect(getByText(/bar/i)).toBeInTheDocument()
});
it('expects something to be set in localStorage' () => { const value = "value" const key = "key" render(<Component />); expect(setItemMock).toHaveBeenCalledWith(key, value);
}You can use this approach, to avoid mocking.
Storage.prototype.getItem = jest.fn(() => expectedPayload);A bit more elegant solution using TypeScript and Jest.
interface Spies { [key: string]: jest.SpyInstance } describe('→ Local storage', () => { const spies: Spies = {} beforeEach(() => { ['setItem', 'getItem', 'clear'].forEach((fn: string) => { const mock = jest.fn(localStorage[fn]) spies[fn] = jest.spyOn(Storage.prototype, fn).mockImplementation(mock) }) }) afterEach(() => { Object.keys(spies).forEach((key: string) => spies[key].mockRestore()) }) test('→ setItem ...', async () => { localStorage.setItem( 'foo', 'bar' ) expect(localStorage.getItem('foo')).toEqual('bar') expect(spies.setItem).toHaveBeenCalledTimes(1) }) })As @ck4 suggested documentation has clear explanation for using localStorage in jest. However the mock functions were failing to execute any of the localStorage methods.
Below is the detailed example of my react component which make uses of abstract methods for writing and reading data,
//file: storage.js
const key = 'ABC';
export function readFromStore (){ return JSON.parse(localStorage.getItem(key));
}
export function saveToStore (value) { localStorage.setItem(key, JSON.stringify(value));
}
export default { readFromStore, saveToStore };Error:
TypeError: _setupLocalStorage2.default.setItem is not a functionFix:
Add below mock function for jest (path: .jest/mocks/setUpStore.js )
let mockStorage = {};
module.exports = window.localStorage = { setItem: (key, val) => Object.assign(mockStorage, {[key]: val}), getItem: (key) => mockStorage[key], clear: () => mockStorage = {}
};Snippet is referenced from here
To do the same in the Typescript, do the following:
Setup a file with the following contents:
let localStorageMock = (function() { let store = new Map() return { getItem(key: string):string { return store.get(key); }, setItem: function(key: string, value: string) { store.set(key, value); }, clear: function() { store = new Map(); }, removeItem: function(key: string) { store.delete(key) } };
})();
Object.defineProperty(window, 'localStorage', { value: localStorageMock });Then you add the following line to your package.json under your Jest configs
"setupTestFrameworkScriptFile":"PATH_TO_YOUR_FILE",
Or you import this file in your test case where you want to mock the localstorage.
2021, typescript
class LocalStorageMock { store: { [k: string]: string }; length: number; constructor() { this.store = {}; this.length = 0; } /** * @see * @returns */ key = (idx: number): string => { const values = Object.values(this.store); return values[idx]; }; clear() { this.store = {}; } getItem(key: string) { return this.store[key] || null; } setItem(key: string, value: string) { this.store[key] = String(value); } removeItem(key: string) { delete this.store[key]; }
}
export default LocalStorageMock;you can then use it with
global.localStorage = new LocalStorageMock();describe('getToken', () => { const Auth = new AuthService(); const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6Ik1yIEpvc2VwaCIsImlkIjoiNWQwYjk1Mzg2NTVhOTQ0ZjA0NjE5ZTA5IiwiZW1haWwiOiJ0cmV2X2pvc0Bob3RtYWlsLmNvbSIsInByb2ZpbGVVc2VybmFtZSI6Ii9tcmpvc2VwaCIsInByb2ZpbGVJbWFnZSI6Ii9Eb3Nlbi10LUdpci1sb29rLWN1dGUtbnVrZWNhdDMxNnMtMzExNzAwNDYtMTI4MC04MDAuanBnIiwiaWF0IjoxNTYyMzE4NDA0LCJleHAiOjE1OTM4NzYwMDR9.YwU15SqHMh1nO51eSa0YsOK-YLlaCx6ijceOKhZfQZc'; beforeEach(() => { global.localStorage = jest.fn().mockImplementation(() => { return { getItem: jest.fn().mockReturnValue(token) } }); }); it('should get the token from localStorage', () => { const result = Auth.getToken(); expect(result).toEqual(token); });
});Create a mock and add it to the global object
Object.defineProperty(window, "localStorage", { value: { getItem: jest.fn(), setItem: jest.fn(), removeItem: jest.fn(), },
});or
jest.spyOn(Object.getPrototypeOf(localStorage), "getItem");
jest.spyOn(Object.getPrototypeOf(localStorage), "setItem");Riffed off some other answers here to solve it for a project with Typescript. I created a LocalStorageMock like this:
export class LocalStorageMock { private store = {} clear() { this.store = {} } getItem(key: string) { return this.store[key] || null } setItem(key: string, value: string) { this.store[key] = value } removeItem(key: string) { delete this.store[key] }
}Then I created a LocalStorageWrapper class that I use for all access to local storage in the app instead of directly accessing the global local storage variable. Made it easy to set the mock in the wrapper for tests.
At least as of now, localStorage can be spied on easily on your jest tests, for example:
const spyRemoveItem = jest.spyOn(window.localStorage, 'removeItem')And that's it. You can use your spy as you are used to.
This worked for me and just one code line
const setItem = jest.spyOn(Object.getPrototypeOf(localStorage), 'setItem');
The following solution is compatible for testing with stricter TypeScript, ESLint, TSLint, and Prettier config: { "proseWrap": "always", "semi": false, "singleQuote": true, "trailingComma": "es5" }:
class LocalStorageMock { public store: { [key: string]: string } constructor() { this.store = {} } public clear() { this.store = {} } public getItem(key: string) { return this.store[key] || undefined } public setItem(key: string, value: string) { this.store[key] = value.toString() } public removeItem(key: string) { delete this.store[key] }
}
/* tslint:disable-next-line:no-any */
;(global as any).localStorage = new LocalStorageMock()HT/ for how to update global.localStorage
As mentioned in a comment by Niket Pathak,
starting jest@24 / jsdom@11.12.0 and above, localStorage is mocked automatically.
none of the answers above worked for me. So after some digging this is what I got to work. Credit goes to a few sources and other answers as well.
My full gist:
/** * Build Local Storage object * @see for source * @see for source * @returns */
export const fakeLocalStorage = () => { let store: { [key: string]: string } = {} return { getItem: function (key: string) { return store[key] || null }, setItem: function (key: string, value: string) { store[key] = value.toString() }, removeItem: function (key: string) { delete store[key] }, clear: function () { store = {} }, }
}
/** * Mock window properties for testing * @see for source * @see for sample implementation * @see for window properties * @param { string } property window property string but set to any due to some warnings * @param { Object } value for property * * @example * * const testLS = { * id: 5, * name: 'My Test', * } * mockWindowProperty('localStorage', fakeLocalStorage()) * window.localStorage.setItem('currentPage', JSON.stringify(testLS)) * */
const mockWindowProperty = (property: string | any, value: any) => { const { [property]: originalProperty } = window delete window[property] beforeAll(() => { Object.defineProperty(window, property, { configurable: true, writable: true, value, }) }) afterAll(() => { window[property] = originalProperty })
}
export default mockWindowPropertyThere is no need to mock localStorage - just use the jsdom environment so that your tests run in browser-like conditions.
In your jest.config.js,
module.exports = { // ... testEnvironment: "jsdom"
} This worked for me,
delete global.localStorage;
global.localStorage = {
getItem: () => }
