Chapter 13: Testing Your Frontend

This chapter explains the basics of testing React apps. It will give us an overview of using Jest, which is a JavaScript testing framework developed by Facebook. We will look at how you can create new test suites and tests, and also how to run a test and work with the results. Unit tests make it easier to refactor and maintain code. Unit tests are also easy to automate, which allows us to run tests frequently.

In this chapter, we will cover the following topics:

• Using Jest
• Firing events in tests
• Understanding snapshot testing

Technical requirements

The Spring Boot application that we created in Chapter 5, Securing and Testing Your Backend, is required, as is the React app that we used in Chapter 12, 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-and-React/tree/main/Chapter13.

Check out the following video to see the Code in Action: https://bit.ly/3NLSHIK

Using Jest

Jest is a testing framework for JavaScript developed by Facebook (https://jestjs.io/). Jest is widely used with React and provides lots of useful features for testing. You can create a snapshot test, whereby you can take snapshots from React trees and investigate how states are changing. Jest also has mock functionalities that you can use to test, for example, your asynchronous REST API calls. Jest also provides functions that are required for assertions in your test cases.

We will first see how you can create a simple test case for a basic JavaScript function that performs some simple calculations. The following function takes two numbers as arguments and returns the product of the numbers:

// multi.js
export const calcMulti = (x, y) => {
  x * y;
}

The following code snippet shows a Jest test for the preceding function. The test case starts with a test method that runs the test case. The test method has an alias, called it, that can be used as well...

Firing events in tests

React Testing Library provides a fireEvent method that can be used to fire Document Object Model (DOM) events in your test cases. In the following example, we will create a test case that opens our car addition modal form.

First, add the following imports to the App.test.js file:

import { render, screen, fireEvent } from '@testing-library/react';
import App from './App';

Next, we will create a new test case in the App.test.js file, as follows:

test('open add car modal form', () => {
});

Then, we use fireEvent.click, which creates a click event to a given DOM element. In our case, the DOM element is the button to open the modal form, and we can find it by using a getByText query, like this:

test('open add car modal form', async () => {
  render(<App />);
  fireEvent.click(screen.getByText('New Car'));
});

Finally, we verify that the modal dialog form is opened...

Understanding snapshot testing

Snapshot testing is a useful way to test that there are no unwanted changes in your user interface (UI). Jest generates snapshot files when snapshot tests are executed. The next time tests are executed, the new snapshot is compared to the previous one. If there are changes between the content of the files, the test case fails, and an error message is shown in the terminal.

To start snapshot testing, perform the following steps:

1. Install the react-test-renderer package. The --save-dev parameter means that this dependency is saved to the package.json file's devDependencies part, and it is only used for development purposes. If you type the npm install --production command in the installation phase, dependencies in the devDependencies part are not installed. So, all dependencies that are only required in the development phase should be installed using the --save-dev parameter, like this:

   npm install react-test-renderer --save-dev

2. After...

Summary

In this chapter, we provided a basic overview of how to test React apps. Jest is a testing framework developed by Facebook, and it is already available in our frontend because we created our app with create-react-app.

We created a couple of tests with Jest and ran those tests to see how you can check the results of tests. We also learned the principles of snapshot testing.

In the next chapter, we will secure our application and add the login functionality to the frontend.

Questions

1. What is Jest?
2. How should you create test cases using Jest?
3. How can you fire events in test cases?
4. How should you create a snapshot test using Jest?

Further reading

Packt Publishing has other great resources available for learning about React and testing. A couple of them are listed here:

• Simplify Testing with React Testing Library, by Scottie Crump (https://www.packtpub.com/product/simplify-testing-with-react-testing-library/9781800564459)
• Mastering React Test-Driven Development, by Daniel Irvine (https://www.packtpub.com/product/mastering-react-test-driven-development/9781789133417)