Adding tests for React Navigation Drawer Navigator #624
Conversation
| @@ -0,0 +1,38 @@ | |||
| import 'react-native-gesture-handler'; | |||
There was a problem hiding this comment.
This must be done in the entry file
There was a problem hiding this comment.
Nice catch!
I moved the import to the entry file. I also moved the import in the Stack Navigator example file, because it was in the same place.
(I copied the stack navigator example files and changed the navigation for the drawer)
| preset: 'react-native', | ||
| setupFiles: ['./jest-mocks.js'], | ||
| transformIgnorePatterns: [ | ||
| 'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)', |
There was a problem hiding this comment.
| 'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)', | |
| 'node_modules/(?!(jest-)?react-native|@react-native-community)', |
There was a problem hiding this comment.
Removing the @react-navigation here makes the tests fail:
There was a problem hiding this comment.
Interesting. I assumed Jest already handled asset files with react-native preset cc @thymikee
There was a problem hiding this comment.
Jest doesn't transpile node_modules by default. RN preset adjusts the configuration so that only node_modules other than react-native* and @react-native-community* are not transpiled. @react-navigation is not there, so we need to add it manually.
There was a problem hiding this comment.
@thymikee I'm talking about assets, React Navigation's code doesn't need to be compiled to run in Node.
There was a problem hiding this comment.
png is passed to a custom transformer: https://github.com/facebook/react-native/blob/master/jest-preset.js#L19 and transformers obey "transformIgnorePatterns", so here's why it fails.
There was a problem hiding this comment.
Could be fixed by using moduleNameMapper instead of transformer: https://jestjs.io/docs/en/webpack#handling-static-assets
There was a problem hiding this comment.
@thymikee do you know why it doesn't use moduleNameMapper? probably so people wouldn't have to specify it again when overriding?
There was a problem hiding this comment.
I don't know why, would have to dig through git blame. Jest handles merging moduleNameMapper gracefully, same as transforms
| Install the packages required for React Navigation. For this example, we will use a [drawer navigator](https://reactnavigation.org/docs/drawer-navigator/) to transition between a home screen and an additional screen. | ||
|
|
||
| ``` | ||
| $ yarn add @react-native-community/masked-view @react-navigation/native @react-navigation/drawer react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens |
There was a problem hiding this comment.
| $ yarn add @react-native-community/masked-view @react-navigation/native @react-navigation/drawer react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens | |
| $ yarn add @react-navigation/native @react-navigation/drawer react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-screens |
There was a problem hiding this comment.
@satya164 You are suggesting the masked-view is not needed? It's listed in the install instructions on the React Navigation website: https://reactnavigation.org/docs/getting-started#installing-dependencies-into-a-bare-react-native-project
There was a problem hiding this comment.
It's only necessary for stack navigator.
There was a problem hiding this comment.
Since this PR would create one set of instructions for both the stack navigator and the drawer navigator - should I just leave the masked view here? Or add instructions for the stack navigator only?
website/docs/ReactNavigation.md
Outdated
| const { Screen, Navigator } = createDrawerNavigator(); | ||
|
|
||
| export default function Navigation() { | ||
| const options = {}; |
| import React from 'react'; | ||
| import {createDrawerNavigator} from '@react-navigation/drawer'; | ||
|
|
||
| const { Screen, Navigator } = createDrawerNavigator(); |
There was a problem hiding this comment.
Better to use the style followed in official docs without destructring
There was a problem hiding this comment.
@satya164 I copied the way the existing example is built: https://github.com/callstack/react-native-testing-library/blob/master/website/docs/ReactNavigation.md
|
I hope this can get merged now :) |
|
Thanks @p-syche! |
Summary
Testing the Drawer Navigator with the current setup described on the website raised an error:
I found the solution for this problem in the official React Navigation docs -> testing section. What was missing was a Reanimated mock.
The Stack Navigator test is not raising any errors, so I didn't change it. However passing the
jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper')through a config file instead of adding it in test files seems like a pretty good solution.I added the Drawer Navigator test to the website as well.
Test plan
Run
yarn testin the example app for React Navigation.