Skip to content
This repository was archived by the owner on Aug 1, 2020. It is now read-only.

Commit b2b3c85

Browse files
author
Steve Galili
authored
Update example-navigation.md
Hi 👋 My name is Steve Galili, big fan of the library I've discovered lately after participating in a workshop given by Kent. I've added an extra navigation example that suits react-navigation v5. It will be great if you could update this in your docs. I have more examples up my sleeve see my example repo https://github.com/vanGalilea/react-native-testing I would be happy to contribute more to this repo, if you need more help. Email- [email protected] Twitter- https://twitter.com/vanGalilea Greetings, Steve
1 parent 79fd5fe commit b2b3c85

File tree

1 file changed

+92
-1
lines changed

1 file changed

+92
-1
lines changed

docs/example-navigation.md

+92-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,98 @@ title: Navigation
44
sidebar_label: Navigation
55
---
66

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
799

8100
```js
9101
// <project-root-path>/__mocks__/react-native-gesture-handler.js
@@ -16,7 +108,6 @@ export const BaseButton = View;
16108
export const Directions = {};
17109
```
18110

19-
20111
```javascript
21112
import React from 'react';
22113
import { Button, Text, View } from 'react-native';

0 commit comments

Comments
 (0)