@@ -87,10 +87,7 @@ We are going to write example tests illustrating the difference between `navigat
87
87
``` js
88
88
import { Button , Text , View } from ' react-native' ;
89
89
import { createNativeStackNavigator } from ' @react-navigation/native-stack' ;
90
- import {
91
- createStaticNavigation ,
92
- useNavigation ,
93
- } from ' @react-navigation/native' ;
90
+ import { useNavigation } from ' @react-navigation/native' ;
94
91
95
92
const Profile = () => {
96
93
const navigation = useNavigation ();
@@ -117,14 +114,12 @@ const Settings = () => {
117
114
);
118
115
};
119
116
120
- const RootStack = createNativeStackNavigator ({
117
+ export const RootNavigator = createNativeStackNavigator ({
121
118
screens: {
122
119
Profile,
123
120
Settings,
124
121
},
125
122
});
126
-
127
- export const RootNavigator = createStaticNavigation (RootStack);
128
123
```
129
124
130
125
</TabItem >
@@ -180,12 +175,16 @@ export const RootNavigator = () => {
180
175
``` js
181
176
import { expect , test } from ' @jest/globals' ;
182
177
import { fireEvent , render , screen } from ' @testing-library/react-native' ;
183
- import { createNavigationContainerRef } from ' @react-navigation/native' ;
178
+ import {
179
+ createNavigationContainerRef ,
180
+ createStaticNavigation ,
181
+ } from ' @react-navigation/native' ;
184
182
import { RootNavigator } from ' ./RootNavigator' ;
185
183
186
184
test (' navigates to settings screen twice' , () => {
185
+ const RootNavigation = createStaticNavigation (RootNavigator);
187
186
const navigation = createNavigationContainerRef ();
188
- render (< RootNavigator ref= {navigation} / > );
187
+ render (< RootNavigation ref= {navigation} / > );
189
188
190
189
const button = screen .getByText (' Navigate to Settings' );
191
190
fireEvent .press (button);
@@ -241,13 +240,17 @@ test('navigates to settings screen twice', () => {
241
240
242
241
``` js
243
242
import { expect , test } from ' @jest/globals' ;
244
- import { createNavigationContainerRef } from ' @react-navigation/native' ;
243
+ import {
244
+ createNavigationContainerRef ,
245
+ createStaticNavigation ,
246
+ } from ' @react-navigation/native' ;
245
247
import { fireEvent , render , screen } from ' @testing-library/react-native' ;
246
248
import { RootNavigator } from ' ./RootNavigator' ;
247
249
248
250
test (' pushes settings screen twice' , () => {
251
+ const RootNavigation = createStaticNavigation (RootNavigator);
249
252
const navigation = createNavigationContainerRef ();
250
- render (< RootNavigator ref= {navigation} / > );
253
+ render (< RootNavigation ref= {navigation} / > );
251
254
252
255
const button = screen .getByText (' Push Settings' );
253
256
fireEvent .press (button);
@@ -364,13 +367,15 @@ Fake timers test example:
364
367
``` js
365
368
import { expect , jest , test } from ' @jest/globals' ;
366
369
import { act , fireEvent , render , screen } from ' @testing-library/react-native' ;
370
+ import { createStaticNavigation } from ' @react-navigation/native' ;
367
371
import { RootNavigator } from ' ./RootNavigator' ;
368
372
369
373
test (' navigates to settings screen after 10000 ms delay' , () => {
370
374
// Enable fake timers
371
375
jest .useFakeTimers ();
372
376
373
- render (< RootNavigator / > );
377
+ const RootNavigation = createStaticNavigation (RootNavigator);
378
+ render (< RootNavigation / > );
374
379
375
380
fireEvent .press (screen .getByText (' Navigate to Settings with 10000 ms delay' ));
376
381
0 commit comments