React Unit Testing

We sufficiently discussed the fundamentals of React in the preceding chapters. You have been exposed to React tools and resources to master modern frontend techniques in your full stack development journey. We explored in-depth useful information required to build rich interactive interfaces with React. We discussed the topics of components, props and state, JSX, event handling, forms, and routing in React.

In this chapter, we will focus on unit testing in React applications, a type of software testing that focuses on isolated piece(s) of code. Also, we will explore Jest, a Node-based test runner. The test runner allows you to discover test files, run tests, and find out whether tests passed or failed automatically. You will then end with a report in a very clear, expressive, and human-readable format.

Jest is a popular testing framework developed with React in mind. The project was formally owned by Meta, the same company behind React. However, with the recent...

Technical requirements

The complete code for this chapter is available on GitHub at: https://github.com/PacktPublishing/Full-Stack-Flask-and-React/tree/main/Chapter07

What is software testing?

Software testing is a process that ensures all the pieces of code in software or application development work as expected by all stakeholders. The process of testing is one of the key phases in software development life cycles that explains the standardized methodology of designing and developing an application.

Software testing ensures that web applications have fewer bugs, technical requirements are implemented as expected efficiently, development costs are reduced, and ultimately, business needs are met.

Interestingly, testing, if carried out effectively, usually gives software engineers the confidence to know full well that the product they ship to production is maintainable, readable, reliable, and well structured.

This creates less panic about possible costly bugs in an application, which may cost a company embarrassment or the erosion of customers’ confidence. There are various types of software testing worthy of note – unit testing...

Introducing Jest

Jest is an open source, robust, well-documented, fast, and safe JavaScript testing framework. Jest provides the tools and resources that you need to have absolute confidence in your JavaScript code base. Testing is fundamental to quality code writing, and Jest with almost zero configuration delightfully handles test implementation.

Jest is very popular in the JavaScript community. You can write tests in Jest leveraging its feature-rich set of APIs, such as matchers, mocked functions, code coverage, and snapshot testing. Jest can be used to test React components, and the React team actually recommends Jest to test React projects.

Jest is a Node.js test runner, which means that the tests always run in a Node environment. Jest is built with performance in mind. You can run a suite of tests in parallel effectively. The Jest toolkit comes with code coverage that enables you to have information about tested and untested files in your project. And when your tests fail...

Unit-testing React components

React is hinged on the component-driven development philosophy, and testing a unit of a React component further takes us closer to the basic elements that make up a React component. The essence of unit testing is to test an individual chunk of code to ascertain that the functionality works as expected by the users.

As stated earlier, in unit testing, you systematically go through three stages – planning, case scripting, and testing. Writing a unit test should be thoroughly planned, descriptive test cases should be implemented, and assertions should be clear enough to be understood by everyone on the team.

However, before we delve into unit-testing a React component, how do we know what to test in a React application? It is simple. Every React application has one or more components with specific functions. So, what to test in a React application is subjective. Every project is different and so is the functionality of the applications. The application...

TDD

TDD is a development paradigm that puts writing tests first. You write the test first and then write code to validate. The main purpose of TDD is rapid feedback. You write a test, run it, and it fails. You then write minimal code to pass the test. Once the test passes, you then refactor your code appropriately.

These processes are iteratively repeated. Focusing on writing tests before code implementation allows developers to see the product from the users’ point of view, thus ensuring a working functionality that meets the users’ needs.

TDD enables software developers to come up with units of code base with a single responsibility – allowing code to do just one thing that works properly. However, the traditional approach is to code and then test. The idea of testing a code base at the end of the development process has been proven to be flawed and comes with a high cost of code maintenance.

Most software developers are more agile than test-driven....

Summary

Testing is crucial to the successful deployment of an application product into production. In this chapter, we examined various testing types available, especially unit testing for code base quality and ease of maintainability. This ensures a lower cost of producing software with confidence.

We also explored Jest, a Node test runner that delightfully tests JavaScript code and, by extension, React applications. The Jest testing framework ensures that you work in an integrated testing environment, with virtually all your testing tools in one place and only a stone’s throw away.

We discussed RTL with its implementation and then, in depth, the unit testing of React components using Jest and RTL, which comes with the Create React App (CRA) boilerplate code.

We wrote useful component tests to showcase the ability of the combined tools of Jest and TLR. Finally, we discussed a testing methodology, TDD, in software development and how it can be used in React-based applications...