End-to-End (e2e) Automation Test in your React Application
It is no news that in recent times react has risen to be one of the most used front-end libraries for developing web applications.
It is therefore very important that we are able to catch bugs before our users whilst shipping products.
End-to-end tests allow us to catch bugs by mimicking the user journey using automated scripts.
Some popular automated tools that do this really well include Selenium, Test-Complete, Test-Cafe, Cucumber and the list goes on.
In this article, I would be dropping some tips on how to use Test-Cafe in a React application.
SETTING UP TEST-CAFE WITH REACT FOR SMALL PROJECTS
Installing TestCafe is easy. You can install it globally or locally on your React project:
yarn add testcafe or npm install testcafe
A quick way to get up and running is to add this line to your package.json scripts:
"e2e": "testcafe chrome tests/index.js -s screenshots"This line tells TestCafe what folder we would be writing our end-to-end test.
Note: For this to work, you would need to start your react application on one terminal buy running yarn start , while your application is up, you can then run yarn e2e on another terminal and this would fire up the end-to-end test script on a chrome browser.
Check out this repository where I did a simple create-react-app and TestCafe set-up:
https://github.com/seunzone/react-test-cafe
SETTING UP TEST-CAFE WITH REACT ON LARGE PROJECTS
It is advisable to set-up your TestCafe environment separate from your development environment when working on a large project. This allows the development team and quality assurance team to work separately.
You should also be writing your end-to-end test against a dedicated QA environment or staging environment. Avoid the temptation of writing end-to-end tests against your production environment.
The approach I just stated above would work for any web-based application, it doesn't have to be a React application alone.
WORKING WITH REACT SELECTORS
In your react project, simply:
yarn add testcafe-react-selectors`testcafe-react-selectors` is a great way to target the state and props of a React component. This package returns an object that contains the state and prop of a component. For more information on how this works, see the documentation here:
https://www.npmjs.com/package/testcafe-react-selectors and
https://github.com/DevExpress/testcafe-react-selectors
CONTINUOUS INTEGRATION
CircleCI and TravisCI are two of the most popular options organizations use for continuos deployment in an end-to-end test environment.
CircleCI, for example, allows you to run cronjobs hourly or daily allowing you to catch bugs in your application.
The CircleCI documentation gives more context to this.
To learn more about how to use Test-Cafe, check out the Documentation.
