Testing AsyncStorage with Redux Thunk - react-native

Question

When I try to test if a Cat is added correctly to the Async Storage I am receiving null. How can I solve this? In the app is working correctly. I am using React Native, React-Native-Async-Storage, Redux Thunk and Redux Persist.
REDUCER
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
}
}
ACTION
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)
}
}
}
TEST
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)
})
})
Thank you

Answer 1

Use official documentation react-native-async-storage package: https://react-native-async-storage.github.io/async-storage/docs/advanced/jest
UPDATED:
For you case you need do several steps:
#1 Mock your data
const CAT_MOCK = {
id: '1',
name: 'Cat',
}
#2 Mock Storage
const STORAGE_MOCK = {
[STORAGE_KEYS.cats]: [CAT_MOCK]
}
#3 Mock library for your case
jest.mock('#react-native-async-storage', () => ({
getItem: jest.fn((item) => {
return new Promise((resolve, reject) => {
resolve(STORAGE_MOCK[item]);
});
}),
}));