|
1 | 1 | ---
|
2 | 2 | id: testing
|
3 |
| -title: Testing with Jest |
4 |
| -sidebar_label: Testing with Jest |
| 3 | +title: Writing tests |
| 4 | +sidebar_label: Writing tests |
5 | 5 | ---
|
6 | 6 |
|
7 | 7 | import Tabs from '@theme/Tabs';
|
8 | 8 | import TabItem from '@theme/TabItem';
|
9 | 9 |
|
10 |
| -Testing code using React Navigation may require some setup since we need to mock native dependencies used in the navigators. We recommend using [Jest](https://jestjs.io) to write unit tests. |
| 10 | +React Navigation components can be tested in a similar way to other React components. This guide will cover how to write tests for components using React Navigation using [Jest](https://jestjs.io). |
11 | 11 |
|
12 |
| -## Mocking native modules |
| 12 | +## Guiding principles |
| 13 | + |
| 14 | +When writing tests, it's encouraged to write tests that closely resemble how users interact with your app. Keeping this in mind, here are some guiding principles to follow: |
| 15 | + |
| 16 | +- **Test the result, not the action**: Instead of checking if a specific navigation action was called, check if the expected components are rendered after navigation. |
| 17 | +- **Avoid mocking React Navigation**: Mocking React Navigation components can lead to tests that don't match the actual logic. Instead, use a real navigator in your tests. |
| 18 | + |
| 19 | +Following these principles will help you write tests that are more reliable and easier to maintain by avoiding testing implementation details. |
| 20 | + |
| 21 | +## Mocking native dependencies |
13 | 22 |
|
14 | 23 | To be able to test React Navigation components, certain dependencies will need to be mocked depending on which components are being used.
|
15 | 24 |
|
16 |
| -If you're using `@react-navigation/drawer`, you will need to mock: |
| 25 | +If you're using `@react-navigation/stack`, you will need to mock: |
17 | 26 |
|
18 |
| -- `react-native-reanimated` |
19 | 27 | - `react-native-gesture-handler`
|
20 | 28 |
|
21 |
| -If you're using `@react-navigation/stack`, you will only need to mock: |
| 29 | +If you're using `@react-navigation/drawer`, you will need to mock: |
22 | 30 |
|
| 31 | +- `react-native-reanimated` |
23 | 32 | - `react-native-gesture-handler`
|
24 | 33 |
|
25 | 34 | 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:
|
26 | 35 |
|
27 | 36 | ```js
|
28 |
| -// include this line for mocking react-native-gesture-handler |
| 37 | +// Include this line for mocking react-native-gesture-handler |
29 | 38 | import 'react-native-gesture-handler/jestSetup';
|
30 | 39 |
|
31 |
| -// include this section and the NativeAnimatedHelper section for mocking react-native-reanimated |
32 |
| -jest.mock('react-native-reanimated', () => { |
33 |
| - const Reanimated = require('react-native-reanimated/mock'); |
| 40 | +// Include this section for mocking react-native-reanimated |
| 41 | +import { setUpTests } from 'react-native-reanimated'; |
34 | 42 |
|
35 |
| - // The mock for `call` immediately calls the callback which is incorrect |
36 |
| - // So we override it with a no-op |
37 |
| - Reanimated.default.call = () => {}; |
38 |
| - |
39 |
| - return Reanimated; |
40 |
| -}); |
| 43 | +setUpTests(); |
41 | 44 |
|
42 | 45 | // Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
|
| 46 | +import { jest } from '@jest/globals'; |
| 47 | + |
43 | 48 | jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
|
44 | 49 | ```
|
45 | 50 |
|
46 |
| -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`: |
| 51 | +Then we need to use this setup file in our jest config. You can add it under `setupFilesAfterEnv` option in a `jest.config.js` file or the `jest` key in `package.json`: |
47 | 52 |
|
48 | 53 | ```json
|
49 | 54 | {
|
50 | 55 | "preset": "react-native",
|
51 |
| - "setupFiles": ["<rootDir>/jest/setup.js"] |
| 56 | + "setupFilesAfterEnv": ["<rootDir>/jest/setup.js"] |
52 | 57 | }
|
53 | 58 | ```
|
54 | 59 |
|
55 |
| -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. |
| 60 | +Make sure that the path to the file in `setupFilesAfterEnv` is correct. Jest will run these files before running your tests, so it's the best place to put your global mocks. |
| 61 | + |
| 62 | +<details> |
| 63 | +<summary>Mocking `react-native-screens`</summary> |
| 64 | + |
| 65 | +This shouldn't be necessary in most cases. However, if you find yourself in a need to mock `react-native-screens` component for some reason, you should do it by adding following code in `jest/setup.js` file: |
| 66 | + |
| 67 | +```js |
| 68 | +// Include this section for mocking react-native-screens |
| 69 | +jest.mock('react-native-screens', () => { |
| 70 | + // Require actual module instead of a mock |
| 71 | + let screens = jest.requireActual('react-native-screens'); |
| 72 | + |
| 73 | + // All exports in react-native-screens are getters |
| 74 | + // We cannot use spread for cloning as it will call the getters |
| 75 | + // So we need to clone it with Object.create |
| 76 | + screens = Object.create( |
| 77 | + Object.getPrototypeOf(screens), |
| 78 | + Object.getOwnPropertyDescriptors(screens) |
| 79 | + ); |
| 80 | + |
| 81 | + // Add mock of the component you need |
| 82 | + // Here is the example of mocking the Screen component as a View |
| 83 | + Object.defineProperty(screens, 'Screen', { |
| 84 | + value: require('react-native').View, |
| 85 | + }); |
| 86 | + |
| 87 | + return screens; |
| 88 | +}); |
| 89 | +``` |
| 90 | + |
| 91 | +</details> |
56 | 92 |
|
57 | 93 | If you're not using Jest, then you'll need to mock these modules according to the test framework you are using.
|
58 | 94 |
|
59 |
| -## Writing tests |
| 95 | +## Fake timers |
| 96 | + |
| 97 | +When writing tests containing navigation with animations, you need to wait until the animations finish. In such cases, we recommend using [`Fake Timers`](https://jestjs.io/docs/timer-mocks) to simulate the passage of time in your tests. This can be done by adding the following line at the beginning of your test file: |
| 98 | + |
| 99 | +```js |
| 100 | +jest.useFakeTimers(); |
| 101 | +``` |
| 102 | + |
| 103 | +Fake timers replace real implementation of the native timer functions (e.g. `setTimeout()`, `setInterval()` etc,) with a custom implementation that uses a fake clock. This lets you instantly skip animations and reduce the time needed to run your tests by calling methods such as `jest.runAllTimers()`. |
| 104 | + |
| 105 | +Often, component state is updated after an animation completes. To avoid getting an error in such cases, wrap `jest.runAllTimers()` in `act`: |
| 106 | + |
| 107 | +```js |
| 108 | +import { act } from 'react-test-renderer'; |
| 109 | + |
| 110 | +// ... |
| 111 | + |
| 112 | +act(() => jest.runAllTimers()); |
| 113 | +``` |
| 114 | + |
| 115 | +See the examples below for more details on how to use fake timers in tests involving navigation. |
60 | 116 |
|
61 |
| -We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) along with [`jest-native`](https://github.com/testing-library/jest-native) to write your tests. |
| 117 | +## Navigation and visibility |
| 118 | + |
| 119 | +In React Navigation, the previous screen is not unmounted when navigating to a new screen. This means that the previous screen is still present in the component tree, but it's not visible. |
| 120 | + |
| 121 | +When writing tests, you should assert that the expected component is visible or hidden instead of checking if it's rendered or not. React Native Testing Library provides a `toBeVisible` matcher that can be used to check if an element is visible to the user. |
| 122 | + |
| 123 | +```js |
| 124 | +expect(screen.getByText('Settings screen')).toBeVisible(); |
| 125 | +``` |
| 126 | + |
| 127 | +This is in contrast to the `toBeOnTheScreen` matcher, which checks if the element is rendered in the component tree. This matcher is not recommended when writing tests involving navigation. |
| 128 | + |
| 129 | +By default, the queries from React Native Testing Library (e.g. `getByRole`, `getByText`, `getByLabelText` etc.) [only return visible elements](https://callstack.github.io/react-native-testing-library/docs/api/queries#includehiddenelements-option). So you don't need to do anything special. However, if you're using a different library for your tests, you'll need to account for this behavior. |
| 130 | + |
| 131 | +## Example tests |
| 132 | + |
| 133 | +We recommend using [React Native Testing Library](https://callstack.github.io/react-native-testing-library/) to write your tests. |
| 134 | + |
| 135 | +In this guide, we will go through some example scenarios and show you how to write tests for them using Jest and React Native Testing Library: |
| 136 | + |
| 137 | +### Navigation between tabs |
| 138 | + |
| 139 | +In this example, we have a bottom tab navigator with two tabs: Home and Settings. We will write a test that asserts that we can navigate between these tabs by pressing the tab bar buttons. |
| 140 | + |
| 141 | +<Tabs groupId="example" queryString="example"> |
| 142 | +<TabItem value="static" label="Static" default> |
| 143 | + |
| 144 | +```js title="MyTabs.js" |
| 145 | +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; |
| 146 | +import { Text, View } from 'react-native'; |
| 147 | + |
| 148 | +const HomeScreen = () => { |
| 149 | + return ( |
| 150 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 151 | + <Text>Home screen</Text> |
| 152 | + </View> |
| 153 | + ); |
| 154 | +}; |
| 155 | + |
| 156 | +const SettingsScreen = () => { |
| 157 | + return ( |
| 158 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 159 | + <Text>Settings screen</Text> |
| 160 | + </View> |
| 161 | + ); |
| 162 | +}; |
| 163 | + |
| 164 | +export const MyTabs = createBottomTabNavigator({ |
| 165 | + screens: { |
| 166 | + Home: HomeScreen, |
| 167 | + Settings: SettingsScreen, |
| 168 | + }, |
| 169 | +}); |
| 170 | +``` |
| 171 | + |
| 172 | +</TabItem> |
| 173 | +<TabItem value="dynamic" label="Dynamic"> |
| 174 | + |
| 175 | +```js title="MyTabs.js" |
| 176 | +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; |
| 177 | +import { Text, View } from 'react-native'; |
| 178 | + |
| 179 | +const HomeScreen = () => { |
| 180 | + return ( |
| 181 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 182 | + <Text>Home screen</Text> |
| 183 | + </View> |
| 184 | + ); |
| 185 | +}; |
| 186 | + |
| 187 | +const SettingsScreen = () => { |
| 188 | + return ( |
| 189 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 190 | + <Text>Settings screen</Text> |
| 191 | + </View> |
| 192 | + ); |
| 193 | +}; |
| 194 | + |
| 195 | +const Tab = createBottomTabNavigator(); |
| 196 | + |
| 197 | +export const MyTabs = () => { |
| 198 | + return ( |
| 199 | + <Tab.Navigator> |
| 200 | + <Tab.Screen name="Home" component={HomeScreen} /> |
| 201 | + <Tab.Screen name="Settings" component={SettingsScreen} /> |
| 202 | + </Tab.Navigator> |
| 203 | + ); |
| 204 | +}; |
| 205 | +``` |
62 | 206 |
|
63 |
| -Example: |
| 207 | +</TabItem> |
| 208 | +</Tabs> |
64 | 209 |
|
65 |
| -<Tabs groupId="config" queryString="config"> |
| 210 | +<Tabs groupId="example" queryString="example"> |
66 | 211 | <TabItem value="static" label="Static" default>
|
67 | 212 |
|
68 |
| -```js name='Testing with jest' |
69 |
| -import * as React from 'react'; |
70 |
| -import { screen, render, fireEvent } from '@testing-library/react-native'; |
| 213 | +```js title="MyTabs.test.js" |
| 214 | +import { expect, jest, test } from '@jest/globals'; |
71 | 215 | import { createStaticNavigation } from '@react-navigation/native';
|
72 |
| -import { RootNavigator } from './RootNavigator'; |
| 216 | +import { act, render, screen, userEvent } from '@testing-library/react-native'; |
| 217 | + |
| 218 | +import { MyTabs } from './MyTabs'; |
| 219 | + |
| 220 | +jest.useFakeTimers(); |
73 | 221 |
|
74 |
| -const Navigation = createStaticNavigation(RootNavigator); |
| 222 | +test('navigates to settings by tab bar button press', async () => { |
| 223 | + const user = userEvent.setup(); |
| 224 | + |
| 225 | + const Navigation = createStaticNavigation(MyTabs); |
75 | 226 |
|
76 |
| -test('shows profile screen when View Profile is pressed', () => { |
77 | 227 | render(<Navigation />);
|
78 | 228 |
|
79 |
| - fireEvent.press(screen.getByText('View Profile')); |
| 229 | + const button = screen.getByRole('button', { name: 'Settings, tab, 2 of 2' }); |
| 230 | + |
| 231 | + await user.press(button); |
80 | 232 |
|
81 |
| - expect(screen.getByText('My Profile')).toBeOnTheScreen(); |
| 233 | + act(() => jest.runAllTimers()); |
| 234 | + |
| 235 | + expect(screen.getByText('Settings screen')).toBeVisible(); |
82 | 236 | });
|
83 | 237 | ```
|
84 | 238 |
|
85 | 239 | </TabItem>
|
86 | 240 | <TabItem value="dynamic" label="Dynamic">
|
87 | 241 |
|
88 |
| -```js name='Testing with jest' |
89 |
| -import * as React from 'react'; |
90 |
| -import { screen, render, fireEvent } from '@testing-library/react-native'; |
| 242 | +```js title="MyTabs.test.js" |
| 243 | +import { expect, jest, test } from '@jest/globals'; |
91 | 244 | import { NavigationContainer } from '@react-navigation/native';
|
92 |
| -import { RootNavigator } from './RootNavigator'; |
| 245 | +import { act, render, screen, userEvent } from '@testing-library/react-native'; |
| 246 | + |
| 247 | +import { MyTabs } from './MyTabs'; |
| 248 | + |
| 249 | +jest.useFakeTimers(); |
| 250 | + |
| 251 | +test('navigates to settings by tab bar button press', async () => { |
| 252 | + const user = userEvent.setup(); |
93 | 253 |
|
94 |
| -test('shows profile screen when View Profile is pressed', () => { |
95 | 254 | render(
|
96 | 255 | <NavigationContainer>
|
97 |
| - <RootNavigator /> |
| 256 | + <MyTabs /> |
98 | 257 | </NavigationContainer>
|
99 | 258 | );
|
100 | 259 |
|
101 |
| - fireEvent.press(screen.getByText('View Profile')); |
| 260 | + const button = screen.getByLabelText('Settings, tab, 2 of 2'); |
| 261 | + |
| 262 | + await user.press(button); |
| 263 | + |
| 264 | + act(() => jest.runAllTimers()); |
102 | 265 |
|
103 |
| - expect(screen.getByText('My Profile')).toBeOnTheScreen(); |
| 266 | + expect(screen.getByText('Settings screen')).toBeVisible(); |
104 | 267 | });
|
105 | 268 | ```
|
106 | 269 |
|
107 | 270 | </TabItem>
|
108 | 271 | </Tabs>
|
109 | 272 |
|
110 |
| -## Best practices |
| 273 | +In the above test, we: |
| 274 | + |
| 275 | +- Render the `MyTabs` navigator within a [NavigationContainer](navigation-container.md) in our test. |
| 276 | +- Get the tab bar button using the `getByLabelText` query that matches its accessibility label. |
| 277 | +- Press the button using `userEvent.press(button)` to simulate a user interaction. |
| 278 | +- Run all timers using `jest.runAllTimers()` to skip animations (e.g. animations in the `Pressable` for the button). |
| 279 | +- Assert that the `Settings screen` is visible after the navigation. |
| 280 | + |
| 281 | +### Reacting to a navigation event |
| 282 | + |
| 283 | +In this example, we have a stack navigator with two screens: Home and Surprise. We will write a test that asserts that the text "Surprise!" is displayed after navigating to the Surprise screen. |
| 284 | + |
| 285 | +<Tabs groupId="example" queryString="example"> |
| 286 | +<TabItem value="static" label="Static" default> |
| 287 | + |
| 288 | +```js title="MyStack.js" |
| 289 | +import { useNavigation } from '@react-navigation/native'; |
| 290 | +import { createStackNavigator } from '@react-navigation/stack'; |
| 291 | +import { Button, Text, View } from 'react-native'; |
| 292 | +import { useEffect, useState } from 'react'; |
| 293 | + |
| 294 | +const HomeScreen = () => { |
| 295 | + const navigation = useNavigation(); |
| 296 | + |
| 297 | + return ( |
| 298 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 299 | + <Text>Home screen</Text> |
| 300 | + <Button |
| 301 | + onPress={() => navigation.navigate('Surprise')} |
| 302 | + title="Click here!" |
| 303 | + /> |
| 304 | + </View> |
| 305 | + ); |
| 306 | +}; |
| 307 | + |
| 308 | +const SurpriseScreen = () => { |
| 309 | + const navigation = useNavigation(); |
| 310 | + |
| 311 | + const [textVisible, setTextVisible] = useState(false); |
| 312 | + |
| 313 | + useEffect(() => { |
| 314 | + navigation.addListener('transitionEnd', () => setTextVisible(true)); |
| 315 | + }, [navigation]); |
| 316 | + |
| 317 | + return ( |
| 318 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 319 | + {textVisible ? <Text>Surprise!</Text> : ''} |
| 320 | + </View> |
| 321 | + ); |
| 322 | +}; |
| 323 | + |
| 324 | +export const MyStack = createStackNavigator({ |
| 325 | + screens: { |
| 326 | + Home: HomeScreen, |
| 327 | + Surprise: SurpriseScreen, |
| 328 | + }, |
| 329 | +}); |
| 330 | +``` |
| 331 | + |
| 332 | +</TabItem> |
| 333 | +<TabItem value="dynamic" label="Dynamic"> |
| 334 | + |
| 335 | +```js title="MyStack.js" |
| 336 | +import { useNavigation } from '@react-navigation/native'; |
| 337 | +import { createStackNavigator } from '@react-navigation/stack'; |
| 338 | +import { useEffect, useState } from 'react'; |
| 339 | +import { Button, Text, View } from 'react-native'; |
| 340 | + |
| 341 | +const HomeScreen = () => { |
| 342 | + const navigation = useNavigation(); |
| 343 | + |
| 344 | + return ( |
| 345 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 346 | + <Text>Home screen</Text> |
| 347 | + <Button |
| 348 | + onPress={() => navigation.navigate('Surprise')} |
| 349 | + title="Click here!" |
| 350 | + /> |
| 351 | + </View> |
| 352 | + ); |
| 353 | +}; |
| 354 | + |
| 355 | +const SurpriseScreen = () => { |
| 356 | + const navigation = useNavigation(); |
| 357 | + |
| 358 | + const [textVisible, setTextVisible] = useState(false); |
| 359 | + |
| 360 | + useEffect(() => { |
| 361 | + navigation.addListener('transitionEnd', () => setTextVisible(true)); |
| 362 | + }, [navigation]); |
| 363 | + |
| 364 | + return ( |
| 365 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 366 | + {textVisible ? <Text>Surprise!</Text> : ''} |
| 367 | + </View> |
| 368 | + ); |
| 369 | +}; |
| 370 | + |
| 371 | +const Stack = createStackNavigator(); |
| 372 | + |
| 373 | +export const MyStack = () => { |
| 374 | + return ( |
| 375 | + <Stack.Navigator> |
| 376 | + <Stack.Screen name="Home" component={HomeScreen} /> |
| 377 | + <Stack.Screen name="Surprise" component={SurpriseScreen} /> |
| 378 | + </Stack.Navigator> |
| 379 | + ); |
| 380 | +}; |
| 381 | +``` |
| 382 | + |
| 383 | +</TabItem> |
| 384 | +</Tabs> |
| 385 | + |
| 386 | +<Tabs groupId="example" queryString="example"> |
| 387 | +<TabItem value="static" label="Static" default> |
| 388 | + |
| 389 | +```js title="MyStack.test.js" |
| 390 | +import { expect, jest, test } from '@jest/globals'; |
| 391 | +import { createStaticNavigation } from '@react-navigation/native'; |
| 392 | +import { act, render, screen, userEvent } from '@testing-library/react-native'; |
| 393 | + |
| 394 | +import { MyStack } from './MyStack'; |
| 395 | + |
| 396 | +jest.useFakeTimers(); |
| 397 | + |
| 398 | +test('shows surprise text after navigating to surprise screen', async () => { |
| 399 | + const user = userEvent.setup(); |
| 400 | + |
| 401 | + const Navigation = createStaticNavigation(MyStack); |
| 402 | + |
| 403 | + render(<Navigation />); |
| 404 | + |
| 405 | + await user.press(screen.getByLabelText('Click here!')); |
| 406 | + |
| 407 | + act(() => jest.runAllTimers()); |
| 408 | + |
| 409 | + expect(screen.getByText('Surprise!')).toBeVisible(); |
| 410 | +}); |
| 411 | +``` |
| 412 | + |
| 413 | +</TabItem> |
| 414 | +<TabItem value="dynamic" label="Dynamic"> |
| 415 | + |
| 416 | +```js title="MyStack.test.js" |
| 417 | +import { expect, jest, test } from '@jest/globals'; |
| 418 | +import { NavigationContainer } from '@react-navigation/native'; |
| 419 | +import { act, render, screen, userEvent } from '@testing-library/react-native'; |
| 420 | + |
| 421 | +import { MyStack } from './MyStack'; |
| 422 | + |
| 423 | +jest.useFakeTimers(); |
| 424 | + |
| 425 | +test('shows surprise text after navigating to surprise screen', async () => { |
| 426 | + const user = userEvent.setup(); |
| 427 | + |
| 428 | + render( |
| 429 | + <NavigationContainer> |
| 430 | + <MyStack /> |
| 431 | + </NavigationContainer> |
| 432 | + ); |
| 433 | + |
| 434 | + await user.press(screen.getByLabelText('Click here!')); |
| 435 | + |
| 436 | + act(() => jest.runAllTimers()); |
| 437 | + |
| 438 | + expect(screen.getByText('Surprise!')).toBeVisible(); |
| 439 | +}); |
| 440 | +``` |
| 441 | + |
| 442 | +</TabItem> |
| 443 | +</Tabs> |
| 444 | + |
| 445 | +In the above test, we: |
| 446 | + |
| 447 | +- Render the `MyStack` navigator within a [NavigationContainer](navigation-container.md) in our test. |
| 448 | +- Get the button using the `getByLabelText` query that matches its title. |
| 449 | +- Press the button using `userEvent.press(button)` to simulate a user interaction. |
| 450 | +- Run all timers using `jest.runAllTimers()` to skip animations (e.g. navigation animation between screens). |
| 451 | +- Assert that the `Surprise!` text is visible after the transition to the Surprise screen is complete. |
| 452 | + |
| 453 | +### Fetching data `useFocusEffect` |
| 454 | + |
| 455 | +In this example, we have a bottom tab navigator with two tabs: Home and Pokemon. We will write a test that asserts the data fetching logic on focus in the Pokemon screen. |
| 456 | + |
| 457 | +<Tabs groupId="example" queryString="example"> |
| 458 | +<TabItem value="static" label="Static" default> |
| 459 | + |
| 460 | +```js title="MyTabs.js" |
| 461 | +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; |
| 462 | +import { useFocusEffect } from '@react-navigation/native'; |
| 463 | +import { useCallback, useState } from 'react'; |
| 464 | +import { Text, View } from 'react-native'; |
| 465 | + |
| 466 | +function HomeScreen() { |
| 467 | + return ( |
| 468 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 469 | + <Text>Home screen</Text> |
| 470 | + </View> |
| 471 | + ); |
| 472 | +} |
| 473 | + |
| 474 | +const url = 'https://pokeapi.co/api/v2/pokemon/ditto'; |
| 475 | + |
| 476 | +function PokemonScreen() { |
| 477 | + const [profileData, setProfileData] = useState({ status: 'loading' }); |
| 478 | + |
| 479 | + useFocusEffect( |
| 480 | + useCallback(() => { |
| 481 | + if (profileData.status === 'success') { |
| 482 | + return; |
| 483 | + } |
| 484 | + |
| 485 | + setProfileData({ status: 'loading' }); |
| 486 | + |
| 487 | + const controller = new AbortController(); |
| 488 | + |
| 489 | + const fetchUser = async () => { |
| 490 | + try { |
| 491 | + const response = await fetch(url, { signal: controller.signal }); |
| 492 | + const data = await response.json(); |
| 493 | + |
| 494 | + setProfileData({ status: 'success', data: data }); |
| 495 | + } catch (error) { |
| 496 | + setProfileData({ status: 'error' }); |
| 497 | + } |
| 498 | + }; |
| 499 | + |
| 500 | + fetchUser(); |
| 501 | + |
| 502 | + return () => { |
| 503 | + controller.abort(); |
| 504 | + }; |
| 505 | + }, [profileData.status]) |
| 506 | + ); |
| 507 | + |
| 508 | + if (profileData.status === 'loading') { |
| 509 | + return ( |
| 510 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 511 | + <Text>Loading...</Text> |
| 512 | + </View> |
| 513 | + ); |
| 514 | + } |
| 515 | + |
| 516 | + if (profileData.status === 'error') { |
| 517 | + return ( |
| 518 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 519 | + <Text>An error occurred!</Text> |
| 520 | + </View> |
| 521 | + ); |
| 522 | + } |
| 523 | + |
| 524 | + return ( |
| 525 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 526 | + <Text>{profileData.data.name}</Text> |
| 527 | + </View> |
| 528 | + ); |
| 529 | +} |
| 530 | + |
| 531 | +export const MyTabs = createBottomTabNavigator({ |
| 532 | + screens: { |
| 533 | + Home: HomeScreen, |
| 534 | + Pokemon: PokemonScreen, |
| 535 | + }, |
| 536 | +}); |
| 537 | +``` |
| 538 | + |
| 539 | +</TabItem> |
| 540 | +<TabItem value="dynamic" label="Dynamic"> |
| 541 | + |
| 542 | +```js title="MyTabs.js" |
| 543 | +import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; |
| 544 | +import { useFocusEffect } from '@react-navigation/native'; |
| 545 | +import { useCallback, useState } from 'react'; |
| 546 | +import { Text, View } from 'react-native'; |
| 547 | + |
| 548 | +function HomeScreen() { |
| 549 | + return ( |
| 550 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 551 | + <Text>Home screen</Text> |
| 552 | + </View> |
| 553 | + ); |
| 554 | +} |
| 555 | + |
| 556 | +const url = 'https://pokeapi.co/api/v2/pokemon/ditto'; |
| 557 | + |
| 558 | +function PokemonInfoScreen() { |
| 559 | + const [profileData, setProfileData] = useState({ status: 'loading' }); |
| 560 | + |
| 561 | + useFocusEffect( |
| 562 | + useCallback(() => { |
| 563 | + if (profileData.status === 'success') { |
| 564 | + return; |
| 565 | + } |
| 566 | + |
| 567 | + setProfileData({ status: 'loading' }); |
| 568 | + |
| 569 | + const controller = new AbortController(); |
| 570 | + |
| 571 | + const fetchUser = async () => { |
| 572 | + try { |
| 573 | + const response = await fetch(url, { signal: controller.signal }); |
| 574 | + const data = await response.json(); |
| 575 | + |
| 576 | + setProfileData({ status: 'success', data: data }); |
| 577 | + } catch (error) { |
| 578 | + setProfileData({ status: 'error' }); |
| 579 | + } |
| 580 | + }; |
| 581 | + |
| 582 | + fetchUser(); |
| 583 | + |
| 584 | + return () => { |
| 585 | + controller.abort(); |
| 586 | + }; |
| 587 | + }, [profileData.status]) |
| 588 | + ); |
| 589 | + |
| 590 | + if (profileData.status === 'loading') { |
| 591 | + return ( |
| 592 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 593 | + <Text>Loading...</Text> |
| 594 | + </View> |
| 595 | + ); |
| 596 | + } |
| 597 | + |
| 598 | + if (profileData.status === 'error') { |
| 599 | + return ( |
| 600 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 601 | + <Text>An error occurred!</Text> |
| 602 | + </View> |
| 603 | + ); |
| 604 | + } |
| 605 | + |
| 606 | + return ( |
| 607 | + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> |
| 608 | + <Text>{profileData.data.name}</Text> |
| 609 | + </View> |
| 610 | + ); |
| 611 | +} |
| 612 | + |
| 613 | +const Tab = createBottomTabNavigator(); |
| 614 | + |
| 615 | +export function MyTabs() { |
| 616 | + return ( |
| 617 | + <Tab.Navigator screenOptions={{ headerShown: false }}> |
| 618 | + <Tab.Screen name="Home" component={HomeScreen} /> |
| 619 | + <Tab.Screen name="Pokemon" component={PokemonScreen} /> |
| 620 | + </Tab.Navigator> |
| 621 | + ); |
| 622 | +} |
| 623 | +``` |
| 624 | + |
| 625 | +</TabItem> |
| 626 | +</Tabs> |
| 627 | + |
| 628 | +To make the test deterministic and isolate it from the real backend, you can mock the network requests with a library such as [Mock Service Worker](https://mswjs.io/): |
| 629 | + |
| 630 | +```js title="msw-handlers.js" |
| 631 | +import { delay, http, HttpResponse } from 'msw'; |
| 632 | + |
| 633 | +export const handlers = [ |
| 634 | + http.get('https://pokeapi.co/api/v2/pokemon/ditto', async () => { |
| 635 | + await delay(1000); |
| 636 | + |
| 637 | + return HttpResponse.json({ |
| 638 | + id: 132, |
| 639 | + name: 'ditto', |
| 640 | + }); |
| 641 | + }), |
| 642 | +]; |
| 643 | +``` |
| 644 | + |
| 645 | +Here we setup a handler that mocks responses from the API (for this example we're using [PokéAPI](https://pokeapi.co/)). Additionally, we `delay` the response by 1000ms to simulate a network request delay. |
| 646 | + |
| 647 | +Then, we write a Node.js integration module to use the Mock Service Worker in our tests: |
| 648 | + |
| 649 | +```js title="msw-node.js" |
| 650 | +import { setupServer } from 'msw/node'; |
| 651 | +import { handlers } from './msw-handlers'; |
| 652 | + |
| 653 | +const server = setupServer(...handlers); |
| 654 | +``` |
| 655 | + |
| 656 | +Refer to the documentation of the library to learn more about setting it up in your project - [Getting started](https://mswjs.io/docs/getting-started), [React Native integration](https://mswjs.io/docs/integrations/react-native). |
| 657 | + |
| 658 | +<Tabs groupId="example" queryString="example"> |
| 659 | +<TabItem value="static" label="Static" default> |
| 660 | + |
| 661 | +```js title="MyTabs.test.js" |
| 662 | +import './msw-node'; |
| 663 | + |
| 664 | +import { expect, jest, test } from '@jest/globals'; |
| 665 | +import { createStaticNavigation } from '@react-navigation/native'; |
| 666 | +import { act, render, screen, userEvent } from '@testing-library/react-native'; |
| 667 | + |
| 668 | +import { MyTabs } from './MyTabs'; |
| 669 | + |
| 670 | +jest.useFakeTimers(); |
| 671 | + |
| 672 | +test('loads data on Pokemon info screen after focus', async () => { |
| 673 | + const user = userEvent.setup(); |
| 674 | + |
| 675 | + const Navigation = createStaticNavigation(MyTabs); |
| 676 | + |
| 677 | + render(<Navigation />); |
| 678 | + |
| 679 | + const homeTabButton = screen.getByLabelText('Home, tab, 1 of 2'); |
| 680 | + const profileTabButton = screen.getByLabelText('Profile, tab, 2 of 2'); |
| 681 | + |
| 682 | + await user.press(profileTabButton); |
| 683 | + |
| 684 | + expect(screen.getByText('Loading...')).toBeVisible(); |
| 685 | + |
| 686 | + await act(() => jest.runAllTimers()); |
| 687 | + |
| 688 | + expect(screen.getByText('ditto')).toBeVisible(); |
| 689 | + |
| 690 | + await user.press(homeTabButton); |
| 691 | + |
| 692 | + await act(() => jest.runAllTimers()); |
| 693 | + |
| 694 | + await user.press(profileTabButton); |
| 695 | + |
| 696 | + expect(screen.queryByText('Loading...')).not.toBeVisible(); |
| 697 | + expect(screen.getByText('ditto')).toBeVisible(); |
| 698 | +}); |
| 699 | +``` |
| 700 | + |
| 701 | +</TabItem> |
| 702 | +<TabItem value="dynamic" label="Dynamic"> |
| 703 | + |
| 704 | +```js title="MyTabs.test.js" |
| 705 | +import './msw-node'; |
| 706 | + |
| 707 | +import { expect, jest, test } from '@jest/globals'; |
| 708 | +import { NavigationContainer } from '@react-navigation/native'; |
| 709 | +import { act, render, screen, userEvent } from '@testing-library/react-native'; |
| 710 | + |
| 711 | +import { MyTabs } from './MyTabs'; |
| 712 | + |
| 713 | +jest.useFakeTimers(); |
| 714 | + |
| 715 | +test('loads data on Pokemon info screen after focus', async () => { |
| 716 | + const user = userEvent.setup(); |
| 717 | + |
| 718 | + render( |
| 719 | + <NavigationContainer> |
| 720 | + <MyTabs /> |
| 721 | + </NavigationContainer> |
| 722 | + ); |
| 723 | + |
| 724 | + const homeTabButton = screen.getByLabelText('Home, tab, 1 of 2'); |
| 725 | + const profileTabButton = screen.getByLabelText('Profile, tab, 2 of 2'); |
| 726 | + |
| 727 | + await user.press(profileTabButton); |
| 728 | + |
| 729 | + expect(screen.getByText('Loading...')).toBeVisible(); |
| 730 | + |
| 731 | + await act(() => jest.runAllTimers()); |
| 732 | + |
| 733 | + expect(screen.getByText('ditto')).toBeVisible(); |
| 734 | + |
| 735 | + await user.press(homeTabButton); |
| 736 | + |
| 737 | + await act(() => jest.runAllTimers()); |
| 738 | + |
| 739 | + await user.press(profileTabButton); |
| 740 | + |
| 741 | + expect(screen.queryByText('Loading...')).not.toBeVisible(); |
| 742 | + expect(screen.getByText('ditto')).toBeVisible(); |
| 743 | +}); |
| 744 | +``` |
| 745 | + |
| 746 | +</TabItem> |
| 747 | +</Tabs> |
| 748 | + |
| 749 | +In the above test, we: |
| 750 | + |
| 751 | +- Assert that the `Loading...` text is visible while the data is being fetched. |
| 752 | +- Run all timers using `jest.runAllTimers()` to skip delays in the network request. |
| 753 | +- Assert that the `ditto` text is visible after the data is fetched. |
| 754 | +- Press the home tab button to navigate to the home screen. |
| 755 | +- Run all timers using `jest.runAllTimers()` to skip animations (e.g. animations in the `Pressable` for the button). |
| 756 | +- Press the profile tab button to navigate back to the Pokemon screen. |
| 757 | +- Ensure that cached data is shown by asserting that the `Loading...` text is not visible and the `ditto` text is visible. |
| 758 | + |
| 759 | +:::note |
111 | 760 |
|
112 |
| -There are a couple of things to keep in mind when writing tests for components using React Navigation: |
| 761 | +In a production app, we recommend using a library like [React Query](https://react-query.tanstack.com/) to handle data fetching and caching. The above example is for demonstration purposes only. |
113 | 762 |
|
114 |
| -1. Avoid mocking React Navigation. Instead, use a real navigator in your tests. |
115 |
| -2. Don't check for navigation actions. Instead, check for the result of the navigation such as the screen being rendered. |
| 763 | +::: |
0 commit comments