https://github.com/bahmutov/reactnativetodo
Example testing ReactNative Todo app using Cypress
https://github.com/bahmutov/reactnativetodo
cypress-react-native-example
Last synced: 9 months ago
JSON representation
Example testing ReactNative Todo app using Cypress
- Host: GitHub
- URL: https://github.com/bahmutov/reactnativetodo
- Owner: bahmutov
- Created: 2021-06-19T20:22:22.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2024-05-22T03:34:43.000Z (about 2 years ago)
- Last Synced: 2024-05-22T04:32:46.212Z (about 2 years ago)
- Topics: cypress-react-native-example
- Language: JavaScript
- Homepage:
- Size: 6.14 MB
- Stars: 6
- Watchers: 2
- Forks: 7
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ReactNativeTodo
[![ci status][ci image]][ci url] [](https://percy.io/bahmutov/ReactNativeTodo)  [![renovate-app badge][renovate-badge]][renovate-app]
> Example testing ReactNative Todo app using Cypress
Read [Testing React Native Todo Application Using Cypress](https://glebbahmutov.com/blog/testing-rn-todo-app/)
For general advice on testing the ReactNative apps running using Expo using [Cypress.io](https://www.cypress.io) test runner, read [The Complete Guide to Testing React Native App Using Cypress](https://glebbahmutov.com/blog/testing-react-native-app-using-cypress/).
## Add Expo
First, let's add [Expo](https://docs.expo.io/guides/running-in-the-browser/) to this project to be able to work with the RN app in the browser. Follow the example in [bahmutov/react-native-to-expo](https://github.com/bahmutov/react-native-to-expo).
```text
# match the React DOM version to the React version
$ npm i -D expo expo-cli react-native-web react-dom@17.0.1 babel-preset-expo
+ react-dom@17.0.1
+ react-native-web@0.17.0
+ expo-cli@4.5.2
+ expo@41.0.1
+ babel-preset-expo@8.3.0
```
Then I started using Expo icons and fonts to make sure the app looks in the browser the same as on iOS.
## The server
The TODO API server is in the folder [server](./server). To start it at port 3000 run `npm run start:server`.
## Cypress tests
See the tests in [cypress/integration](./cypress/integration) folder.
To start the server, the Expo app, and Cypress use:
```text
$ npm run dev
```
## Visual tests
Using Percy.io, see [](https://percy.io/bahmutov/ReactNativeTodo)
## Attribution
This code was originally copied from [stassop/ReactNativeTodo](https://github.com/stassop/ReactNativeTodo). The original unit and integration tests were described in the blog post [Quick Guide to React Native Testing](https://stassop.medium.com/quick-guide-to-react-native-testing-a5a830223c9e) by [Stanislav Sopov](https://github.com/stassop).
[ci image]: https://github.com/bahmutov/ReactNativeTodo/workflows/e2e/badge.svg?branch=main
[ci url]: https://github.com/bahmutov/ReactNativeTodo/actions
[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
[renovate-app]: https://renovateapp.com/