refactor: update example apps (#1024)

Author: mdjastrzebski

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');

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)',
   ],
 };

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"
   }
 }

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() {

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 (
-    <Navigator>
-      <Screen name="Home" component={HomeScreen} />
-      <Screen options={options} name="Details" component={DetailsScreen} />
-    </Navigator>
+    <Stack.Navigator>
+      <Stack.Screen name="Home" component={HomeScreen} />
+      <Stack.Screen name="Details" component={DetailsScreen} />
+    </Stack.Navigator>
   );
 }

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(<AppNavigator />);
+
+  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(<AppNavigator />);
+
+  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();
+});

examples/reactnavigation/src/DrawerApp.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 (
     <View>

examples/reactnavigation/src/DrawerAppNavigator.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(<NavigationContainer>{ui}</NavigationContainer>);
+}

examples/reactnavigation/src/__tests__/AppNavigator.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 = (
-      <Provider store={store}>
-        <AddTodo />
-      </Provider>
-    );
-
-    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(<AddTodo />);
+
+  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),
+      }),
+    ])
+  );
 });