Javascript 设置localStorage以测试React with jest

如何使用jest在React测试中处理本地存储

我已被添加到setupTest.js

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

global.localStorage = localStorageMock;

下面是我的获取缓存服务的示例：

export default class Cache {
   getCache = () => {
     return Promise.resolve(JSON.parse(localStorage.getItem('cache')));
   }
}

sample.test.js

import { mount } from 'enzyme';
import React from 'react';
import Component from '../Component';

const cacheData = JSON.stringify(require('../__mock__/data.json'));

// Trying to mock the function causing error _Cache.default .....
jest.mock('./Cache', () => {
  return jest.fn().mockImplementation(() => {
    return {
      getCache: () => Promise.resolve(),
    }
  })
});

beforeAll(() => {
  localStorage.setItem('cache', cacheDate);
});

describe("<Component /> ", () => {
   it('set data to state', () => {
       const wrapper = mount(<Component />);
       wrapper.instance().getCache(); <-- my function in <Component /> to get data from cache service
       wrapper.update();

      console.log(wrapper.state()) <---- return null
   })
})

从“酶”导入{mount}；
从“React”导入React；
从“../Component”导入组件；
const cacheData=JSON.stringify（require（'../\uu mock\uu/data.JSON'）；
//正在尝试模拟函数，导致错误\u Cache.default。。。。。
jest.mock（'./Cache'，（）=>{
返回jest.fn（）.mockImplementation（（）=>{
返回{
getCache:（）=>Promise.resolve（），
}
})
});
以前（（）=>{
setItem（'cache'，cacheDate）；
});
描述（“，（）=>{
它（'将数据设置为状态'，（）=>{
const wrapper=mount（）；
wrapper.instance（）.getCache（）；我已经测试了简单的setItem，并且直接将数据中的getitem添加到localStorage。因此，问题可能是如何模拟缓存服务并使名为getCache function的组件尝试模拟导致错误的函数_Cache.default-错误到底是什么？
localStorage.setItem（'cache'，cacheDate）
-这没有帮助，因为您已经对其进行了存根，这是一个不可操作的操作。要么不要替换现有的localStorage实现（Jest JSDOM提供了一个），要么以与您的，
localStorage.getItem.mockReturnValue（…）兼容的方式对其进行模拟
。是的，我使用的解决方案是尝试手动模拟缓存服务，并且数据存在。已解决