diff --git a/examples/reactnavigation/jest-setup.js b/examples/reactnavigation/jest-setup.js
new file mode 100644
index 000000000..161b6bc2e
--- /dev/null
+++ b/examples/reactnavigation/jest-setup.js
@@ -0,0 +1,14 @@
+import 'react-native-gesture-handler/jestSetup';
+
+jest.mock('react-native-reanimated', () => {
+ const Reanimated = require('react-native-reanimated/mock');
+
+ // The mock for `call` immediately calls the callback which is incorrect
+ // So we override it with a no-op
+ Reanimated.default.call = () => {};
+
+ return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
diff --git a/examples/reactnavigation/jest.config.js b/examples/reactnavigation/jest.config.js
index e8fd9d396..ec9c1a2a0 100644
--- a/examples/reactnavigation/jest.config.js
+++ b/examples/reactnavigation/jest.config.js
@@ -1,6 +1,6 @@
module.exports = {
preset: 'react-native',
- setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'],
+ setupFiles: ['./jest-setup.js'],
transformIgnorePatterns: [
'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)',
],
diff --git a/examples/reactnavigation/package.json b/examples/reactnavigation/package.json
index 093ae1542..510afa104 100644
--- a/examples/reactnavigation/package.json
+++ b/examples/reactnavigation/package.json
@@ -8,6 +8,7 @@
},
"dependencies": {
"@react-native-community/masked-view": "^0.1.9",
+ "@react-navigation/drawer": "^5.11.4",
"@react-navigation/native": "^5.1.6",
"@react-navigation/stack": "^5.2.13",
"prop-types": "^15.7.2",
diff --git a/examples/reactnavigation/src/App.js b/examples/reactnavigation/src/App.js
index 288feadf4..8e8c32806 100644
--- a/examples/reactnavigation/src/App.js
+++ b/examples/reactnavigation/src/App.js
@@ -1,3 +1,4 @@
+import 'react-native-gesture-handler';
import React from 'react';
import { StatusBar, StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
@@ -9,7 +10,6 @@ export default function App() {
-
diff --git a/examples/reactnavigation/src/AppNavigator.js b/examples/reactnavigation/src/AppNavigator.js
index 3d6ae6135..0f9dcde6e 100644
--- a/examples/reactnavigation/src/AppNavigator.js
+++ b/examples/reactnavigation/src/AppNavigator.js
@@ -1,4 +1,3 @@
-import 'react-native-gesture-handler';
import * as React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
diff --git a/examples/reactnavigation/src/DrawerApp.js b/examples/reactnavigation/src/DrawerApp.js
new file mode 100644
index 000000000..caecc47a5
--- /dev/null
+++ b/examples/reactnavigation/src/DrawerApp.js
@@ -0,0 +1,13 @@
+import 'react-native-gesture-handler';
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+
+import DrawerAppNavigator from './DrawerAppNavigator';
+
+export default function DrawerApp() {
+ return (
+
+
+
+ );
+}
diff --git a/examples/reactnavigation/src/DrawerAppNavigator.js b/examples/reactnavigation/src/DrawerAppNavigator.js
new file mode 100644
index 000000000..1a57f0ba8
--- /dev/null
+++ b/examples/reactnavigation/src/DrawerAppNavigator.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import {createDrawerNavigator} from '@react-navigation/drawer';
+import {View, Button, Text} from 'react-native';
+
+const { Screen, Navigator } = createDrawerNavigator();
+
+function HomeScreen({ navigation }) {
+ return (
+
+ Welcome!
+
+ );
+}
+
+function NotificationsScreen({ navigation }) {
+ return (
+
+ This is the notifications screen
+
+ );
+}
+
+export default function Navigation() {
+ return (
+
+
+
+
+ );
+}
diff --git a/examples/reactnavigation/src/__tests__/AppNavigator.test.js b/examples/reactnavigation/src/__tests__/AppNavigator.test.js
index 69cba3d15..e6ac09c66 100644
--- a/examples/reactnavigation/src/__tests__/AppNavigator.test.js
+++ b/examples/reactnavigation/src/__tests__/AppNavigator.test.js
@@ -4,9 +4,6 @@ import { render, fireEvent } from '@testing-library/react-native';
import AppNavigator from '../AppNavigator';
-// Silence the warning https://github.com/facebook/react-native/issues/11094#issuecomment-263240420
-jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
-
describe('Testing react navigation', () => {
test('page contains the header and 10 items', async () => {
const component = (
diff --git a/examples/reactnavigation/src/__tests__/DrawerAppNavigator.test.js b/examples/reactnavigation/src/__tests__/DrawerAppNavigator.test.js
new file mode 100644
index 000000000..c5a7e1ddf
--- /dev/null
+++ b/examples/reactnavigation/src/__tests__/DrawerAppNavigator.test.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import DrawerAppNavigator from '../DrawerAppNavigator';
+
+describe('Testing react navigation', () => {
+ test('screen contains a button linking to the notifications page', async () => {
+ const component = (
+
+
+
+ );
+
+ const { findByText, findAllByText } = render(component);
+ const button = await findByText('Go to notifications');
+
+ expect(button).toBeTruthy();
+ });
+
+ test('clicking on the button takes you to the notifications screen', async () => {
+ const component = (
+
+
+
+ );
+
+ const { queryByText, findByText } = render(component);
+ const oldScreen = queryByText('Welcome!');
+ const button = await findByText('Go to notifications');
+
+ expect(oldScreen).toBeTruthy();
+
+ fireEvent(button, 'press');
+ const newScreen = await findByText('This is the notifications screen');
+
+ expect(newScreen).toBeTruthy();
+ });
+});
diff --git a/website/docs/ReactNavigation.md b/website/docs/ReactNavigation.md
index 5d39c0062..e4db5f1b4 100644
--- a/website/docs/ReactNavigation.md
+++ b/website/docs/ReactNavigation.md
@@ -5,7 +5,9 @@ title: React Navigation
This section deals with integrating `@testing-library/react-native` with `react-navigation`, using Jest.
-## Setting up
+## Stack Navigator
+
+### Setting up
Install the packages required for React Navigation. For this example, we will use a [stack navigator](https://reactnavigation.org/docs/stack-navigator/) to transition to the second page when any of the items are clicked on.
@@ -122,7 +124,7 @@ const styles = StyleSheet.create({
});
```
-## Setting up the test environment
+### Setting up the test environment
Install required dev dependencies:
@@ -147,6 +149,8 @@ Notice the 2 entries that don't come with the default React Native project:
- `setupFiles` – an array of files that Jest is going to execute before running your tests. In this case, we run `react-native-gesture-handler/jestSetup.js` which sets up necessary mocks for `react-native-gesture-handler` native module
- `transformIgnorePatterns` – an array of paths that Jest ignores when transforming code. In this case, the negative lookahead regular expression is used, to tell Jest to transform (with Babel) every package inside `node_modules/` that starts with `react-native`, `@react-native-community` or `@react-navigation` (added by us, the rest is in `react-native` preset by default, so you don't have to worry about it).
+### Example tests
+
For this example, we are going to test out two things. The first thing is that the page is laid out as expected. The second, and most important, is that the page will transition to the detail screen when any item is tapped on.
Let's add a [`AppNavigator.test.js`](https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/src/__tests__/AppNavigator.js) file in `src/__tests__` directory:
@@ -198,6 +202,153 @@ describe('Testing react navigation', () => {
});
```
+## Drawer Navigator
+
+Testing the Drawer Navigation requires an additional setup step for mocking the Reanimated library.
+
+### Setting up
+
+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
+```
+
+Create a [`./DrawerAppNavigator.js`](https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/src/DrawerAppNavigator.js) component which will list the navigation stack:
+
+```jsx
+import 'react-native-gesture-handler';
+import React from 'react';
+import {createDrawerNavigator} from '@react-navigation/drawer';
+
+const { Screen, Navigator } = createDrawerNavigator();
+
+export default function Navigation() {
+ return (
+
+
+
+
+ );
+}
+```
+
+Create your two screens which we will transition to and from:
+
+```jsx
+function HomeScreen({ navigation }) {
+ return (
+
+ Welcome!
+
+ );
+}
+
+function NotificationsScreen({ navigation }) {
+ return (
+
+ This is the notifications screen
+
+ );
+}
+```
+
+### Setting up the test environment
+
+Install required dev dependencies:
+
+```
+$ yarn add -D jest @testing-library/react-native
+```
+
+Create a [`mock file`](https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/jest-mocks.js) necessary for your tests:
+
+```jsx
+import 'react-native-gesture-handler/jestSetup';
+
+jest.mock('react-native-reanimated', () => {
+ const Reanimated = require('react-native-reanimated/mock');
+
+ // The mock for `call` immediately calls the callback which is incorrect
+ // So we override it with a no-op
+ Reanimated.default.call = () => {};
+
+ return Reanimated;
+});
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
+```
+
+Create your `jest.config.js` file (or place the following properties in your `package.json` as a "jest" property)
+
+```js
+module.exports = {
+ preset: 'react-native',
+ setupFiles: ['./jest-mocks.js'],
+ transformIgnorePatterns: [
+ 'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)',
+ ],
+};
+```
+
+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.
+
+This setup is copied from the [React Navigation documentation](https://reactnavigation.org/docs/testing/).
+
+### Example tests
+
+For this example, we are going to test out two things. The first thing is that the screen is loaded correctly. The second, and most important, is that the page will transition to the notifications screen when the button is tapped on.
+
+Let's add a [`DrawerAppNavigator.test.js`](https://github.com/callstack/react-native-testing-library/blob/master/examples/reactnavigation/src/__tests__/DrawerAppNavigator.js) file in `src/__tests__` directory:
+
+```jsx
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { render, fireEvent } from '@testing-library/react-native';
+
+import DrawerAppNavigator from '../DrawerAppNavigator';
+
+describe('Testing react navigation', () => {
+ test('screen contains a button linking to the notifications page', async () => {
+ const component = (
+
+
+
+ );
+
+ const { findByText, findAllByText } = render(component);
+ const button = await findByText('Go to notifications');
+
+ expect(button).toBeTruthy();
+ });
+
+ test('clicking on the button takes you to the notifications screen', async () => {
+ const component = (
+
+
+
+ );
+
+ const { queryByText, findByText } = render(component);
+ const oldScreen = queryByText('Welcome!');
+ const button = await findByText('Go to notifications');
+
+ expect(oldScreen).toBeTruthy();
+
+ fireEvent(button, 'press');
+ const newScreen = await findByText('This is the notifications screen');
+
+ expect(newScreen).toBeTruthy();
+ });
+});
+```
+
## Running tests
To run the tests, place a test script inside your `package.json`