bahmutov / ReactNativeTodo

Example testing ReactNative Todo app using Cypress

ReactNativeTodo

Example testing ReactNative Todo app using Cypress

Read Testing React Native Todo Application Using Cypress

For general advice on testing the ReactNative apps running using Expo using Cypress.io test runner, read The Complete Guide to Testing React Native App Using Cypress.

Add Expo

First, let's add Expo to this project to be able to work with the RN app in the browser. Follow the example in bahmutov/react-native-to-expo.

# 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. To start it at port 3000 run npm run start:server.

Cypress tests

See the tests in cypress/integration folder.

To start the server, the Expo app, and Cypress use:

$ npm run dev

Visual tests

Using Percy.io, see

Attribution

This code was originally copied from stassop/ReactNativeTodo. The original unit and integration tests were described in the blog post Quick Guide to React Native Testing by Stanislav Sopov.