im using jest with @testing-library/react-native
code:
a button click dispatches a function:
onPress(_, dispatch) {
dispatch(getUserAddresses());
},
this function is async and is a thunk middleware:
export const getUserAddresses = () => async (dispatch) => {
const res = await retrieveUserAddresses();
if (res.status === 'success') {
dispatch(setLocation(res.data));
}
};
it triggers an axios action:
export const retrieveUserAddresses = async () => {
const token = await getToken();
try {
const res = await instance({
method: 'GET',
url: '/addresses',
headers: { Authorization: `Bearer ${token}` },
});
return res.data;
} catch (error) {
return error.response;
}
};
if response is OK, this will trigger this function:
export const setLocation = (data) => ({
type: constants.SET_LOCATION,
data,
});
which will in the end change a state on my reducer from false to true this will make a component mount or unmount.
when it comes to testing, when I run this code:
// ...
it('...', () => {
// ...
const { getAllByTestId, getByTestId } = render(
<MockedNavigator component={User} name={USER_ROUTE} />,
);
// this fire event should click the button that dispatches getUserAddresses();
fireEvent.press(getAllByTestId('User-option')[1]);
// ...
});
because the getUserAddresses() function is asynchronous when I check if my component prop is "true", it says it's false. but if I for instance, remove the async stuff from this function, it says it's true because indeed I clicked the button that dispatches the getUserAddresses() function.
I already tried to use MSW but its not working properly on react native for me. (although it works on reactjs)
how can I test it?
from how can I test async actions that changes the UI on my React Native code
No comments:
Post a Comment