diff --git a/examples/reactnavigation/jest-setup.js b/examples/reactnavigation/jest-setup.js
index baa4ed853..66e9c6598 100644
--- a/examples/reactnavigation/jest-setup.js
+++ b/examples/reactnavigation/jest-setup.js
@@ -1,14 +1,2 @@
-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/NativeAnimatedHelper');
diff --git a/examples/reactnavigation/jest.config.js b/examples/reactnavigation/jest.config.js
index ec9c1a2a0..08aae2876 100644
--- a/examples/reactnavigation/jest.config.js
+++ b/examples/reactnavigation/jest.config.js
@@ -1,7 +1,7 @@
module.exports = {
preset: 'react-native',
- setupFiles: ['./jest-setup.js'],
+ setupFilesAfterEnv: ['./jest-setup.js'],
transformIgnorePatterns: [
- 'node_modules/(?!(jest-)?react-native|@react-native-community|@react-navigation)',
+ 'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|@react-navigation)',
],
};
diff --git a/examples/reactnavigation/package.json b/examples/reactnavigation/package.json
index 510afa104..9db6de384 100644
--- a/examples/reactnavigation/package.json
+++ b/examples/reactnavigation/package.json
@@ -7,25 +7,20 @@
"test": "jest"
},
"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",
- "react": "^16.13.1",
- "react-native": "^0.62.2",
- "react-native-gesture-handler": "^1.6.1",
- "react-native-reanimated": "^1.8.0",
- "react-native-safe-area-context": "^0.7.3",
- "react-native-screens": "^2.5.0"
+ "@react-navigation/native": "^6.0.11",
+ "@react-navigation/native-stack": "^6.7.0",
+ "@react-navigation/stack": "^6.2.2",
+ "react": "^18.0.0",
+ "react-native": "^0.69.2",
+ "react-native-safe-area-context": "^4.3.1",
+ "react-native-screens": "^3.15.0"
},
"devDependencies": {
"@babel/core": "^7.9.0",
- "@babel/runtime": "^7.9.2",
- "babel-jest": "^25.4.0",
- "jest": "^25.4.0",
- "metro-react-native-babel-preset": "^0.59.0",
- "@testing-library/react-native": "^7.0.0-rc.0",
- "react-test-renderer": "^16.13.1"
+ "@testing-library/react-native": "^11.0.0",
+ "babel-jest": "^28.0.0",
+ "jest": "^28.0.0",
+ "metro-react-native-babel-preset": "^0.70.0",
+ "react-test-renderer": "^18.0.0"
}
}
diff --git a/examples/reactnavigation/src/App.js b/examples/reactnavigation/src/App.js
index 8e8c32806..cb42b3adf 100644
--- a/examples/reactnavigation/src/App.js
+++ b/examples/reactnavigation/src/App.js
@@ -1,8 +1,6 @@
-import 'react-native-gesture-handler';
import React from 'react';
import { StatusBar, StyleSheet, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
-
import AppNavigator from './AppNavigator';
export default function App() {
diff --git a/examples/reactnavigation/src/AppNavigator.js b/examples/reactnavigation/src/AppNavigator.js
index 0f9dcde6e..2f6aa4a03 100644
--- a/examples/reactnavigation/src/AppNavigator.js
+++ b/examples/reactnavigation/src/AppNavigator.js
@@ -1,18 +1,15 @@
import * as React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
-
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
-const { Screen, Navigator } = createStackNavigator();
+const Stack = createNativeStackNavigator();
export default function Navigation() {
- const options = {};
-
return (
-
-
-
-
+
+
+
+
);
}
diff --git a/examples/reactnavigation/src/AppNavigator.test.js b/examples/reactnavigation/src/AppNavigator.test.js
new file mode 100644
index 000000000..9482126bb
--- /dev/null
+++ b/examples/reactnavigation/src/AppNavigator.test.js
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { screen, fireEvent } from '@testing-library/react-native';
+import { renderWithNavigation } from './test-utils';
+import AppNavigator from './AppNavigator';
+
+test('page contains the header and 10 items', async () => {
+ renderWithNavigation();
+
+ const header = await screen.findByText('List of numbers from 1 to 20');
+ expect(header).toBeTruthy();
+
+ const items = screen.getAllByText(/Item number/);
+ expect(items.length).toBe(10);
+});
+
+test('clicking on one item takes you to the details screen', async () => {
+ renderWithNavigation();
+
+ const toClick = await screen.findByText('Item number 5');
+ fireEvent(toClick, 'press');
+
+ expect(screen.getByText('Showing details for 5')).toBeTruthy();
+ expect(screen.getByText('the number you have chosen is 5')).toBeTruthy();
+});
diff --git a/examples/reactnavigation/src/DrawerApp.js b/examples/reactnavigation/src/DrawerApp.js
deleted file mode 100644
index caecc47a5..000000000
--- a/examples/reactnavigation/src/DrawerApp.js
+++ /dev/null
@@ -1,13 +0,0 @@
-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
deleted file mode 100644
index 1a57f0ba8..000000000
--- a/examples/reactnavigation/src/DrawerAppNavigator.js
+++ /dev/null
@@ -1,35 +0,0 @@
-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
deleted file mode 100644
index e6ac09c66..000000000
--- a/examples/reactnavigation/src/__tests__/AppNavigator.test.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { render, fireEvent } from '@testing-library/react-native';
-
-import AppNavigator from '../AppNavigator';
-
-describe('Testing react navigation', () => {
- test('page contains the header and 10 items', async () => {
- const component = (
-
-
-
- );
-
- const { findByText, findAllByText } = render(component);
-
- const header = await findByText('List of numbers from 1 to 20');
- const items = await findAllByText(/Item number/);
-
- expect(header).toBeTruthy();
- expect(items.length).toBe(10);
- });
-
- test('clicking on one item takes you to the details screen', async () => {
- const component = (
-
-
-
- );
-
- const { findByText } = render(component);
- const toClick = await findByText('Item number 5');
-
- fireEvent(toClick, 'press');
- const newHeader = await findByText('Showing details for 5');
- const newBody = await findByText('the number you have chosen is 5');
-
- expect(newHeader).toBeTruthy();
- expect(newBody).toBeTruthy();
- });
-});
diff --git a/examples/reactnavigation/src/__tests__/DrawerAppNavigator.test.js b/examples/reactnavigation/src/__tests__/DrawerAppNavigator.test.js
deleted file mode 100644
index c5a7e1ddf..000000000
--- a/examples/reactnavigation/src/__tests__/DrawerAppNavigator.test.js
+++ /dev/null
@@ -1,39 +0,0 @@
-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/examples/reactnavigation/src/screens/HomeScreen.js b/examples/reactnavigation/src/screens/HomeScreen.js
index 67046c5ff..bf1fbb9fc 100644
--- a/examples/reactnavigation/src/screens/HomeScreen.js
+++ b/examples/reactnavigation/src/screens/HomeScreen.js
@@ -12,7 +12,7 @@ export default function HomeScreen({ navigation }) {
new Array(20).fill(null).map((_, idx) => idx + 1)
);
- const onOpacityPress = item => navigation.navigate('Details', item);
+ const onOpacityPress = (item) => navigation.navigate('Details', item);
return (
diff --git a/examples/reactnavigation/src/test-utils.js b/examples/reactnavigation/src/test-utils.js
new file mode 100644
index 000000000..9b6a0ed3c
--- /dev/null
+++ b/examples/reactnavigation/src/test-utils.js
@@ -0,0 +1,9 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import * as React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { render } from '@testing-library/react-native';
+
+/** Render helper that renders `ui` within `NavigationContainer`. */
+export function renderWithNavigation(ui) {
+ return render({ui});
+}
diff --git a/examples/redux/components/AddTodo.test.js b/examples/redux/components/AddTodo.test.js
index 7e3cdacfa..6da7ae751 100644
--- a/examples/redux/components/AddTodo.test.js
+++ b/examples/redux/components/AddTodo.test.js
@@ -1,40 +1,27 @@
import * as React from 'react';
-import { Provider } from 'react-redux';
-import { fireEvent, render } from '@testing-library/react-native';
-import configureStore from '../store';
+import { screen, fireEvent } from '@testing-library/react-native';
+import { renderWithRedux } from '../test-utils';
import AddTodo from './AddTodo';
-describe('Application test', () => {
- test('adds a new test when entry has been included', () => {
- const store = configureStore();
-
- const component = (
-
-
-
- );
-
- const { getByPlaceholderText, getByText } = render(component);
-
- const input = getByPlaceholderText(/repository/i);
- expect(input).toBeTruthy();
-
- const textToEnter = 'This is a random element';
- fireEvent.changeText(input, textToEnter);
- fireEvent.press(getByText('Submit form'));
-
- const todosState = store.getState().todos;
-
- expect(todosState.length).toEqual(1);
-
- expect(todosState).toEqual(
- expect.arrayContaining([
- expect.objectContaining({
- id: 1,
- text: textToEnter,
- date: expect.any(Date),
- }),
- ])
- );
- });
+test('adds a new todo to redux store when submitting form', () => {
+ const { store } = renderWithRedux();
+
+ const input = screen.getByPlaceholderText(/repository/i);
+ expect(input).toBeTruthy();
+
+ const textToEnter = 'This is a random element';
+ fireEvent.changeText(input, textToEnter);
+ fireEvent.press(screen.getByText('Submit form'));
+
+ const todosState = store.getState().todos;
+ expect(todosState).toHaveLength(1);
+ expect(todosState).toEqual(
+ expect.arrayContaining([
+ expect.objectContaining({
+ id: 1,
+ text: textToEnter,
+ date: expect.any(Date),
+ }),
+ ])
+ );
});
diff --git a/examples/redux/components/TodoList.test.js b/examples/redux/components/TodoList.test.js
index a8418f46b..cd7f1c86b 100644
--- a/examples/redux/components/TodoList.test.js
+++ b/examples/redux/components/TodoList.test.js
@@ -1,57 +1,34 @@
import * as React from 'react';
-import { Provider } from 'react-redux';
-import { fireEvent, render } from '@testing-library/react-native';
-import configureStore from '../store';
+import { screen, fireEvent } from '@testing-library/react-native';
+import { renderWithRedux } from '../test-utils';
import TodoList from './TodoList';
-describe('Application test', () => {
- test('it should execute with a store with 4 elements', () => {
- const initialState = {
- todos: [
- { id: 1, text: 'Sing something', date: new Date() },
- { id: 2, text: 'Dance something', date: new Date() },
- { id: 3, text: 'Sleep something', date: new Date() },
- { id: 4, text: 'Sleep something', date: new Date() },
- ],
- };
- const store = configureStore(initialState);
+const initialState = {
+ todos: [
+ { id: 1, text: 'Sing something', date: new Date() },
+ { id: 2, text: 'Dance something', date: new Date() },
+ { id: 3, text: 'Sleep something', date: new Date() },
+ { id: 4, text: 'Sleep something', date: new Date() },
+ ],
+};
- const component = (
-
-
-
- );
+test('it should execute with a store with 4 elements', () => {
+ renderWithRedux(, { initialState });
- const { getAllByText } = render(component);
- const todoElems = getAllByText(/something/i);
-
- expect(todoElems.length).toEqual(4);
- });
-
- test('should execute with 2 elements and end up with 1 after delete', () => {
- const initialState = {
- todos: [
- { id: 1, text: 'Sing something', date: new Date() },
- { id: 2, text: 'Dance something', date: new Date() },
- ],
- };
- const store = configureStore(initialState);
-
- const component = (
-
-
-
- );
+ const todoElems = screen.getAllByText(/something/i);
+ expect(todoElems).toHaveLength(4);
+});
- const { getAllByText } = render(component);
- const todoElems = getAllByText(/something/i);
+test('should execute with 2 elements and end up with 1 after delete', () => {
+ renderWithRedux(, { initialState });
- expect(todoElems.length).toBe(2);
+ const todoElems = screen.getAllByText(/something/i);
+ expect(todoElems.length).toBe(4);
- const buttons = getAllByText('Delete');
- expect(buttons.length).toBe(2);
+ const buttons = screen.getAllByText('Delete');
+ expect(buttons).toHaveLength(4);
+ fireEvent.press(buttons[0]);
- fireEvent.press(buttons[0]);
- expect(getAllByText('Delete').length).toBe(1);
- });
+ const buttonsAfterDelete = screen.getAllByText('Delete');
+ expect(buttonsAfterDelete).toHaveLength(3);
});
diff --git a/examples/redux/jest-setup.js b/examples/redux/jest-setup.js
new file mode 100644
index 000000000..66e9c6598
--- /dev/null
+++ b/examples/redux/jest-setup.js
@@ -0,0 +1,2 @@
+// Silence the warning: Animated: `useNativeDriver` is not supported because the native animated module is missing
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
diff --git a/examples/redux/jest.config.js b/examples/redux/jest.config.js
new file mode 100644
index 000000000..f8947ca3a
--- /dev/null
+++ b/examples/redux/jest.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+ preset: '@testing-library/react-native',
+ setupFiles: ['./jest-setup.js'],
+};
diff --git a/examples/redux/package.json b/examples/redux/package.json
index 483888439..d1c531764 100644
--- a/examples/redux/package.json
+++ b/examples/redux/package.json
@@ -2,25 +2,22 @@
"name": "redux-example",
"description": "Testing Redux interactions with RNTL",
"version": "0.0.1",
+ "private": true,
"scripts": {
"test": "jest"
},
"dependencies": {
- "react": "~16.9.0",
- "react-native": "~0.61.5",
+ "react": "~18.0.0",
+ "react-native": "~0.69.2",
"react-redux": "^7.2.0",
"redux": "^4.0.5"
},
"devDependencies": {
- "@babel/core": "^7.8.6",
- "babel-jest": "~25.2.6",
- "jest": "~25.2.6",
- "metro-react-native-babel-preset": "^0.59.0",
- "@testing-library/react-native": "^7.0.0-rc.0",
- "react-test-renderer": "~16.9.0"
- },
- "private": true,
- "jest": {
- "preset": "react-native"
+ "@babel/core": "^7.9.0",
+ "@testing-library/react-native": "^11.0.0",
+ "@types/jest": "^28.0.0",
+ "jest": "^28.0.0",
+ "metro-react-native-babel-preset": "^0.70.0",
+ "react-test-renderer": "^18.0.0"
}
}
diff --git a/examples/redux/test-utils.js b/examples/redux/test-utils.js
new file mode 100644
index 000000000..7256458d6
--- /dev/null
+++ b/examples/redux/test-utils.js
@@ -0,0 +1,11 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import { render } from '@testing-library/react-native';
+import configureStore from './store';
+
+export function renderWithRedux(ui, options) {
+ const store = options?.store ?? configureStore(options?.initialState);
+ const queries = render({ui});
+ return { ...queries, store };
+}