@@ -4,6 +4,98 @@ title: Navigation
4
4
sidebar_label : Navigation
5
5
---
6
6
7
+ ### react-navigation v5
8
+ ``` js
9
+ // jest.config.js
10
+
11
+ // react-native-gesture-handler use native modules, we mock it by using it's build in jestSetup.
12
+ // react-navigations will try to import it's assets, to avoid an error we will mock it by using a custom assets transformer
13
+
14
+ module .exports = {
15
+ preset: ' @testing-library/react-native' ,
16
+ setupFiles: [" ./node_modules/react-native-gesture-handler/jestSetup.js" ],
17
+ moduleNameMapper: {
18
+ " \\ .(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$" : " <rootDir>/assetsTransformer.js" ,
19
+ " \\ .(css|less)$" : " <rootDir>/assetsTransformer.js"
20
+ }
21
+ }
22
+ ```
23
+
24
+ ``` js
25
+ // assetsTransformer.js
26
+ // see https://jestjs.io/docs/en/webpack.html#handling-static-assets
27
+ const path = require (' path' )
28
+
29
+ module .exports = {
30
+ process (src , filename , config , options ) {
31
+ return ' module.exports = ' + JSON .stringify (path .basename (filename)) + ' ;'
32
+ },
33
+ }
34
+ ```
35
+
36
+ ``` js
37
+ import React from ' react' ;
38
+ import { Button , Text , View } from ' react-native' ;
39
+ import {NavigationContainer , useNavigationState } from ' @react-navigation/native'
40
+ import {createStackNavigator } from ' @react-navigation/stack'
41
+ import {fireEvent , render , wait } from ' @testing-library/react-native'
42
+
43
+ const Home = ({ navigation }) => (
44
+ < View>
45
+ < Text testID= " title" > Home page< / Text >
46
+ < Button title= " About page" onPress= {() => navigation .navigate (' About' )} / >
47
+ < / View>
48
+ );
49
+ const About = ({ navigation }) => (
50
+ < View>
51
+ < Text testID= " title" > About page< / Text >
52
+ < Button title= " About page" onPress= {() => navigation .navigate (' Home' )} / >
53
+ < / View>
54
+ );
55
+ const Location = () => (
56
+ < View>
57
+ < Text testID= " title" > Location page< / Text >
58
+ < LocationDisplay / >
59
+ < / View>
60
+ );
61
+
62
+ const LocationDisplay = (() => {
63
+ const routeName = useNavigationState (state => state .routes [state .index ].name );
64
+ return (
65
+ < Text testID= " location-display" > {routeName}< / Text >
66
+ )
67
+ });
68
+
69
+ const Stack = createStackNavigator ()
70
+
71
+ const renderWithNavigation = ({ screens = {}, navigatorConfig = {} } = {})=>
72
+ render (< NavigationContainer>
73
+ < Stack .Navigator {... navigatorConfig}>
74
+ < Stack .Screen name= " Home" component= {Home} / >
75
+ < Stack .Screen name= " Location" component= {Location } / >
76
+ {
77
+ Object .keys (screens).map (name => < Stack .Screen key= {name} name= {name} component= {screens[name]} / > )
78
+ }
79
+ < / Stack .Navigator >
80
+ < / NavigationContainer> )
81
+
82
+ test (' full app rendering/navigating' , () => {
83
+ const { findByText , getByTestId , getByText } = renderWithNavigation ({screens: {About}});
84
+ expect (getByTestId (' title' ).props .children ).toMatch (' Home page' );
85
+ fireEvent .press (getByText (/ About page/ i ));
86
+ expect (findByText (' About page' )).toBeTruthy ();
87
+ });
88
+
89
+ test (' rendering a component that uses withNavigation' , async () => {
90
+ const initialRouteName = ' Location' ;
91
+ const { getByTestId } = renderWithNavigation ({
92
+ navigatorConfig: { initialRouteName },
93
+ });
94
+ await wait (()=> expect (getByTestId (' location-display' ).props .children ).toBe (initialRouteName));
95
+ });
96
+ ```
97
+
98
+ ### react-navigation v4
7
99
8
100
``` js
9
101
// <project-root-path>/__mocks__/react-native-gesture-handler.js
@@ -16,7 +108,6 @@ export const BaseButton = View;
16
108
export const Directions = {};
17
109
```
18
110
19
-
20
111
``` javascript
21
112
import React from ' react' ;
22
113
import { Button , Text , View } from ' react-native' ;
0 commit comments