Unlock the Power of React Test Renderer
When it comes to testing React components, Enzyme is often the go-to choice. However, React Test Renderer is a hidden gem that deserves attention. As a core team at Facebook maintains it, you can rely on its stability and up-to-date features.
What Makes React Test Renderer Stand Out?
React Test Renderer shines with its ability to render React components into pure JavaScript objects, making them easy to use and understand. Its great documentation is just the cherry on top.
A Real-World Example with TDD
Let’s dive into a practical example of testing a simple component using Test-Driven Development (TDD). Our component needs to have a class btn-group and render its children.
Setup and First Test
We’ll start by installing the library and writing our first test. We’ll test the class of an empty component, which will initially break. Then, we’ll add a node with a div type and a className prop to pass the test.
Testing Children
Next, we’ll ensure our component renders its children. We’ll write a test that checks if the passed value matches the rendered result. Since React supports passing children out of the box, our test will pass without any issues.
Testing Props
Now, let’s add a test to check if our component renders any props passed to it. We’ll write a test that breaks initially, and then fix it by updating our component to handle className differently.
Counting Items
To demonstrate how to count items in React Test Renderer, we’ll create a component that renders a list. We’ll start with an empty functional component that renders an empty ul tag and write a test to check if the number of rendered nodes equals the number of passed items.
Testing Text
In most cases, testing item count is not enough. We’ll also want to test the actual text a user can read. We’ll iterate over the nodes of the component and ensure every text was found.
Testing Event Handlers and Hooks
Some functional components rely on more than just props and have their own state management thanks to the Hooks API. Let’s consider a classic example of a toggler component with event handlers and Hooks.
The Power of act()
When writing UI tests, tasks like rendering, user events, or data fetching can be considered as “units” of interaction with a user interface. React provides a helper called act() that makes sure all updates related to these “units” have been processed and applied to the DOM before you make any assertions.
Conclusion
React Test Renderer is a powerful tool for testing React components. Its clean API, simplicity, and ease of use make it a great choice for TDD. With its ability to render components into pure JavaScript objects, it’s an excellent option for making specific assertions against your components. Give it a try and see how it can improve your testing workflow!