feature: update react nav example (#1237)

Author: mdjastrzebski

.github/workflows/example-apps.yml

@@ -7,7 +7,7 @@ jobs:
  strategy:
  matrix:
  node: [14, 16, 18]
- example: [basic, redux, reactnavigation]
+ example: [basic, redux, react-navigation]
  name: Test Example
  runs-on: ubuntu-latest
  timeout-minutes: 10

examples/react-navigation/README.md

@@ -0,0 +1,9 @@
+# RNTL example app for React Navigation
+
+This example shows how to write integration tests using React Navigation without mocking it.
+
+There are two types of tests:
+1. integration tests operating on whole navigators, they should use `renderNavigator` helper to render a navigator component used in the app. It is useful when you want to test a scenario that includes multiple screens.
+2. single screen tests where you would pass mock `navigation` prop, built using `buildNavigationMock()` helper, and `route` prop to the screen component using regular `render` function.
+
+> Note that this example applies `includeHiddenElements: false` by default, so all queries will ignore elements on the hidden screens, e.g. inactive tabs or screens present in stack navigators. This option is enabled in `jest-setup.js` file, using `defaultIncludeHiddenElements: false` option to `configure` function.

examples/reactnavigation/babel.config.js examples/react-navigation/babel.config.jsexamples/reactnavigation/babel.config.js renamed to examples/react-navigation/babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
+ plugins: ['react-native-reanimated/plugin'],
 };

examples/react-navigation/jest-setup.js

@@ -0,0 +1,17 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { configure } from '@testing-library/react-native';
+
+// Import Jest Native matchers
+import '@testing-library/jest-native/extend-expect';
+
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+
+// Setup Reanimated mocking for Drawer navigation
+global.ReanimatedDataMock = { now: () => Date.now() };
+require('react-native-reanimated/lib/reanimated2/jestUtils').setUpTests();
+
+// Enable excluding hidden elements from the queries by default
+configure({
+ defaultIncludeHiddenElements: false,
+});

examples/reactnavigation/jest.config.js examples/react-navigation/jest.config.jsexamples/reactnavigation/jest.config.js renamed to examples/react-navigation/jest.config.js

@@ -1,6 +1,9 @@
 module.exports = {
  preset: 'react-native',
- setupFilesAfterEnv: ['./jest-setup.js'],
+ setupFilesAfterEnv: [
+ './node_modules/react-native-gesture-handler/jestSetup.js',
+ './jest-setup.js',
+ ],
  transformIgnorePatterns: [
  'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|@react-navigation)',
  ],

examples/react-navigation/package.json

@@ -0,0 +1,31 @@
+{
+ "name": "react-navigation-example",
+ "description": "Testing React Navigation with RNTL",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "test": "jest"
+ },
+ "dependencies": {
+ "@react-navigation/bottom-tabs": "^6.4.1",
+ "@react-navigation/drawer": "^6.5.1",
+ "@react-navigation/native": "^6.0.14",
+ "@react-navigation/native-stack": "^6.9.2",
+ "@react-navigation/stack": "^6.3.5",
+ "react": "^18.1.0",
+ "react-native": "^0.70.6",
+ "react-native-gesture-handler": "^2.8.0",
+ "react-native-reanimated": "^2.13.0",
+ "react-native-safe-area-context": "^4.4.1",
+ "react-native-screens": "^3.18.2"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.20.2",
+ "@testing-library/jest-native": "^5.3.0",
+ "@testing-library/react-native": "^11.5.0",
+ "babel-jest": "^29.3.1",
+ "jest": "^29.3.0",
+ "metro-react-native-babel-preset": "^0.72.3",
+ "react-test-renderer": "^18.1.0"
+ }
+}

examples/reactnavigation/src/App.js examples/react-navigation/src/App.jsexamples/reactnavigation/src/App.js renamed to examples/react-navigation/src/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StatusBar, StyleSheet, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
-import AppNavigator from './AppNavigator';
+import AppNavigator from './NativeStackNavigator';
 
 export default function App() {
  return (

examples/react-navigation/src/DrawerNavigator.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import DrawerHomeScreen from './screens/DrawerHomeScreen';
+import SettingsScreen from './screens/SettingsScreen';
+
+const Drawer = createDrawerNavigator();
+
+export default function Navigation() {
+ return (
+ <Drawer.Navigator>
+ <Drawer.Screen name="Home" component={DrawerHomeScreen} />
+ <Drawer.Screen name="Settings" component={SettingsScreen} />
+ </Drawer.Navigator>
+ );
+}

examples/react-navigation/src/DrawerNavigator.test.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { screen, fireEvent } from '@testing-library/react-native';
+import { renderNavigator } from './test-utils';
+import DrawerNavigator from './DrawerNavigator';
+
+test('Changing screens', () => {
+ renderNavigator(<DrawerNavigator />);
+
+ // Assert initial screen
+ expect(screen.getByRole('header', { name: 'Home screen' })).toBeTruthy();
+
+ // Open drawer by pressing button
+ const toggleButton = screen.getByText('Toggle drawer');
+ fireEvent.press(toggleButton);
+
+ // Assert drawer state
+ expect(screen.getByRole('button', { name: 'Home' })).toHaveAccessibilityState(
+ { selected: true }
+ );
+ expect(
+ screen.getByRole('button', { name: 'Settings' })
+ ).toHaveAccessibilityState({ selected: false });
+
+ // Press drawer item
+ fireEvent.press(screen.getByRole('button', { name: 'Settings' }));
+
+ // Assert drawer state after action
+ expect(screen.getByRole('button', { name: 'Home' })).toHaveAccessibilityState(
+ { selected: false }
+ );
+ expect(
+ screen.getByRole('button', { name: 'Settings' })
+ ).toHaveAccessibilityState({ selected: true });
+
+ // Assert visible screen
+ expect(screen.getByRole('header', { name: 'Settings screen' })).toBeTruthy();
+ expect(screen.queryByRole('header', { name: 'Home screen' })).toBeFalsy();
+});