Hi I had simple snapshot test but I needed to save data from API with redux toolkit and after that it's always failing.
DashboardScreen.tsx
const DashboardScreen = () => {
// added block of code
const dispatch = useDispatch();
const { data: userData } = useGetUserDataQuery();
useEffect(() => {
if (userData) dispatch(setCurrentUser(userData));
}, [dispatch, userData]);
// end of added block of code
return (
<View style={styles.container}>
<View style={styles.containerWidth}>
<Image
style={styles.logo}
source={require('../../assets/images/KonektoSmart-logo.png')}
/>
</View>
</View>
);
};
and the test DashboardScreen-test-tsx
test('renders correctly', () => {
const tree = create(<DashboardScreen />).toJSON();
expect(tree).toMatchSnapshot();
});
● Test suite failed to run - but I tried some of the under and doesn't work.
[@RNC/AsyncStorage]: NativeModule: AsyncStorage is null.
To fix this issue try these steps:
• Run `react-native link @react-native-async-storage/async-storage` in the project root.
• Rebuild and restart the app.
• Run the packager with `--reset-cache` flag.
• If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app.
• If this happens while testing with Jest, check out docs how to integrate AsyncStorage with it: https://react-native-async-storage.github.io/async-storage/docs/advanced/jest
To solve this problem I needed to use Provider. For me docs are unclear doing that.
Full code:
import React from 'react';
import { create } from 'react-test-renderer';
import DashboardScreen from '../DashboardScreen';
import { Provider } from 'react-redux';
import store from '../../redux/store';
test('renders correctly', async () => {
const tree = create(<Provider store={store}><DashboardScreen /></Provider>).toJSON();
expect(tree).toMatchSnapshot();
});