vanGalilea / react-native-testing

This is how you should test your react-native components with Jest and React Native Testing Library

No More Hacks and Headaches <> Learn How to Test Your Components Before Your Users Will

Covered Examples 🎞

• 👆 Clicking buttons and asserting onPress' outcome.
• 📲 Filling a simple login form and asserting successful submission.
• 🎣 Custom hook testing (number of alternatives).
• 📡 Mocking fetch calls.
• 🧭 Navigating through screens with React Navigation.
• 🚟 Navigating through screens with Expo Router.
• 🔚 E2E feel due to real navigation throughout screens.
• 📥 Handling and mocking providers.
• 📹 Mocking external lib.'s components.
• 🎭 Mocking and interacting with RN's Modal component.
• 🧾 Handling with a screen with RN's FlatList component.
• 📡 Using MSW to mock api calls and handling loading/errors.

Tools in use 🛠️

• Jest
• React Native Testing Library
• Maestro

Setup and requirements 📋

• RN- Setting up the development environment
• Installing Maestro

Getting Started 🚀

• Clone the repo git clone [e-mail]: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 📱

• 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

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 on "Where and How to Start Testing Your React Native App"
• 👏 Inspired by Kent C. Dodds' workshop Test React Components with Jest and React Testing Library. For more info check Epic React.
• 📕 React Native Testing Library
• 🧑‍🔬️ Jest
• ️⚛️ React Native
• 🗺 React Navigation
• 🛰 MSW

Impression of the project 📸

maestro-record.mp4