[英]what is the best way to mock window.sessionStorage in jest
下面是一個非常簡單的 jest 單元測試,運行它時,你會得到如下錯誤
不能監視原始值; 未定義給定
類型錯誤:無法讀取未定義的屬性“getItem”
但根據這篇文章的最后兩條評論,localStorage 和 sessionStorage 已經添加到最新的 JSDOM 和 jest 中。 如果使用jest-localstorage-mock並將其添加到我的 jest setupFiles 那么你會看到奇怪的錯誤,如
TypeError: object[methodName].mockImplementation 不是 function
所以我的問題是開玩笑地模擬 localStorage/sessionStorage 的最佳方法是什么。 謝謝
describe('window.sessionStorage', () => {
let mockSessionStorage;
beforeEach(() => {
mockSessionStorage = {};
jest.spyOn(window.sessionStorage, "getItem").mockImplementation(key => {
return mockSessionStorage[key];
});
});
describe('getItem-', () => {
beforeEach(() => {
mockSessionStorage = {
foo: 'bar',
}
});
it('gets string item', () => {
const ret = window.sessionStorage.getItem('foo');
expect(ret).toBe('bar');
});
});
});
下面是我的笑話配置
module.exports = {
verbose: true,
//setupFiles: ["jest-localstorage-mock"],
testURL: "http://localhost/"
};
這里是解決方案僅使用jestjs
和typescript
,僅此而已。
index.ts
:
export function getUserInfo() {
const userInfo = window.sessionStorage.getItem('userInfo');
if (userInfo) {
return JSON.parse(userInfo);
}
return {};
}
index.spec.ts
:
import { getUserInfo } from './';
const localStorageMock = (() => {
let store = {};
return {
getItem(key) {
return store[key] || null;
},
setItem(key, value) {
store[key] = value.toString();
},
removeItem(key) {
delete store[key];
},
clear() {
store = {};
}
};
})();
Object.defineProperty(window, 'sessionStorage', {
value: localStorageMock
});
describe('getUserInfo', () => {
beforeEach(() => {
window.sessionStorage.clear();
jest.restoreAllMocks();
});
it('should get user info from session storage', () => {
const getItemSpy = jest.spyOn(window.sessionStorage, 'getItem');
window.sessionStorage.setItem('userInfo', JSON.stringify({ userId: 1, userEmail: 'example@gmail.com' }));
const actualValue = getUserInfo();
expect(actualValue).toEqual({ userId: 1, userEmail: 'example@gmail.com' });
expect(getItemSpy).toBeCalledWith('userInfo');
});
it('should get empty object if no user info in session storage', () => {
const getItemSpy = jest.spyOn(window.sessionStorage, 'getItem');
const actualValue = getUserInfo();
expect(actualValue).toEqual({});
expect(window.sessionStorage.getItem).toBeCalledWith('userInfo');
expect(getItemSpy).toBeCalledWith('userInfo');
});
});
帶有 100% 覆蓋率報告的單元測試結果:
PASS src/stackoverflow/51566816/index.spec.ts
getUserInfo
✓ should get user info from session storage (6ms)
✓ should get empty object if no user info in session storage (1ms)
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 100 | 100 | 100 | 100 | |
index.ts | 100 | 100 | 100 | 100 | |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 4.548s, estimated 6s
這是完整的演示: https : //github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/51566816
您可能甚至不需要模擬。 只需像往常一樣使用window.sessionStorage
並根據window.sessionStorage.getItem(...)
結果而不是監視window.sessionStorage.setItem
編寫您的條件。 只需不要忘記在beforeEach
調用window.sessionStorage.clear()
, beforeEach
所示。
這與添加 object 一起對我有用:
defineProperty(window, 'sessionStorage', {
writable: true,
configurable: true,
value: localStorageMock
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.