How to rewrite test with jest?

Question

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

Answer 1

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();
});