End-to-end testing (E2E) was always a tedious task with testing frameworks from the past. However, nowadays many people are using Cypress.io for it. Their documentation has a high quality and their API is concise and clean. Letâs use Cypress for this React testing tutorial series. First, you have to install it on the command line to your dev dependencies:
Second, create a dedicated folder for Cypress and its E2E tests in your project folder. It comes with its given folder structure :
Third, add a script for npm to your package.json file. That way, you are able to run Cypress easily from the command line:
Afterward, run Cypress for the first time:
It opens up a window which indicates that you donât have any tests yet: âNo files found inâ.
Now, for your new Cypress cypress/integration/ folder, create a end-to-end testing file for your App component.
Next, add your first test to it. Itâs not really an end-to-end test, but only the simplest assertion you can make to verify that Cypress is working for you.
You might already know the âdescribeâ- and âitâ-blocks which enable you to encapsulate your tests in blocks. These blocks are coming from Mocha, which is used by Cypress, under the hood. The assertions such as expect() are used from Chai. âCypress builds on these popular tools and frameworks that you hopefully already have some familiarity and knowledge of.â
Now you can run Cypress again on the command line:
You should see the following output now. Cypress finds your test and you can either run the single test by clicking it or run all of your tests by using their dashboard.
Run your test and verify that true is equal to true. Hopefully it turns out to be green for you. Otherwise there is something wrong. In contrast, you can checkout a failing end-to-end test too.
If you want, you can change the script slightly for Cypress to run every test by default without opening the additional window.
As you can see, when you run Cypress again on the command line, all your tests should run automatically. In addition, you can experience that there is some kind of video recording happening. The videos are stored in a folder for you to experience your tests first hand. You can also add screenshot testing to your Cypress end-to-end tests. Find out more about the video and screenshot capabilities of Cypress.io . You can suppress the video recording in your Cypress configuration file in your project folder. It might be already generated by Cypress for you, otherwise create it on the command line from your root folder:
Now, in the Cypress configuration file, add the video flag and set it to false.
In case you want to find out more about the configuration capabilities of Cypress, checkout their documentation .
Eventually you want to start to test your implemented React application with Cypress. Since Cypress is offering end-to-end testing, you have to start your application first before visiting the website with Cypress. You can use your local development server for this case.
But how to run your development server, in this case webpack-dev-server, before your Cypress script? There exists a neat library which you can use to start your development server before Cypress. First, install it on the command line for your dev dependencies:
Second, add it to your package.json fileâs npm scripts. The library expects the following script pattern: <start script name> <url> <test script name> .
Finally, you can visit your running application with Cypress in your end-to-end test. Therefore you will use the global cy cypress object. In addition, you can also add your first E2E test which verifies your header tag (h1) from your application.
Basically, thatâs how a selector and assertion in Cypress work. Now run your test again on the command line. It should turn out to be successful.
A best practice in Cypress testing is adding the base URL to your cypress.json configuration file. Itâs not only to keep your code DRY, but has also performance impacts.
Afterward, you can remove the URL from your single E2E test. It always takes the given base URL now.
The second E2E test you are going to implement will test the two interactive buttons in your React application. After clicking each button, the counter integer which is shown in the paragraph tag should change. Letâs begin by verifying that the counter is 0 when the application just started.
Now, by interacting with the buttons , you can increment and decrement the counter.
Thatâs it. You have written your first two E2E tests with Cypress. You can navigate from URL to URL, interact with HTML elements and verify rendered output. Two more things: