This chapter explains the basics of testing React apps. It will give us an overview of using Jest, which is a JavaScript testing framework. We will look at how you can create and run new test suites and tests. To test our React Vite project, we will also learn how to use the React Testing Library together with Vitest.
In this chapter, we will cover the following topics:
The Spring Boot application that we created in Chapter 5, Securing Your Backend, is required, as is the React app that we used in Chapter 14, Styling the Frontend with React MUI.
The code samples available at the following GitHub link will also be required to follow along with this chapter: https://github.com/PacktPublishing/Full-Stack-Development-with-Spring-Boot-3-and-React-Fourth-Edition/tree/main/Chapter15.
Jest is a testing framework for JavaScript, developed by Meta Inc. (https://jestjs.io/). It is widely used with React and provides lots of useful features for testing. For example, you can create a snapshot test, whereby you can take snapshots from React trees and investigate how states are changing. Jest has mocking functionalities that you can use to test, for example, your asynchronous REST API calls. It also provides functions that are required for assertions in your test cases.
To demonstrate the syntax, we will see how to create a test case for a basic TypeScript function that performs some simple calculations. The following function takes two numbers as arguments and returns the product of the numbers:
// multi.ts
export const calcMulti = (x: number, y: number): number => {
return x * y;
}
The following code snippet shows a Jest test for the preceding function:
// multi.test.ts
import { calcMulti } from './multi';
test("2 * 3...The React Testing Library (https://testing-library.com/) is a set of tools and APIs for testing React components. It can be used for DOM testing and queries. The React Testing Library provides a set of query functions that help you search elements based on their text content, label, and so on. It also provides tools to simulate user actions such as clicking a button and typing into input fields.
Let’s go through some important concepts in the React Testing Library. The Testing Library provides a render() method that renders a React element into the DOM and makes it available for testing:
import { render } from '@testing-library/react'
render(<MyComponent />);
Queries can be used to find elements on the page. The screen object is a utility for querying the rendered components. It provides a set of query methods that can be used to find elements on the page. There are different types of queries that start with various...
Vitest (https://vitest.dev/) is the testing framework for Vite projects. It is also possible to use Jest in Vite projects, and there are libraries that provide Vite integration for Jest (for example, https://github.com/sodatea/vite-jest). In this book, we will use Vitest because it is easier to start using it with Vite. Vitest is similar to Jest, and it provides test, describe, and expect, which we learned about in the Jest section.
In this section, we will create tests with Vitest and the React Testing Library for the frontend project that we used in Chapter 14, Styling the Frontend with MUI.
The first step is installing Vitest and the React Testing Library to our project:
npm command inside your project folder:
npm install -D vitest @testing-library/react @testing-library/jest-
dom jsdom
The -D...
The React Testing Library provides a fireEvent() method that can be used to fire DOM events in your test cases. The fireEvent() method is used in the following way. First, we have to import it from the React Testing Library:
import { render, screen, fireEvent } from '@testing-library/react';
Next, we have to find the element and trigger its event. The following example shows how to trigger an input element’s change event and a button’s click event:
// Find input element by placeholder text
const input = screen.getByPlaceholderText('Name');
// Set input element's value
fireEvent.change(input, {target: {value: 'John'}});
// Find button element by text
const btn = screen.getByText('Submit');
// Click button
fireEvent.click(btn);
After the events are triggered, we can assert the expected behavior.
There is also a companion library for the Testing Library that is called user-event. The...
End-to-end (E2E) testing is a methodology that focuses on testing an entire application’s workflow. We will not cover it in detail in this book, but we will give you an idea about it and cover some tools that we can use.
The goal is to simulate user scenarios and interactions with the application to make sure that all components work together correctly. E2E testing covers frontend, backend, and all interfaces or external dependencies of the software that is being tested. The E2E testing scope can also be cross-browser or cross-platform, where an application is tested using multiple different web browsers or mobile devices.
There are several tools available for end-to-end testing, such as:
In this chapter, we provided a basic overview of how to test React apps. We introduced Jest, a JavaScript testing framework, and the React Testing Library, which can be used to test React components. We also learned how to create and run tests in our Vite React app using Vitest, and finished off with a brief discussion on E2E testing.
In the next chapter, we will secure our application and add the login functionality to the frontend.
Here are some other resources for learning about React and testing:
To join the Discord community for this book – where you can share feedback, ask the author questions, and learn about new releases – follow the QR code below:
https://packt.link/FullStackSpringBootReact4e
© 2023 Packt Publishing Limited All Rights Reserved
