Unit Testing in React

Although testing is an integral part of the software development process, developers and companies often pay surprisingly little attention to it in reality, especially to automated testing. In this chapter, we will try to understand why it is important to pay attention to testing and what advantages it gives. We will also explore the basics of unit testing in ReactJS, including general testing theory, tools, and methods, as well as specific aspects of testing ReactJS components.

In this chapter, we will cover the following topics:

• Testing in general
• Unit testing
• Testing ReactJS

Technical requirements

You can find the code files of this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter14.

Testing in general

Software testing is a process aimed at identifying errors and verifying the functionality of a product to ensure its quality. Testing also allows developers and testers to assess the system’s behavior under various conditions and to ensure that new changes have not led to regression, meaning they have not disrupted existing functionality.

The testing process includes a series of actions conducted to detect and identify any aspects that do not meet requirements or expectations. One example of such an action could be manual testing, where a developer or tester manually checks the application. However, this approach is time-consuming and provides little guarantee that the application is secure and free of critical errors in operation.

To ensure a higher level of application reliability while saving time on testing, there are automated tests. They allow the functionality of the application to be verified without human intervention.

An automated test...

Unit testing

We already know that unit testing is the process of verifying the correctness of individual “units” of code: namely, functions and methods. The goal of unit testing is to ensure that each separate unit performs its task correctly, which, in turn, increases confidence in the reliability of the entire application.

export function sum(a: number, b: number): number {
  return a + b;
}
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

The above represents the most basic and simplest test of a function that adds two values. The test code itself is a function that calls a special method, expect, which takes a value and then has a series of methods allowing for the checking and comparing of results.

Looking at this code, the first question that might come to mind is, is it really necessary to write another three lines of tests for such a simple three-line function? And why test such a function at all? I would answer...

Testing ReactJS

We already know that unit testing involves checking small units, and most often, just functions, which perform some logic and return a result. To understand how testing in ReactJS works, the concept and idea remain the same. We know that at their core, React components are actually createElement functions that return a node, which, as a result of the render function, is displayed on the browser screen as HTML elements. In unit testing, we don’t have a browser, but this is not a problem for us since we know that the render target in React can be almost anything. As you may have already guessed, in the unit tests of ReactJS components, we will be rendering components into a specially created JSDOM format, which is fully identical to the DOM, and the React Testing Library will help us with this.

This library contains a set of tools that allow rendering components, simulating events, and then checking the results in various ways.

Before we start, let’...

Summary

In this chapter, we explored the broad and extensive topic of testing. We became acquainted with the concept itself, testing types, and various approaches. Then, we delved into unit testing and learned what it is, and what possibilities this type of testing offers. After that, we learned how to set up the environment and write tests for regular functions and logic. At the end of the chapter, we examined the basic capabilities of testing React components and Hooks.

With this chapter, we conclude our acquaintance with the amazing ReactJS library and will next dive deeper into the React ecosystem with the incredible opportunity to create mobile applications based on React Native.

Join us on Discord!

Read this book alongside other users and the authors themselves. Ask questions, provide solutions to other readers, chat with the authors, and more. Scan the QR code or visit the link to join the community.

https://packt.link/ReactAndReactNative5e