This section deals with integrating
react-navigation, using Jest.
Install the packages required for React Navigation. For this example, we will use a stack navigator to transition to the second page when any of the items are clicked on.
./AppNavigator.js component which will list the navigation stack:
Create your two screens which we will transition to and from them. The homescreen, found in
./screens/HomeScreen.js, contains a list of elements presented in a list view. On tap of any of these items will move to the details screen with the item number:
The details screen, found in
./screens/DetailsScreen.js, contains a header with the item number passed from the home screen:
Setting up the test environment
Install required dev dependencies:
jest.config.js file (or place the following properties in your
package.json as a "jest" property)
Notice the 2 entries that don't come with the default React Native project:
setupFiles– an array of files that Jest is going to execute before running your tests. In this case, we run
react-native-gesture-handler/jestSetup.jswhich sets up necessary mocks for
transformIgnorePatterns– an array of paths that Jest ignores when transforming code. In this case, the negative lookahead regular expression is used, to tell Jest to transform (with Babel) every package inside
node_modules/that starts with
@react-navigation(added by us, the rest is in
react-nativepreset by default, so you don't have to worry about it).
For this example, we are going to test out two things. The first thing is that the page is laid out as expected. The second, and most important, is that the page will transition to the detail screen when any item is tapped on.
AppNavigator.test.js file in
To run the tests, place a test script inside your
And run the
test script with
npm test or