Testing and Debugging

Thanks to its components, React makes it easy to test our applications. There are many different tools available that we can use to create tests with React. In this chapter, we will cover the most popular ones to understand the benefits they provide.

Jest is an all-in-one testing framework solution maintained by Christoph Nakazawa from Meta and contributors within the community and aims to give you the best developer experience.

By the end of this chapter, you’ll be able to create a test environment from scratch and write tests for your application’s components.

In this chapter, we will look at the following topics:

• Why it is important to test our applications and how they help developers move faster
• How to set up a Jest environment to test components using Enzyme
• What the React Testing Library is and why it is a must-have for testing React applications
• How to test events
• How to implement Vitest
...

Technical requirements

To complete this chapter, you will need the following:

• Node.js 19+
• Visual Studio Code

You can find the code for this chapter in the book’s GitHub repository: https://github.com/PacktPublishing/React-18-Design-Patterns-and-Best-Practices-Fourth-Edition/tree/main/Chapter16.

Understanding the benefits of testing

Testing web UIs has always been a difficult job. From unit to end-to-end tests, the fact that the interfaces depend on browsers, user interactions, and many other variables makes it difficult to implement an effective testing strategy.

If you’ve ever tried to write end-to-end tests for the web, you’ll know how complex it is to get consistent results and how the results are often affected by false negatives due to different factors, such as the network. Other than that, user interfaces are frequently updated to improve the experience, maximize conversions, or simply add new features.

If tests are hard to write and maintain, developers are less prone to cover their applications. On the other hand, tests are important because they make developers more confident with their code, which is reflected in speed and quality. If a piece of code is well tested (and the tests are well written), developers can be sure that it works and...

Painless JavaScript testing with Jest

The most important way to learn how to test React components in the right way is by writing some code, and that is what we are going to do in this section.

The React documentation says that Facebook uses Jest to tests its components. However, React does not force you to use a particular test framework, and you can use your favorite one without any problems. To see Jest in action, we are going to create a project from scratch, install all the dependencies, and write a component with some tests. It’ll be fun!

The first thing to do is to move into a new folder and run the following:

npm init

Once package.json is created, we can start installing the dependencies, with the first one being the jest package itself:

npm install --save-dev jest

To tell npm that we want to use the jest command to run the tests, we must add the following scripts to package.json:

"scripts": {
  "build": "webpack...

Introducing Vitest

Vitest is a unit test framework built on Vite, designed for speed and minimal configuration. It serves as a replacement for various testing tools such as Jest, Mocha, and Chai. Since Vitest is built on top of the Jest API, if you already know how to use Jest, it works in a similar manner.

In this context, we will utilize Vite, a build tool that aims to provide a fast and lean development experience for modern web projects.

Firstly, you need to install Vite globally with:

npm install vite -g

After it’s installed, you need to create your first project with the npm command:

npm create vite@latest

It will ask you for the project name. You can use my-first-vite-project, then for the framework you want to use (React), and finally, choose the variant (TypeScript):

Figure 16.6: npm create vite@latest

Next, you need to install the project dependencies and run the npm run dev command. If you do so, you will see something similar...

Using React DevTools

When testing in the console is not enough, and we want to inspect our application while it is running inside the browser, we can use React DevTools.

You can install this as a Chrome extension at the following URL: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgo fadopljbjfkapdkoienihi?hl=en.

The installation adds a tab to the Chrome DevTools called React, where you can inspect the rendered tree of components and check which properties they have received and what their state is at a particular point in time.

Props and states can be read, and they can be changed in real time to trigger updates in the UI and see the results straight away. This is a must-have tool, and in the most recent versions, it has a new feature that can be enabled by checking the Trace React Updates checkbox.

When this functionality is enabled, we can use our application and see which components get updated when we perform a particular action...

Summary

In this chapter, you gained a comprehensive understanding of the benefits of testing, as well as the various frameworks and tools available for testing React components. You learned how to implement and test components and events using the React Testing Library and how to use Jest coverage to optimize your testing process. Additionally, you explored tools such as React DevTools and Redux DevTools to further enhance your development experience. It’s important to keep in mind common solutions when it comes to testing complex components, such as higher-order components or forms with multiple nested fields, to ensure that your tests accurately reflect the functionality of your application.

In the next chapter, you will learn how to deploy your application to production.