Question

我的react应用程序中有一条专用路由，当我使用笑话并运行yarn test测试我的应用程序时，它表明在我的PrivateRoute fil中有一条线被发现。在localStorage.getItem代码的第8行，

如何通过???

Answer 1

localStorage.getItem应该在预期呼叫之前被监视：

jest.spyOn(localStorage, 'getItem');

并断言它是后来被调用的：

expect(localStorage.getItem).toBeCalledWith('access_token');

Answer 2

您可以这样使用：-

const result = '{ "name":"John", "age":30, "car":"bmw"}';

//set json object to storage 
localStorage.setItem('user', JSON.stringify(result));

//get object
const value = localStorage.getItem('user');

//remove object
localStorage.removeItem('user');

Answer 3

将其放入测试初始化程序文件中：

const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn()
};

global.localStorage = localStorageMock;

所以现在您可以全局使用localStorageMock

expect(localStorageMock.getItem).toHaveBeenCalledWith('access_token')

唯一的陷阱是确保测试具有jest.clearAllMocks()清理步骤，以便针对其他测试重新初始化该模拟。

如何在我的React应用程序中测试localStorage？

3 个答案: