使用 Redux Thunk 测试 AsyncStorage

Posted 2023-04-14

【中文标题】使用 Redux Thunk 测试 AsyncStorage

【英文标题】：Testing AsyncStorage with Redux Thunk

【发布时间】：2021-08-18 03:56:32

【问题描述】：

当我尝试测试是否将 Cat 正确添加到异步存储时，我收到 null。我该如何解决这个问题？在应用程序中正常工作。我正在使用 React Native、React-Native-Async-Storage、Redux Thunk 和 Redux Persist。

减速器

export const INITIAL_STATE: CatsState = 
  cats: [],
  selectedCat: null


const catsReducer = (state = INITIAL_STATE, action: CatsAction): CatsState => 
  switch (action.type) 
    case CatsActionTypes.SET_CATS:
      return  ...state, cats: action.payload 
    case CatsActionTypes.SELECT_CAT:
      return  ...state, selectedCat: action.payload 
    default:
      return state
  

动作

export const addCat = ( cat : AddCatData): ThunkAction<void, RootState, null, CatsAction> => 
  return async (dispatch: Dispatch<CatsAction>) => 
    try 
      const response = await AsyncStorage.getItem(STORAGE_KEYS.cats)
      const cats: Cat[] = response ? JSON.parse(response) : []

      cats.push(cat)
      await AsyncStorage.setItem(STORAGE_KEYS.cats, JSON.stringify(cats))
      dispatch( type: CatsActionTypes.SET_CATS, payload: cats )
     catch (error) 
      console.log(error)
    
  

测试

beforeEach(async () => await AsyncStorage.clear())
describe('add cat', () => 
  it('persist cat correctly into local storage', async () => 
    const cat: Cat = 
      id: '1',
      name: 'Cat',
      breed: 'Breed',
      age: 1,
      gender: 'male',
      weight: 5,
      size: 'Big',
      color: 'Brown',
      mood: 'Angry',
      description: 'Cat description',
      friendly: 3,
      liked: true
    

    addCat( cat )
    const response = await AsyncStorage.getItem(STORAGE_KEYS.cats)
    const cats: Cat[] = JSON.parse(response)
    const expectedArray =  cats: [cat] 
    expect(cats).toStrictEqual(expectedArray)
  )
)

谢谢

【参考方案1】：

使用官方文档react-native-async-storage包：https://react-native-async-storage.github.io/async-storage/docs/advanced/jest

更新：

对于您的情况，您需要执行几个步骤：

#1 模拟您的数据

const CAT_MOCK = 
    id: '1',
    name: 'Cat',

#2 模拟存储

const STORAGE_MOCK = 
    [STORAGE_KEYS.cats]: [CAT_MOCK]

#3 适用于您的案例的模拟库

jest.mock('@react-native-async-storage', () => (
    getItem: jest.fn((item) => 
        return new Promise((resolve, reject) => 
            resolve(STORAGE_MOCK[item]);
        );
    ),
));

【讨论】：

我已经做了，还是不行

好的，在模拟库之后，您需要为您的案例添加模拟。我给你举个例子

谢谢，但我不明白的是mockItems[item] =(

的部分

对不起，我更新了答案。使用STORAGE_MOCK[item] 而不是mockItems[item]