Member-only story
9 React Testing Library Tips and Tricks
Writing tests is hard. These tips make it a little easier
A few weeks ago, I had the good fortune to attend a two-day training course at work on improving my React Testing Library knowledge and skills.
At my job, my team relies heavily on many forms of automated testing (unit, integration, end-to-end, etc.) to help ensure that all the pieces of our app are working correctly. So when I took the course, I already had a basic understanding of how to use React Testing Library (RTL) because we had begun using it a few months prior as we started writing more React hooks-based components in our application. Our previous unit testing combination of Jest and Enzyme had stopped meeting our needs as well.
This training, however, opened my eyes to some really helpful info around using RTL I was totally unaware of. I wanted to share nine of the biggest takeaways for me in hopes that they’ll help you in your own use of this testing library.
What Is React Testing Library? And Why Is It Different?
Note: This is not a “Getting Started with RTL” piece. This article assumes you already have a pretty good understanding of how to use the testing framework. My aim is to show you some additional tricks to make writing (and debugging) tests easier.
With that said, I will give a brief overview of the whys and hows of React Testing Library before I dive into the meat of this article.
The why
Kent C. Dodds created the React Testing Library to address one problem: Other testing libraries encouraged developers to write tests that were too tightly coupled to the implementation details of the components they were testing. Dodds believed that the tests should only verify the end results (the behavior) of the components.
It makes sense when you think about it, right?
Why don’t we write integration tests closer to the way we write end-to-end tests? Tests that focus on the user’s perspective (how the component looks and behaves in the DOM). Because that’s what ultimately matters in the end: Do the components do what they’re supposed to do when a user interacts with them?
