React End-to-End testing made easy with Cypress

ReactJS, no doubt, is the most popular web development library. ReactJS provided the solution that developers were looking for. It uses JSX (a unique syntax that allows HTML quotes as well as HTML tag syntax application for rendering specific subcomponents).

Part of this huge popularity comes from the fact that top corporations such as Facebook, PayPal, Uber, Instagram, and Airbnb use it to solve user interface related issues. This credibility has drawn a lot of people to the framework.

If you are a React Developer, you already know what are the key pillars of React. But, if you are a Quality Engineer and mostly focusing on the testing part of it, I highly suggest having some idea about React development.

Key highlights of React

• JSX is one of the greatest features that not only make ReactJS easy but fun too. Developers can easily make a new UI feature and see it appear in real-time. Point to be noted, developers do not write HTML directly.
• Components allow developers to break down complex UI. Instead of worrying about the entire web app, it makes it possible to break the complex UI/UX development into simpler components.
• Props make it possible to populate components using custom data. Props in ReactJS make it possible to pass the custom data to a specific UI component.
• State makes it possible to store all the changes in one section. When using ReactJS, developers take all the content that can change during the application and place it in a single location (State).

So, What’s the challenge in automation?

JEST and Enzyme greatly help developers to unit test REACT apps with the famous snapshot testing. Even, cypress-react-unit-test library getting buzz among the developers to perform react component testing. But, automation testers have been struggling a lot while it comes to the UI automation testing of the REACT web pages.

REACT in combination with different styling libraries (like Material UI), produces dynamic classes and HTML structure. So, identifying web elements using class or ids is highly challenging due to the dynamic generation of HTML DOM. Sometimes, just for the shake of testing, developers need to inject some custom attributes to the components. But, doing so, developers trapped themselves in a conscious boundary every time they render React components.

So, as an automation engineer, there are numerous challenges you need to tackle:

• Frequent maintenance of the test suite due to changing HTML DOM.
• Flaky test cases emphasize lesser importance to test automation process
• Forcing developers every time to inject custom attributes

Let’s connect the dots

Although the HTML part is dynamic, the part which likely to be Non-Dynamic in React is REACT Component and Props. So, what if I tell you that there is a cypress plugin to identify web elements in a way that is more native to React.

cypress-react-selector is a lightweight plugin to help you to locate web elements in your REACT app using components, props, and states.

Install the plugin

• Add as a dependency (or dev-dependency)

npm i -D cypress-react-selector

• Include the commands in plugin section

Update Cypress/support/index.js file to include the cypress-react-selector commands by adding:

import 'cypress-react-selector';

Exposed commands

This library has many commands specifically designed for React application.

How to use cypress-react-selector?

Suppose you have a React Formik Form component, like:

you can now identify web elements using cy.react command and interact with the element seamlessly

This will result in

So, you are not depending upon any DOM attributes like class, id, etc. Even if the developer renders the JSX differently, if the component and props are un-changed, your test will not fail.

You can check out the entire example of automating react formik forms here

Level up the unit testing game

cypress-react-unit-test is a great companion to component test your React app in the context of a real browser. You need to mount your react component in the cypress test and cypress will take care of the rest. You can very much use any cypress functionality (live GUI, full API, screen recording, CI support, cross-platform, and visual testing).

Let’s take the example of react-book

Now, you can unit test this component combining both library — cypress-react-unit-test and cypress-react-selector

Write smarter E2E tests

It is very much possible that the development of the react application happening in silos and you, an automation engineer, have no idea about the source code of the application. In an ideal agile team, this situation should not happen. But, we live in a world that is more practical and experimental. Sometimes, organizations do have different automation team that usually works with the regression suite.

Even if, you do not have access to the source code, you can very much identify the component name, props, and state with the help of Chrome-React-Dev-Tools. If you use the tool wisely, you can fetch every possible detail about any react component, even if the component is a styled component.

Let’s take an example of the React-Calculator app and just for a moment assume we do not have any access to the source code.

Check out the demo below how I have used the react dev tools plugin to identify the number 5 element.

you can write the tests with the details you fetched:

Parking Lot

I hope, you can now write more robust test cases and bring the faith of your team back to your automation suite. Either you are a developer or a tester, you can write test cases in a language that React understands!

And in case you don’t know, you can clap up to 50 times! ^^