From cec8875e05859571a27d78bf7d44b9b8530e0c72 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 26 Jul 2022 13:25:36 +0200 Subject: [PATCH 01/11] chore: update Redux example deps --- examples/redux/jest-setup.js | 2 ++ examples/redux/jest.config.js | 4 ++++ examples/redux/package.json | 21 +++++++++------------ 3 files changed, 15 insertions(+), 12 deletions(-) create mode 100644 examples/redux/jest-setup.js create mode 100644 examples/redux/jest.config.js 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..227d128b7 --- /dev/null +++ b/examples/redux/jest.config.js @@ -0,0 +1,4 @@ +module.exports = { + preset: 'react-native', + setupFiles: ['./jest-setup.js'], +}; diff --git a/examples/redux/package.json b/examples/redux/package.json index 483888439..a44f44d33 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", + "@types/jest": "^28.0.0", + "jest": "^28.0.0", + "metro-react-native-babel-preset": "^0.70.0", + "@testing-library/react-native": "^11.0.0", + "react-test-renderer": "^18.0.0" } } From 31d4e2abd1111fe09066ae23f2ccefd1346d6e69 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 26 Jul 2022 13:31:29 +0200 Subject: [PATCH 02/11] chore: update React Navigation deps --- examples/reactnavigation/jest.config.js | 2 +- examples/reactnavigation/package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/examples/reactnavigation/jest.config.js b/examples/reactnavigation/jest.config.js index ec9c1a2a0..bb1d4c383 100644 --- a/examples/reactnavigation/jest.config.js +++ b/examples/reactnavigation/jest.config.js @@ -2,6 +2,6 @@ module.exports = { preset: 'react-native', setupFiles: ['./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..bb09b81f0 100644 --- a/examples/reactnavigation/package.json +++ b/examples/reactnavigation/package.json @@ -12,8 +12,8 @@ "@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": "^18.0.0", + "react-native": "^0.69.2", "react-native-gesture-handler": "^1.6.1", "react-native-reanimated": "^1.8.0", "react-native-safe-area-context": "^0.7.3", From b8f564b9b47d5f792a2f45e72e61403e4b9f850e Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 26 Jul 2022 13:51:04 +0200 Subject: [PATCH 03/11] refactor: apply screen, cleanup --- examples/redux/components/AddTodo.test.js | 64 ++++++++--------- examples/redux/components/TodoList.test.js | 82 +++++++++------------- 2 files changed, 65 insertions(+), 81 deletions(-) diff --git a/examples/redux/components/AddTodo.test.js b/examples/redux/components/AddTodo.test.js index 7e3cdacfa..5f9fc8f74 100644 --- a/examples/redux/components/AddTodo.test.js +++ b/examples/redux/components/AddTodo.test.js @@ -1,40 +1,36 @@ import * as React from 'react'; import { Provider } from 'react-redux'; -import { fireEvent, render } from '@testing-library/react-native'; +import { render, screen, fireEvent } from '@testing-library/react-native'; import configureStore from '../store'; 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 test when entry has been included', () => { + const store = configureStore(); + + const component = ( + + + + ); + + render(component); + + 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.length).toEqual(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..5e78c394c 100644 --- a/examples/redux/components/TodoList.test.js +++ b/examples/redux/components/TodoList.test.js @@ -1,57 +1,45 @@ import * as React from 'react'; import { Provider } from 'react-redux'; -import { fireEvent, render } from '@testing-library/react-native'; +import { render, screen, fireEvent } from '@testing-library/react-native'; import configureStore from '../store'; 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 component = ( - - - - ); - - 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 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() }, + ], +}; + +test('it should execute with a store with 4 elements', () => { + const store = configureStore(initialState); + render( + + + + ); + + const todoElems = screen.getAllByText(/something/i); + expect(todoElems.length).toEqual(4); +}); - const { getAllByText } = render(component); - const todoElems = getAllByText(/something/i); +test('should execute with 2 elements and end up with 1 after delete', () => { + const store = configureStore(initialState); + render( + + + + ); - 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.length).toBe(4); + fireEvent.press(buttons[0]); - fireEvent.press(buttons[0]); - expect(getAllByText('Delete').length).toBe(1); - }); + const buttonsAfterDelete = screen.getAllByText('Delete'); + expect(buttonsAfterDelete.length).toBe(3); }); From c16da2a599f0824a10b348f39b25a53b4d4245f1 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 26 Jul 2022 14:00:05 +0200 Subject: [PATCH 04/11] chore: update deps, update AppNavigator tests --- examples/reactnavigation/jest-setup.js | 16 ++--- examples/reactnavigation/jest.config.js | 3 +- examples/reactnavigation/package.json | 25 ++++---- examples/reactnavigation/src/AppNavigator.js | 16 +++-- .../src/__tests__/AppNavigator.test.js | 48 ++++++--------- .../src/__tests__/DrawerAppNavigator.test.js | 60 +++++++++---------- 6 files changed, 78 insertions(+), 90 deletions(-) diff --git a/examples/reactnavigation/jest-setup.js b/examples/reactnavigation/jest-setup.js index baa4ed853..20dfb0fab 100644 --- a/examples/reactnavigation/jest-setup.js +++ b/examples/reactnavigation/jest-setup.js @@ -1,14 +1,14 @@ -import 'react-native-gesture-handler/jestSetup'; +// require('react-native-reanimated/lib/reanimated2/jestUtils').setUpTests(); -jest.mock('react-native-reanimated', () => { - const Reanimated = require('react-native-reanimated/mock'); +// 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 = () => {}; +// // The mock for `call` immediately calls the callback which is incorrect +// // So we override it with a no-op +// Reanimated.default.call = () => {}; - return Reanimated; -}); +// 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 bb1d4c383..cf84413dc 100644 --- a/examples/reactnavigation/jest.config.js +++ b/examples/reactnavigation/jest.config.js @@ -1,6 +1,7 @@ module.exports = { preset: 'react-native', - setupFiles: ['./jest-setup.js'], + // setupFiles: ['./node_modules/react-native-gesture-handler/jestSetup.js'], + setupFilesAfterEnv: ['./jest-setup.js'], transformIgnorePatterns: [ '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 bb09b81f0..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-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-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-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/AppNavigator.js b/examples/reactnavigation/src/AppNavigator.js index 0f9dcde6e..c532c92df 100644 --- a/examples/reactnavigation/src/AppNavigator.js +++ b/examples/reactnavigation/src/AppNavigator.js @@ -1,18 +1,22 @@ 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/__tests__/AppNavigator.test.js b/examples/reactnavigation/src/__tests__/AppNavigator.test.js index e6ac09c66..b3e0a33cf 100644 --- a/examples/reactnavigation/src/__tests__/AppNavigator.test.js +++ b/examples/reactnavigation/src/__tests__/AppNavigator.test.js @@ -1,41 +1,29 @@ import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; -import { render, fireEvent } from '@testing-library/react-native'; - +import { render, screen, 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); +/** Render helper that renders `ui` within `NavigationContainer`. */ +function renderWithNavigation(ui) { + return render({ui}); +} - const header = await findByText('List of numbers from 1 to 20'); - const items = await findAllByText(/Item number/); +test('page contains the header and 10 items', async () => { + renderWithNavigation(); - expect(header).toBeTruthy(); - expect(items.length).toBe(10); - }); + const header = await screen.findByText('List of numbers from 1 to 20'); + expect(header).toBeTruthy(); - test('clicking on one item takes you to the details screen', async () => { - const component = ( - - - - ); + const items = screen.getAllByText(/Item number/); + expect(items.length).toBe(10); +}); - const { findByText } = render(component); - const toClick = await findByText('Item number 5'); +test('clicking on one item takes you to the details screen', async () => { + renderWithNavigation(); - fireEvent(toClick, 'press'); - const newHeader = await findByText('Showing details for 5'); - const newBody = await findByText('the number you have chosen is 5'); + const toClick = await screen.findByText('Item number 5'); + fireEvent(toClick, 'press'); - expect(newHeader).toBeTruthy(); - expect(newBody).toBeTruthy(); - }); + 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/__tests__/DrawerAppNavigator.test.js b/examples/reactnavigation/src/__tests__/DrawerAppNavigator.test.js index c5a7e1ddf..8dfd51618 100644 --- a/examples/reactnavigation/src/__tests__/DrawerAppNavigator.test.js +++ b/examples/reactnavigation/src/__tests__/DrawerAppNavigator.test.js @@ -1,39 +1,39 @@ -import React from 'react'; -import { NavigationContainer } from '@react-navigation/native'; -import { render, fireEvent } from '@testing-library/react-native'; +// import React from 'react'; +// import { NavigationContainer } from '@react-navigation/native'; +// import { render, fireEvent } from '@testing-library/react-native'; -import DrawerAppNavigator from '../DrawerAppNavigator'; +// import DrawerAppNavigator from '../DrawerAppNavigator'; -describe('Testing react navigation', () => { - test('screen contains a button linking to the notifications page', async () => { - const component = ( - - - - ); +// 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'); +// const { findByText } = render(component); +// const button = await findByText('Go to notifications'); - expect(button).toBeTruthy(); - }); +// expect(button).toBeTruthy(); +// }); - test('clicking on the button takes you to the notifications screen', async () => { - const component = ( - - - - ); +// 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'); +// const { queryByText, findByText } = render(component); +// const oldScreen = queryByText('Welcome!'); +// const button = await findByText('Go to notifications'); - expect(oldScreen).toBeTruthy(); +// expect(oldScreen).toBeTruthy(); - fireEvent(button, 'press'); - const newScreen = await findByText('This is the notifications screen'); +// fireEvent(button, 'press'); +// const newScreen = await findByText('This is the notifications screen'); - expect(newScreen).toBeTruthy(); - }); -}); +// expect(newScreen).toBeTruthy(); +// }); +// }); From 35f660f5ec0f88f95a45692be47250a589998a00 Mon Sep 17 00:00:00 2001 From: Maciej Jastrzebski Date: Tue, 26 Jul 2022 14:04:09 +0200 Subject: [PATCH 05/11] refactor: remove drawer example as it does not add to overall example --- examples/reactnavigation/jest-setup.js | 12 ------ examples/reactnavigation/src/App.js | 1 - examples/reactnavigation/src/AppNavigator.js | 1 - .../src/{__tests__ => }/AppNavigator.test.js | 2 +- examples/reactnavigation/src/DrawerApp.js | 13 ------- .../reactnavigation/src/DrawerAppNavigator.js | 35 ----------------- .../src/__tests__/DrawerAppNavigator.test.js | 39 ------------------- .../reactnavigation/src/screens/HomeScreen.js | 2 +- 8 files changed, 2 insertions(+), 103 deletions(-) rename examples/reactnavigation/src/{__tests__ => }/AppNavigator.test.js (95%) delete mode 100644 examples/reactnavigation/src/DrawerApp.js delete mode 100644 examples/reactnavigation/src/DrawerAppNavigator.js delete mode 100644 examples/reactnavigation/src/__tests__/DrawerAppNavigator.test.js diff --git a/examples/reactnavigation/jest-setup.js b/examples/reactnavigation/jest-setup.js index 20dfb0fab..66e9c6598 100644 --- a/examples/reactnavigation/jest-setup.js +++ b/examples/reactnavigation/jest-setup.js @@ -1,14 +1,2 @@ -// require('react-native-reanimated/lib/reanimated2/jestUtils').setUpTests(); - -// 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/src/App.js b/examples/reactnavigation/src/App.js index 8e8c32806..0de6d8fe0 100644 --- a/examples/reactnavigation/src/App.js +++ b/examples/reactnavigation/src/App.js @@ -1,4 +1,3 @@ -import 'react-native-gesture-handler'; import React from 'react'; import { StatusBar, StyleSheet, View } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; diff --git a/examples/reactnavigation/src/AppNavigator.js b/examples/reactnavigation/src/AppNavigator.js index c532c92df..413b02630 100644 --- a/examples/reactnavigation/src/AppNavigator.js +++ b/examples/reactnavigation/src/AppNavigator.js @@ -1,6 +1,5 @@ import * as React from 'react'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; - import HomeScreen from './screens/HomeScreen'; import DetailsScreen from './screens/DetailsScreen'; diff --git a/examples/reactnavigation/src/__tests__/AppNavigator.test.js b/examples/reactnavigation/src/AppNavigator.test.js similarity index 95% rename from examples/reactnavigation/src/__tests__/AppNavigator.test.js rename to examples/reactnavigation/src/AppNavigator.test.js index b3e0a33cf..082d9edc7 100644 --- a/examples/reactnavigation/src/__tests__/AppNavigator.test.js +++ b/examples/reactnavigation/src/AppNavigator.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { render, screen, fireEvent } from '@testing-library/react-native'; -import AppNavigator from '../AppNavigator'; +import AppNavigator from './AppNavigator'; /** Render helper that renders `ui` within `NavigationContainer`. */ function renderWithNavigation(ui) { 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! -