Testing with Jest
Testing code using React Navigation takes some setup since we need to mock some native dependencies used in the navigators. We recommend using Jest to write unit tests.
Mocking native modules
To be able to test React Navigation components, we need to mock the following dependencies including native code:
react-native-reanimated
react-native-gesture-handler
To add the mocks, create a file jest/setup.js
(or any other file name of your choice) and paste the following code in it:
import 'react-native-gesture-handler/jestSetup';
jest.mock('react-native-reanimated', () => {
const Reanimated = require('react-native-reanimated/mock');
// The mock for `call` immediately calls the callback which is incorrect
// So we override it with a no-op
Reanimated.default.call = () => {};
return Reanimated;
});
// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
// As of react-native@0.64.X file has moved
jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
Then we need to use this setup file in our jest config. You can add it under setupFiles
option in a jest.config.js
file or the jest
key in package.json
:
{
"preset": "react-native",
"setupFiles": ["<rootDir>/jest/setup.js"]
}
Make sure that the path to the file in setupFiles
is correct. Jest will run these files before running your tests, so it's the best place to put your global mocks.
If you're not using Jest, then you'll need to mock these modules according to the test framework you are using.