readme update

README.md

@@ -2,7 +2,7 @@
   <img alt="banner" src="https://github.com/vanGalilea/react-native-testing/assets/25864161/fd4d5148-4c8d-4fbc-8ebf-367d72da4fcb">
 </p>
 
-## No More Hacks and Headaches | Learn How to Test Your Components Before Your Users Will 
+## No More Hacks and Headaches <> Learn How to Test Your Components Before Your Users Will 
 
 [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=vanGalilea_react-native-testing&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=vanGalilea_react-native-testing)
 [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=vanGalilea_react-native-testing&metric=coverage)](https://sonarcloud.io/summary/new_code?id=vanGalilea_react-native-testing)
@@ -11,16 +11,17 @@
 
 ### Covered Examples 🎞
 - 👆 [Clicking buttons and asserting onPress' outcome](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-cli-app/__tests__/Counter.test.tsx).
-- 📲 [Filling a simple login form and asserting successful submission](https://github.com/vanGalilea/react-native-testing/blob/master/__tests__/LoginSubmission.test.tsx).
-- 🎣 [Custom hook testing (number of alternatives)](https://github.com/vanGalilea/react-native-testing/blob/master/__tests__/CounterUsesCustomHook.test.tsx).
-- 📡 [Mocking fetch calls](https://github.com/vanGalilea/react-native-testing/blob/master/__tests__/LoginSubmission.test.tsx#L36).
-- 🧭 [Mocking navigation through screens](https://github.com/vanGalilea/react-native-testing/blob/master/__tests__/LoginSubmission.test.tsx#L13). ([react navigation v5](https://reactnavigation.org/))
-- 🔚 [E2E feel due to real navigation throughout screens](https://github.com/vanGalilea/react-native-testing/blob/master/__tests__/Home.test.tsx).
-- 📥 [Handling and mocking providers](https://github.com/vanGalilea/react-native-testing/blob/master/src/test/test-utils.tsx).
-- 📹 [Mocking external lib.'s components](https://github.com/vanGalilea/react-native-testing/blob/master/__tests__/Video.test.tsx).
-- 🎭 [Mocking and interacting with RN's Modal component](https://github.com/vanGalilea/react-native-testing/blob/master/__tests__/Modal.test.tsx).
-- 🧾 [Handling with a screen with RN's FlatList component](https://github.com/vanGalilea/react-native-testing/blob/master/__tests__/FlatList.test.tsx).
-- 📡 [Using MSW to mock api calls and handling loading/errors](https://github.com/vanGalilea/react-native-testing/blob/master/__tests__/ListWithFetch.test.tsx).
+- 📲 [Filling a simple login form and asserting successful submission](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-cli-app/__tests__/LoginSubmission.test.tsx).
+- 🎣 [Custom hook testing (number of alternatives)](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-cli-app/__tests__/CounterUsesCustomHook.test.tsx).
+- 📡 [Mocking fetch calls](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-cli-app/__tests__/LoginSubmission.test.tsx#L36).
+- 🧭 [Navigating through screens with React Navigation](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-cli-app/__tests__/LoginSubmission.test.tsx#L13).
+- 🚟 [Navigating through screens with Expo Router](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-expo-app/__tests__/app/index.test.tsx).
+- 🔚 [E2E feel due to real navigation throughout screens](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-cli-app/__tests__/Home.test.tsx).
+- 📥 [Handling and mocking providers](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-cli-app/src/test/test-utils.tsx).
+- 📹 [Mocking external lib.'s components](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-cli-app/__tests__/Video.test.tsx).
+- 🎭 [Mocking and interacting with RN's Modal component](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-cli-app/__tests__/Modal.test.tsx).
+- 🧾 [Handling with a screen with RN's FlatList component](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-cli-app/__tests__/FlatList.test.tsx).
+- 📡 [Using MSW to mock api calls and handling loading/errors](https://github.com/vanGalilea/react-native-testing/blob/main/apps/rn-cli-app/__tests__/ListWithFetch.test.tsx).
 
 ### Tools in use 🛠️
 - [Jest](https://jestjs.io/)
@@ -31,25 +32,39 @@
 - [RN- Setting up the development environment](https://reactnative.dev/docs/environment-setup)
 - [Installing Maestro](https://maestro.mobile.dev/getting-started/installing-maestro)
 
-### How to run the tests 🏃‍♀️
-- Clone the repo
+## Getting Started 🚀
+- Clone the repo ` git clone [email protected]:vanGalilea/react-native-testing.git`
 - Run `yarn` to install dependencies
+- Explore RN CLI app and/or Expo app's tests and source code that are relevant to your use case.
+
+
+## RN CLI application
+### How to run the tests 🏃‍♀️
+- Run `cd apps/rn-cli-app` to navigate to the app folder
 - Run `yarn test:unit` to run the unit tests 
 - Run `yarn test:unit:dev` to run the unit tests in dev/watch mode
 - Run `yarn test:unit:coverage` to run the tests and generate a coverage report
+
+Make sure you have built and run the app in dev mode before running the e2e tests.
 - Run `yarn test:e2e` to run the e2e tests
 - Run `yarn test:e2e:dev` to run the e2e tests in dev/watch mode
 - Run `yarn test:e2e:record` to run the e2e tests and record a video of the tests
 
 ### How to run the app 📱
-- Clone the repo
-- Run `yarn` to install dependencies
+- Run `cd apps/rn-cli-app` to navigate to the app folder
 - Run `npx pod-install` to install iOS dependencies
 - Run `yarn start` to start the metro bundler
 - Click `i` to run the app on iOS simulator or `a` to run it on Android emulator
 
-### Ideas and future improvements 🚀
-- ⚛️ Add tests for react native web project
+## Expo application
+### How to run the tests 🏃‍♀️
+- Run `cd apps/rn-expo-app` to navigate to the app folder
+- Run `yarn test:unit` to run the unit tests
+
+### How to run the app 📱
+- Run `cd apps/rn-expo-app` to navigate to the app folder
+- Run `yarn start` to start the metro bundler
+- Click `i` to run the app on iOS simulator or `a` to run it on Android emulator
 
 ### Inspiration, resources and further reading 📚
 - 📑 A blog by [Steve Galili]([url](https://github.com/vanGalilea)) on ["Where and How to Start Testing Your React Native App"](https://medium.com/@stevegalili/where-and-how-to-start-testing-your-react-native-app-%EF%B8%8F-and-how-to-keep-on-testin-ec3464fb9b41)
@@ -61,7 +76,6 @@ For more info check [Epic React](https://epicreact.dev/).
 - 🗺 [React Navigation](https://reactnavigation.org/)
 - 🛰 [MSW](https://mswjs.io/)
 
-### Impression of the the project 📸
-
+### Impression of the project 📸
 https://github.com/vanGalilea/react-native-testing/assets/25864161/cdb6cdc7-7b28-4ecd-819f-52dd3c3d76c8
 

apps/rn-cli-app/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {NavigationContainer} from '@react-navigation/native';
+import {NavigationContainer, useNavigation} from '@react-navigation/native';
 import {
   createStackNavigator,
   StackNavigationProp,
@@ -13,7 +13,7 @@ import {ThemeProvider} from './src/utils/theme';
 import ListWithFetch from './src/components/ListWithFetch';
 import LoginSubmission from './src/components/LoginSubmission';
 import Counter from './src/components/Counter';
-import {Alert} from 'react-native';
+import {Alert, Pressable, Text} from 'react-native';
 
 export type RootStackParamList = {
   Home: undefined;
@@ -53,7 +53,7 @@ export default () => {
           <Stack.Navigator
             initialRouteName="Home"
             screenOptions={{
-              headerBackTestID: 'go-back-home-button',
+              headerLeft: HeaderLeft,
             }}>
             <Stack.Screen name={SCREENS.HOME} component={Home} />
             <Stack.Screen name={SCREENS.LOGIN} component={LoginSubmission} />
@@ -75,3 +75,18 @@ export default () => {
     </>
   );
 };
+
+const HeaderLeft = () => {
+  const navigation = useNavigation();
+  if (!navigation.canGoBack()) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      testID={'go-back-home-button'}
+      onPress={() => navigation.goBack()}>
+      <Text style={{fontSize: 24}}>←</Text>
+    </Pressable>
+  );
+};

apps/rn-cli-app/ios/Podfile.lock

@@ -1126,8 +1126,6 @@ PODS:
     - React-Core
   - RNCMaskedView (0.1.11):
     - React
-  - RNFlashList (1.6.3):
-    - React-Core
   - RNGestureHandler (2.14.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
@@ -1216,7 +1214,6 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../../../node_modules/@react-native-community/async-storage`)"
   - "RNCMaskedView (from `../../../node_modules/@react-native-community/masked-view`)"
-  - "RNFlashList (from `../../../node_modules/@shopify/flash-list`)"
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNScreens (from `../../../node_modules/react-native-screens`)
   - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
@@ -1343,8 +1340,6 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/@react-native-community/async-storage"
   RNCMaskedView:
     :path: "../../../node_modules/@react-native-community/masked-view"
-  RNFlashList:
-    :path: "../../../node_modules/@shopify/flash-list"
   RNGestureHandler:
     :path: "../../../node_modules/react-native-gesture-handler"
   RNScreens:
@@ -1418,7 +1413,6 @@ SPEC CHECKSUMS:
   ReactCommon: ddb128564dcbfa0287d3d1a2d10f8c7457c971f6
   RNCAsyncStorage: b03032fdbdb725bea0bd9e5ec5a7272865ae7398
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
-  RNFlashList: 4b4b6b093afc0df60ae08f9cbf6ccd4c836c667a
   RNGestureHandler: 25b969a1ffc806b9f9ad2e170d4a3b049c6af85e
   RNScreens: b582cb834dc4133307562e930e8fa914b8c04ef2
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17

apps/rn-cli-app/package.json

@@ -10,9 +10,9 @@
     "test:unit": "jest",
     "test:unit:dev": "jest --watch",
     "test:unit:coverage": "jest --coverage",
-    "test:e2e": "maestro test e2e/flow.yaml",
-    "test:e2e:dev": "maestro test -c e2e/flow.yaml",
-    "test:e2e:record": "maestro record e2e/flow.yaml"
+    "test:e2e": "maestro test .maestro/flow.yaml",
+    "test:e2e:dev": "maestro test -c .maestro/flow.yaml",
+    "test:e2e:record": "maestro record .maestro/flow.yaml"
   },
   "dependencies": {
     "@react-native-community/async-storage": "^1.12.1",

apps/rn-expo-app/.gitignore

@@ -34,8 +34,3 @@ yarn-error.*
 # typescript
 *.tsbuildinfo
 
-# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
-# The following patterns were generated by expo-cli
-
-expo-env.d.ts
-# @end expo-cli