How to Test React using Cypress

is a potent fabric forReact applications. It volunteer fast, honest, and easy-to-write tests. It cater real-time performance, reflex waits, and a user-friendly API, making it ideal for testing React components, UI interactions, and user flows.

This guide covers how to set up and run Cypress test for React applications expeditiously.

What is ReactJS?

ReactJS (popularly known as React) is a web application framework. React is a Javascript-based open-source framework and library acquire by Facebook (Meta). It is used to germinate frontend user interfaces apace and expeditiously with less code.

React fabric provides independent reusable components using which one can germinate application-specific, later these components are grouped together to make the entire user interface of the application.

Why are React Applications so democratic?

Most organizations adopt the where the application features are developed and delivered in an iterative approach, as refer earlier the React model follows the component-driven approaching the independent components can be built and tested. React fits best in an Agile surroundings and eventually facilitate in fast application delivery.

The ReactJS Stats

As of February 2025, theReact GitHubrepository statistics are:

• Used by: 27.1 million repositories
• Contributors: 1,688
• Stars: 233,000
• Forks: 47,700

ReactJS movement by Google Trends

ReactJS now has millions of users worldwide and is still counting. React is democratic because of its frequent and stable freeing, simpleness to use, ease of integration, and customization. React has become the first choice of many governance.

Testing React Applications

Unlike old-style MVC applications the ReactJS coating uses dynamic content loading, the examiner may find difficulty in automate with an old age framework which was principally designed for MVC and subsequently enhanced to modern applications. However, modern examination creature like Cypress, and Playwright can automatize ReactJS applications more easily without any hassle.

What is Cypress?

Cypress is a Javascript-based open-source test automation creature, designed for modern web coating mechanization testing. Cypress is popular due to its simplicity in nature, it shares some unique features like advanced debugging, automatic waiting, mocking net requests, etc.

Cypress indorse many browsers like Chrome, Edge, Electron, and Firefox. The recent update shows that they are experimenting with Safari & # 8217; s open-source variation which is a WebKit browser. One of the major advantages of Cypress is Cypress pass in the same environment where your coating runs so you can have control over your application during test execution.

Why use Cypress for testing react covering?

React is a modern web application framework, unlike old-style MVC coating React uses a special mechanism to render DOM contents which makes several automation tools end up with flaky tryout and adds more slowness during execution. Enhancing an old-age mechanisation framework to support React is time-consuming and requires skilful cognition in programming language and architecture.

Cypress fits best in testing react-based application as it knows how to manipulate mod DOM message. Cypress comes with a altogether different architecture in comparison with popular selenium-based frameworks. Using Cypress for your React coating makes automation tests more stable, authentic, and effective.

How to test React applications using Cypress?

Cypress is an easy to use tool, setting up Cypress for react covering quicker and easier.

Pre-requisites:

• Download and Install NodeJS
• Download and Install VSCode (Optional and Recommended)

Step 1: Create package.json

Use the below command to create package.json

npm init

The package.jsonaid to track all installed dependencies and its version, with the modern setup you can besides configure the shortcuts for building and execute the command

Step 2: Install Cypress

Cypress is shipped as a NodeJS packet, you can use the npm command to install the Cypress

npm install cypress -- save-dev

The above command will install the cypress locally in your task pamphlet.

Step 3: Unfastened Cypress

When you install Cypress for the 1st time, cypress needs to create all required project folders and do the initial set up. Cypress unfastened bid does all these.

npx cypress open

Step 4: Configuring Cypress

Once you type the cypress open command, the Cypress window opens and asks you to choose a set of options, choose as per your project requirements below is the example.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Step 5: Choose the Test Type

The welcome window shows two different types of examination, End to End Testing and Component Testing in this case you are performing UI end-to-end testing so you can choose the exam type as End to End Tests

Step 6: Review the Configuration File and proceed

The Cypress window shows that there are a set of configuration files that Cypress will make by nonpayment, you can review the files and Click on Continue.

Step 7: Choose a browser

You can choose from the available browser, Cypress gathers information from all installed browsers in your System. If it support the Browser case and browser version then it lists in the Choose a browser section. For simplicity, prefer Chrome browser and Click on Start End to end Testing using Chrome.

Step 8: Create First Spec window

Since you get created the refreshful framework, you need to create the 1st spec, this also helps to verify if Cypress is installed correctly and capable to run our automated tests.

• Click on Create a New Spec
• Enter any name (Example:react-demo.cy.js)
• Click on Okay, run the Spec

Our Cypress framework is now configured!. Learn more about building your

Pro-Tip: For best accuracy, it is recommended to run React Cypress Tests on Real device and browser using. This will help you run tests under existent user weather for delivering a good user experience.

Understand ReactJS quiz with a elementary scenario

• Navigate tohttps: //reactjs.org/
• In the Demo Todo constituentadd the todo particular
• Validate the result if todo items are added aright

Creating your first React Application Test with Cypress

As part of the setup you have already created one spec file which isreact-demo.cy.jswhich is site in thecypress/e2e/pamphlet, Navigate to that folder and alter the code.

The & # 8220;describe & # 8221;block is a container of tests, you can think of the & # 8220; describe & # 8221; cube as a tryout suite. Provide the relevant name to describe the block

In this representative interacting with the to-do list, change the “ describe ” cube to “ React todo example ”.

