React is a powerful open-source front-end JavaScript library that is highly effective in building modern web applications, and many popular industries like Netflix, Uber, and Instagram use React. Consequently, as an application grows in size and complexity, it’s important to introduce writing tests to prevent bug infestation. Businesses that intend to build large-scale applications with React require proper planning and organization. This article is a guide to carrying out Unit testing for a React App using React Testing Library and Jest. First, we will address why unit testing is necessary for a React application; then, we will properly define Unit Testing. We will also explain the two frameworks used in Unit testing: React Testing Library and Jest. We also cover the steps for carrying out unit testing using both frameworks, and finally, we share some pro tips for testing React Apps to help Devs get the best out of Testing React Apps in general.
One of the most popular JavaScript libraries being used presently is React. This open-source front-end JavaScript library has completely transformed how we build modern web applications by bringing functional programming paradigms to front-end development and improving application state management. Many industry leaders use React, including Netflix, Uber, Instagram, Twitter, WhatsApp, BBC, and many others, to enhance clients' user experience on their platforms.
However, as an application grows in size and complexity, It becomes crucial to write tests and avoid future bugs. Building large-scale applications with React requires careful planning and organization to avoid any hiccups in the long run.
Though the process for testing React applications isn't always straightforward compared to other libraries or frameworks, it's still possible to carry out tests effectively.
Why is there a need to test React Apps?
The primary reason for testing any app is to ensure it runs smoothly without errors. It helps to write efficient code and release the latest features into apps more frequently and confidently. Testing also provides the software more efficient, reliable, and straightforward, which is why carrying out tests is a significant part of project development at Fetchly Labs.
What is Unit Testing?
Unit Testing is a method that tests an individual unit of software in isolation. Therefore, unit testing for React Apps means testing the unique functionality of React components. Moreover, any error found in a line of code can be identified at the beginning to save time rectifying errors later.
React Testing Library and Jest
React Testing Library is a lightweight DOM testing library that deals with instances of rendered React components. It focuses on DOM elements and how they behave when they're used. This library is relatively easy to use and promotes good testing practices. It can be used with or without Jest.
Jest is a JavaScript testing tool developers use to run JavaScript and TypeScript code tests. It can easily be integrated with React.
Steps to carry out Unit Testing on React Apps
Step 1: Create a new react app to carry out the unit testing
First, make sure you have create-react-app installed globally. If not, run the following npm command:
npm install -g create-react-app
Then, navigate to where you want to house your app, and create a new app named react-testing-tutorial:
npx create-react-app react-testing-tutorial
This will generate a bootstrapped React App housed under the folder react-testing-tutorial as per the React team's recommended defaults, with instructions on how to run it displayed on the terminal.
Step 2: Create a component called Counter.js inside the folder src called to be tested
In this case, we'll use a Counter that increments or decrements a stateful value whenever the user clicks one of its buttons. At this point, take note of the data-testid attributes that will be used to select these elements in the test file.
Step 3: Write out a unit test for the React component
First, it's crucial to understand the general structure of a test block, where tests are typically written. Within the test block, the first thing to do is to render the component that needs to be tested. Next, select the elements for interaction and interact with them. Affirm that the results came out as expected.
In the same folder where you created Counter.js, create a file Counter.test.js to test that same component. There are a few reasons behind naming test files this way but here are the two main reasons:
- Pure JavaScript test files require the .test.js extension to be picked up by Jest or many other testing libraries commands.
- It is also considered good practice to group test files by component with their names as a prefix.
Step 4: Run the test using this command:
npm run test
The test result should be displayed on your terminal screen like this afterwards:
If you have trouble following the instructions or want to check out this code without implementing it, you can check out this
repository created by Henrique Vermelho, one of our exceptional software engineers at Fetchly Labs. The repository contains a working version of this tutorial as of September 2022.
Pro Tips for Testing React Apps
Following instructions like these is best to experiment with solving slightly different problems using the same tools. For instance, you could try writing tests for a to-do component or an alarm clock trigger instead of a simple counter component. If you've followed the guide up to this point, try creating the test block for the decrement operation. Learn to explore your creative side, and the unexpected obstacles you'll encounter will provide you with a better learning experience.
Always remember that there is no one-size-fits-all solution for testing or software in general. It's necessary to understand what your app needs regarding testing in scope and what tools better match it. Also, remember that there will be times when there is no way to find the perfect solution other than trying out a few by yourself.
Finally, always refer to the documentation of the tools you're using. There's no better resource than the authors themselves. Jest itself has a dedicated
React section in its documentation.
To sum it up
One of the easiest ways to improve the quality of React applications is through unit testing because it helps detect bugs and errors in code. This helps to improve customer satisfaction and gain more trustworthy and long-term clients. Also, it saves time on development and reduces costs because of the early discovery of principles in the development cycle.
*This is not the official Fetchly opinion but the opinion of the writer who is employed by Fetchly*
