Тестирование AsyncStorage с помощью Redux Thunk

#react-native #redux #asyncstorage

Вопрос:

Когда я пытаюсь проверить, правильно ли добавлен Кот в асинхронное хранилище, я получаю null. Как я могу это решить? В приложении все работает правильно. Я использую React Native, React-Native-Асинхронное хранилище, 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]);
        });
    }),
}));
 

Комментарии:

1. Я уже сделал это и все еще не работаю

2. Хорошо, после макетной библиотеки вам нужно добавить макет для ваших случаев. Я приведу вам пример

3. Спасибо, но чего я не понимаю, так это части mockItems[item] =(

4. Извините, я обновил ответ. Используйте STORAGE_MOCK[item] вместо этого mockItems[item]