The & # 8220; it & # 8221; cube contains actual test instance, individual tryout instance are placed inside it hinder, considering our use case update it block as & # 8220; Should add and verify todo list & # 8221;

The & # 8220; it & # 8221; block contains the actual test hand, so you demand to add the cypress codification inside the & # 8220; it & # 8221; cube.

//react-demo.cy.js describe ('React todo model ', () = & gt; {it ('Should add and verify todo list ', () = & gt; {cy.visit ('https: //reactjs.org/ '); cy.get (' # new-todo ') .type (`` My first todo point ''); cy.get (' # new-todo ') .siblings ('button ') .click (); cy.get (' # new-todo ') .type (`` My 2d todo point ''); cy.get (' # new-todo ') .siblings ('button ') .click (); cy.get ('div [id = `` todos-example ''] & gt; div & gt; ul & gt; li ') .eq (0) .should ('have.text ', 'My first todo item ') cy.get ('div [id = `` todos-example ''] & gt; div & gt; ul & gt; li ') .eq (1) .should ('have.text ', 'My second todo item ')})}

• cy.visit (): The cy.visit ()performs the navigation functions, as we have added value ashttps: //reactjs.org/it navigates to the web page.
• cy.get():This cypress command find the element in the DOM tree, here we are giving the id selector which is#new-todoit finds the element.
• .type():The type dictation is chained withcy.get()which means the cypress find the element and type the specified schoolbook on it
• .click():The click command is chained withcy.get()which means the cypress happen the elements and clicks on it
• .should ():The .should () is an affirmation it validates specified values, in our causa we are validating text should be & # 8216; My maiden todo item & # 8217;

Talk to an Expert

Execute Cypress React tests

Cypress react exam can be accomplish in two style

• Using command line
• Using Cypress window user interface

Execute Cypress tests using the Command Line

Syntax:

npx cypress run -- browser & lt; browser_name & gt; -- spec & lt; spec_file & gt;

Example:

npx cypress run -- browser chrome -- spec './cypress/e2e/react-demo.cy.js '

Execute Cypress examination employ the Cypress Window

• Enter the commandnpx cypress open
• Click on End to End quiz
• Choose the browser and Start
• Click on the test name (example,react-demo.cy.js)

Output:

Take another exemplar of React Calculator operation

1. Navigate tohttps: //ahfarmer.github.io/calculator/
2. Perform add-on operation on a calculator
3. Enter 7 + 9
4. Verify the Result should be 16

Source code

//react-demo.cy.js describe ('React calculator example ', () = & gt; {it ('Should formalise addition operation ', () = & gt; {cy.visit ('https: //ahfarmer.github.io/calculator/ '); cy.get ('button ') .contains (' 7 ') .click (); cy.get ('button ') .contains (/^\+ $ /) .click (); cy.get ('button ') .contains (' 9 ') .click (); cy.get ('button ') .contains ('= ') .click (); cy.get ('div [class= '' component-display ''] & gt; div ') .should ('have.text ', '16 ')})})

In the above example, we are voyage tohttps: //ahfarmer.github.io/calculator/by using cy.visit (). Then utilize thecy.get() and cy.click ()we are performing click actions on the calculator button. Using the.should()we are verifying the addition operation.

Now, we get two examination inside thereact-todo.cy.js. Let ’ s execute and see the result

Component Testing in Cypress

Component testing aid to test individual factor of application. This method get the growth faster and helps to develop individual bug gratis part. Unlike End to end testing the component testing focuses on smaller or group of features, the user journeying is not prove rather the component functionality is validated against the requirements.

The and above allows users to perform the element prove. The article helps you to explore more.

Cypress Testing Best Practices

Here are some of the:

• Use programmatic login to direct control of the application state
• Whenever possible usedata-*property to select the constituent
• If you want to verify the text on the application use thecy.contains ()
• Use the beforeEach (), afterEach ()block to add the partake codification which is required for every test
• Cypress automatically look for elements, do not add the delay unless it is ask
• Use assertions for every trial to label the tryout as fail or pass
• Focus each test on a single scenario

Conclusion

Modern development frameworks like React speed application development in an agile environs, but can delay delivery. Cypress enhances automation, ensuring faster and more efficient testing.

However, for comprehensive cross-platform and mark testing, Cypress alone may not be plenty. A cloud-based testing resolution like ensures seamless test across multiple browsers, versions, and devices without substructure overhead.

With, integration, and cross-browser support, insure tight, scalable, and high-quality application delivery.

Frequently Asked Questions (FAQS)

1. What is the role of Cypress in React growth?

Cypress in React refers to using the Cypress testing framework to perform end-to-end exam for React applications. It allows you to assume real user interaction like snap buttons, filling out forms, and navigating pages, ensuring your React app behaves right in a production-like environs.

2. What types of trial can I perform on React applications using Cypress?

Using Cypress try on React apps, you can do:

• Unit tests for individual React components.
• Integration tryout to ascertain interactions between components.
• End-to-end tests that copy real-world exploiter behavior to formalize your entire app & # 8217; s functionality.

3. How do I debug Cypress tests in a React app?

If your Cypress React testingfails, use Cypress ’ s built-in debugging tools:

• Open the Cypress test runner to see the ocular steps and interactions.
• Use cy.debug () to log constituent to the console.
• Take screenshots or video recordings of test runs for farther analysis.

Related Guides