Skip to content

Commit a7ef158

Browse files
committed
add a small paragraph on writing tests
1 parent ad8eb0f commit a7ef158

File tree

2 files changed

+64
-0
lines changed

2 files changed

+64
-0
lines changed

versioned_docs/version-6.x/testing.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,35 @@ Then we need to use this setup file in our jest config. You can add it under `se
5454
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.
5555

5656
If you're not using Jest, then you'll need to mock these modules according to the test framework you are using.
57+
58+
## Writing tests
59+
60+
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.
61+
62+
Example:
63+
64+
```js
65+
import * as React from 'react';
66+
import { screen, render, fireEvent } from '@testing-library/react-native';
67+
import { NavigationContainer } from '@react-navigation/native';
68+
import { RootNavigator } from './RootNavigator';
69+
70+
test('shows profile screen when View Profile is pressed', () => {
71+
render(
72+
<NavigationContainer>
73+
<RootNavigator />
74+
</NavigationContainer>
75+
);
76+
77+
fireEvent.press(screen.getByText('View Profile'));
78+
79+
expect(screen.getByText('My Profile')).toBeOnTheScreen();
80+
});
81+
```
82+
83+
## Best practices
84+
85+
There are a couple of things to keep in mind when writing tests for components using React Navigation:
86+
87+
1. Avoid mocking React Navigation. Instead, use a real navigator in your tests.
88+
2. Don't check for navigation actions. Instead, check for the result of the navigation such as the screen being rendered.

versioned_docs/version-7.x/testing.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,35 @@ Then we need to use this setup file in our jest config. You can add it under `se
5454
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.
5555

5656
If you're not using Jest, then you'll need to mock these modules according to the test framework you are using.
57+
58+
## Writing tests
59+
60+
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.
61+
62+
Example:
63+
64+
```js
65+
import * as React from 'react';
66+
import { screen, render, fireEvent } from '@testing-library/react-native';
67+
import { NavigationContainer } from '@react-navigation/native';
68+
import { RootNavigator } from './RootNavigator';
69+
70+
test('shows profile screen when View Profile is pressed', () => {
71+
render(
72+
<NavigationContainer>
73+
<RootNavigator />
74+
</NavigationContainer>
75+
);
76+
77+
fireEvent.press(screen.getByText('View Profile'));
78+
79+
expect(screen.getByText('My Profile')).toBeOnTheScreen();
80+
});
81+
```
82+
83+
## Best practices
84+
85+
There are a couple of things to keep in mind when writing tests for components using React Navigation:
86+
87+
1. Avoid mocking React Navigation. Instead, use a real navigator in your tests.
88+
2. Don't check for navigation actions. Instead, check for the result of the navigation such as the screen being rendered.

0 commit comments

Comments
 (0)