React Testing Library is a part of the Testing Library (@testing-library) family of packages.The Testing Library helps us test the UI of our applications in a user-focused way, with its core library being the DOM Testing Library from which all other libraries within that family branch out or interact with. It is not specific to a single framework, and it supports React and React Native, Vue, Angular, and many more, even providing a plugin for end-to-end tests in Cypress.
The philosophy of React Testing Library
“The more your tests resemble the way your software is used, the more confidence they can give you.”
What differentiates React Testing Library from other similar tools is its user interaction-focused testing. It doesn’t care about the implementation details, but only about replicating the way a real-world user would interact with the component or application in question. It is about as close as we can get to having a real user test our code.
It is also worth mentioning that React Testing Library is a replacement for Enzyme, with the goal of solving issues a lot of developers had with using Enzyme, including its complexity and encouragement of bad testing practices.
A fun fact about Enzyme and React Testing Library is that a lot of Enzyme maintainers also participated greatly in the creation of the React Testing Library.
Features of React Testing Library
Asynchronous handling
React Testing Library is made to handle asynchronous actions like data retrieval and updating state. It waits for them to finish before checking if the outcome is as expected. If the outcome does not match, it provides a detailed user-friendly message so we can instantly tell where we went wrong.
Functions
React Testing Library provides a set of queries and utilities, or query and utility functions, which allow us to select specific elements based on their labels or texts, or even accessibility attributes and then simulate user interactions to make sure the outcomes are what we expect.
Virtual DOM use
It uses React’s rendering capabilities to render components in a virtual DOM and then works with the actual DOM nodes. Using the virtual DOM removes the need for a browser so the testing takes less time.
Jest integration
React Testing Library also integrates with Jest, which gives us custom matchers, or assertion functions, to assert the code is behaving as predicted.
Jest is a comprehensive testing framework that provides a structured and organized environment for writing tests. Its functionalities include test execution, assertion libraries, and reporting mechanisms.
It provides snapshot testing, which works by taking a snapshot of the rendered components, and then comparing them in each of the next runs to look for any mismatches.
One key Jest’s feature is its mocking capability, which allows us to isolate components during testing, so we know exactly where an issue pops up, and in which component. We provide a mock version of the data and behaviors around the component, to see how the component behaves.
Integrating Jest with React Testing Library is fairly easy, and has only a handful of requirements:
- Both React Testing Library and Jest installed
- the jest-dom package from the Testing Library
- A jest.config.js configuration file
The jest-dom library actually provides the custom matchers and enables us to extend Jest. And don’t be fooled, jest-dom was not made for React Testing Library specifically; it can be used with any framework that returns DOM elements from queries.
The importance of testing your code
It is imperative to understand the importance of testing your code. For starters, yes, it is important to catch any bugs and errors in the code. By catching bugs while still developing the code, we make it less likely that they end up in production.
In order to write the tests for individual components we need the code to be modular and isolated, which encourages us to improve the code quality, making the code cleaner and more maintainable. It also helps us identify overcomplicated and tightly coupled parts of code.
By nature, tests have greater readability than the code itself. They tend to be smaller, focus on specific scenarios or behaviors, and state exactly what they expect to happen. That enables them to also serve as a form of documentation for the code. Another upside is that it makes it easier for new developers to get to know the code they’re just starting to work on.
It also serves as a form of functionality protection for the existing code, because well-written thorough tests will catch a mistake in the code much easier.
Tests might be a pain to write, but long term they make our code more trustworthy and us more confident in its success.