friederbluemle/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.
• 🧭 Mocking navigation through screens. (react navigation v5)
• 🔚 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

How to run the tests 🏃‍♀️

• Clone the repo
• Run yarn to install dependencies
• 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
• 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 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

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 the project 📸

maestro-record.mp4