我想測驗一個使用 Jest 向 localStorage 寫入內容的函式。
有問題的功能如下：
const items: = [
{
name: 'Item One',
},
];
export const init = () => {
if (!localStorage.getItem('items')) {
localStorage.setItem('items', JSON.stringify(items));
}
};
我當前的測驗如下所示：
import { init } from './MyComponent';
describe('MyComponent', () => {
test('init method should set items to localStorage', () => {
init();
const items = JSON.parse(localStorage.getItem('items'));
expect(items).toEqual([
{
name: 'Item One',
},
]);
})
});
我在這里做錯了什么或錯過了什么？我正在直接匯入并呼叫該函式，但我不確定測驗是否像這樣有意義。
希望有人可以指導我..
uj5u.com熱心網友回復：
假設您使用的是 starter create-react-app 專案，localStorage 默認未在測驗環境中定義。該檔案指導用戶將其設定如下（我必須添加as unknown as Storage，localStorageMock因為沒有它會出現編譯錯誤）：
const localStorageMock = {
getItem: jest.fn(),
setItem: jest.fn(),
clear: jest.fn()
};
global.localStorage = localStorageMock as unknown as Storage;
這可以添加到您的setupTests.ts檔案中，也可以添加到您的測驗套件檔案中 - 無論是在describe函式之外，還是在套件設定函式中，例如beforeAll.
正如您所看到的，上面明確地模擬了localStorage功能，這意味著將要被命中的邏輯將被模擬出來，并且不像在集成測驗中那樣運行。因此，我會將您的測驗重構為以下代碼，以確保localStorage呼叫該代碼以顯示正確的行為：
test('init method should set items to localStorage', () => {
// act
init();
// assert
expect(localStorageMock.setItem).toHaveBeenCalled();
// option 1
expect(localStorageMock.setItem).toHaveBeenCalledWith('items', JSON.stringify([{name: 'Item One'}]))
// option 2
const args = localStorageMock.setItem.mock.calls[0];
expect(args[0]).toEqual('items');
expect(JSON.parse(args[1])[0].name).toEqual('Item One');
})
希望這可以幫助你！
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/478947.html
上一篇：如何在單元測驗中比較新日期？
下一篇：如何將值傳遞給沒有引數的方法？