React Testing Tutorial: How to Test React Apps

React Testing Tools

Testing a web application/mobile app requires other software and tools. However, there is no need for us to invent/develop these testing libraries/tools now. The developers of the open-source community have already contributed an incredible amount of effort to build a large number of libraries and efficient tools for this purpose. Here are a few of such libraries and tools to aid in React testing:

Test Runner

A Test Runner is software that aids in running the tests of the React application either by an individual selection of React script files by choice or in groups or as a whole test suite. Once the test run is completed, it also reports back the success or failure information in a human-readable manner.

The React team recommends using the Jest library for this purpose. It provides the ability to access the DOM elements of your web application through jsdom, which is close enough to mimic the behavior of browsers in several cases. One could also use Mocha and Jasmine for React testing. However, Jest is the widely used test runner by the React community.

Mocking Library

While developing tests for your React application, you might want to focus only on components of interest instead of including other variable factors that could deviate from your unit test goals. This is where a mocking library comes in handy to unit test your React components.

Testing this way aids to have a focus built on the component under test and promote modularity. Again, in this case, Jest comes with out-of-the-box support for creating test doubles, but other libraries support such mocking features, example: Sinon (http://sinonjs.org/)

Assertion Library

Often it is required to test the outcome of conducted tests, such as does length equal breadth for a square? This is where the assertion library’s role comes into play. Once we start getting involved in making assertions, sooner we will get into the need for sophisticated “Assertion Matchers” and in a React ecosystem, Jest comes with built-in assertion methods to make the React testing code developers’ job easy with Jest assertions.

Libraries Aligned to the Framework

To make testing of React components easier, the open-source community has developed some good libraries such as React Testing Library and Enzyme.

Both these libraries offer a set of helper methods that can be utilized to test React components without depending on how these components are implemented. The React team’s recommendation is to use the React testing library for React testing.

While we are at this juncture, I would like to highlight a key difference between the Enzyme and React testing library. Enzyme library allows one to carry out either a shallow component testing (a way to test a component without considering its children/dependent components) or complete component testing (a way to test component including its children/dependent components).

React testing library does not support a direct way to shallow test the React components. However, the developers could use Jest for faking the dependent or child components and could indirectly achieve the shallow component testing in React.

Browsers

Running the application in a browser and carrying out the testing matters a lot in the case of a web application. Performing browser testing is a march towards the goals of end-to-end testing of any web application, and it helps to identify/prevent regression in the workflows.

End-to-End Test Frameworks

Frameworks like Selenium, Cypress, and Puppeteer provide an easy, fast, and efficient way to test any application that runs on browsers. These frameworks enable you to set up and write tests, navigate through application routes to test various user interfaces, and monitor tests as they execute while making changes to the web application. They come with built-in tools for easier debugging and record test results for thorough analysis.

How to Test React Applications?

As far as testing goes, React has a few different types of tests you can write: unit tests, integration tests, and end-to-end (E2E) tests. For demonstration, we will look at how to run end-to-end tests.

There are multiple approaches to handle end-to-end React application testing: manual and automated. For this blog, we will explore automated end-to-end React testing approach.

Prerequisites

• We’ll create a simple React Task Tracker project for demonstration purposes. This project lets users add tasks, mark them as done, and delete tasks.
• Create a new React project using the following command:

npm create vite@latest react-task-tracker -- --template react

• Go to the newly created project folder and open it in your preferred code editor. We have used VS Code in this example.

cd react-task-tracker  
code .

• Install all the required dependencies using the below command:

npm install

• Preview your React app project by running the below command:

npm run start

• Open the App.js file and replace its content with the following code snippet:

import { useState } from "react";
import AddTask from "./components/AddTask";
import Header from "./components/Header";
import Tasks from "./components/Tasks";
function App() {
 const [tasks, setTasks] = useState([
   {
     id: 1,
     text: "Doctors Appointment",
     day: "Feb 5th at 2:30pm",
     reminder: true,
   },
   {
     id: 2,
     text: "Meeting at school",
     day: "Feb 5th at 1:30pm",
     reminder: true,
   },
   {
     id: 3,
     text: "Food Shopping",
     day: "Feb 5th at 2:30pm",
     reminder: false,
   },
 ]);

 const [showAddTask, setShowAddTask] = useState(false);
 // Delete a task
 const deleteTask = (id) => {
   setTasks(tasks.filter((task) => task.id !== id));
 };

 // Add task
 const addTask = (task) => {
   const id = Math.floor(Math.random() * 10000) + 1;
   setTasks([...tasks, { ...task, id }]);
 };

 // Toggle reminder
 const toggleReminder = (id) => {
   setTasks(
     tasks.map((task) =>
       task.id === id ? { ...task, reminder: !task.reminder } : task
     )
   );
 };

 return (
   <div className="container">
     <Header onShowAddTask={() => setShowAddTask(!showAddTask)} />
     {showAddTask && <AddTask onAddTask={addTask} />}
     {tasks.length > 0 ? (
       <Tasks tasks={tasks} onDelete={deleteTask} onToggle={toggleReminder} />
     ) : (
       "No tasks found"
     )}
   </div>
 );
}

export default App;

After that, you will notice a demo React task tracker application as shown below:

Install Cypress

• Install Cypress using the below command:

npm install cypress --save-dev

• Open and configure Cypress using the below command:

npx cypress open

You can refer to the instructions on the Cypress official website and choose E2E Testing for this project setup.

Next, create a new folder named tests/e2e inside the src directory.

Finally, open the cypress.config.js file located in the root directory and replace its content with the following code snippet.

const { defineConfig } = require("cypress");

module.exports = defineConfig({
component: {},

env: {
// HINT: here we read these keys from .env file, feel free to remove the items that you don't need
baseUrl: process.env.FE_URL ?? "http://localhost:3000",
},

e2e: {
supportFolder: false,
supportFile: false,
specPattern: "src/tests/e2e/**/*.spec.js",
// eslint-disable-next-line no-unused-vars
setupNodeEvents(on, config) {
// implement node event listeners here
},

baseUrl: process.env.FE_URL ?? "http://localhost:3000",
},
});

The key configuration here involves setting the default location for Cypress to find the E2E test files using specPattern and defining the baseURL for running the tests.

Create Test Files

Create a new file named tasks.spec.js inside the src/tests/e2e folder and add the following test script:

/* eslint-disable jest/valid-expect */
/* eslint-disable testing-library/await-async-utils */
/* eslint-disable no-undef */

const afterLoginFunction = () => {
cy.visit('${Cypress.env("baseUrl")}');
};

describe("Tasks tests", () => {
beforeEach(() => {
afterLoginFunction();
cy.wait(5000);
});

// Add task

it("can add a new task", () => {
cy.get("header .btn").click();
cy.wait(1000);

cy.get('.add-form input[placeholder="Add Task"]').type("Cypress Task 1");
cy.get('.add-form input[placeholder="Add Day & Time"]').type(
"March 18 at 4:00pm"
);

cy.get(".add-form").then(() => {
cy.get('.add-form input[type="submit"]').click();
cy.wait(1000);
cy.get(".task h3").each(($el) => {
return cy.contains("Cypress Task 1");
});
});
});

// Delete task
it("can delete a task", () => {
cy.get(".task h3").then(() => {
cy.get(".task h3 svg").first().click();

cy.wait(1000);

cy.get(".task")
.each(($el) => {
return $el;
})
.then(($el) => expect($el).to.have.length(2));
});
});

// Mark task
it("can mark a task", () => {
cy.get(".task:first ").then(() => {
cy.get(".task").last().dblclick();

cy.wait(1000);

cy.get(".reminder")
.each(($el) => {
return $el;
})
.then(($el) => expect($el).to.have.length(3));
});
});
});

Run React E2E Tests

Now that everything is set up and the test cases are written, it’s time to run the tests to ensure they pass as expected.

To run your tests, update the scripts section in your package.json file with the following snippet:

"test:e2e": "cypress open --e2e",
    "test:e2e:ci": "cypress run --e2e",

If you want to run the tests from the terminal or in an automated pipeline, such as TestMu AI, use the second script, which executes your tests via the CLI.

TestMu AI is an AI-powered test execution platform that supports automated testing for websites and mobile apps on its React testing cloud. You can automate React testing using popular test automation frameworks like Cypress and Jest across various browsers and operating systems.

Now, run the following command in your terminal to run your test:

npm run test:e2e

You can then notice a successful test execution, as shown in the short video:

Conclusion

This blog on testing React applications covered the essentials of React testing, including its importance and what aspects to test in a React app. We explored the tools and libraries commonly used for React testing and demonstrated how to perform React end-to-end testing using frameworks like Cypress.