Testing React: A Convert’s Journey from Enzyme to Testing Library

Rate this content
Bookmark

Testing Library's advantages over Enzyme for testing React:


- Opinionated framework enforces best testing practices (test behavior, not integration) 

- Opinions on how to find elements ( role) encourages accessibility 

- jest-dom assertions lead to simple, readable tests 

- ESLint plugins help encourage best practices in real time 

- test output helps locate elusive elements


There will be a few code examples, but this is largely a discussion (rather than a how-to).

Bonnie Schulkin
Bonnie Schulkin
8 min
15 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The speaker switched from Enzyme to the REACT Testing Library due to its encouragement of best practices, easier refactoring, and promotion of accessible code. The shift from class-based components to functional components in React is also highlighted. The benefits of the Testing Library include improved readability and user interaction simulation through DOM assertions, as well as its opinionated nature and focus on accessible code.

Available in Español

1. Switching from Enzyme to REACT Testing Library

Short description:

I switched from Enzyme to REACT Testing Library because they do the same job, but testing library encourages best practices, makes refactoring easier, and promotes accessible code. It's also important to note the shift from class-based components to functional components in React.

Thank you for coming to this talk where I'm going to talk about why I switched from Enzyme to REACT Testing Library when it comes to testing REACT. So Enzyme and REACT testing library, they do the same job. Basically, if you're running unit and integration tests without a browser, you need a virtual DOM. You need a DOM so that you can interact with your app and so that you can test your app's behavior, which is the point of testing after all.

Here's a very brief timeline. In 2016, Enzyme was first released by Airbnb, and then in 2018, REACT testing library was first released by Kent C. Dots. This just gives you a backdrop to know that when I started testing REACT in 2016, I used Enzyme because testing library didn't exist. Enzyme also fit very well with my mode of testing. I liked to have very meticulous testing, a lot of unit testing that was really isolated, using a lot of mocks, and because it was isolated, I needed to test implementation details like state.

Fast forward to 2020, and a lot has changed, including the fact that React testing best practices have become better defined, and testing library, which helps define and enforce those best practices is very popular. At first I was pretty resistant to testing library. My approach to testing was under threat, I did not want someone else telling me how to do my tests. But it became clear that testing library wasn't going anywhere. So I decided to give it a try. It turns out that I am a total convert. So I'm going to give you some of the reasons why I now prefer testing library.

Testing library is famously opinionated, meaning that it encourages best practices by making it easy to do the right thing and hard to do the wrong thing. Best practices include interacting with your app the way users would and testing behavior. So basically your tests take user-style input and test user-style output, which makes it more likely that your tests will succeed when user behavior is correct and fail when user behavior isn't. As an offshoot of that, your tests are not going to need to be rewritten when you refactor your code. And by refactoring, I mean you change how your code is written, but you don't change the behavior.

So, React is constantly evolving. Recently, there's been a shift from class-based components to functional components and your app will evolve with React, but as long as the behavior isn't changing, your tests don't need updating. Another best practice encouraged by React testing library is accessible code. They recommend finding items the same way screen readers or other assistive technologies would. My code has become so much more accessible since I've started using testing library, I've just become a lot more aware of accessibility. It's possible in Enzyme to find elements based on accessibility handles, but it's much more difficult. Now, I would like to talk about two libraries in the testing library ecosystem that really improve your code, and so, I want to show you some contrast between how the code would look in Enzyme and how it looks in testing library. The first library is user event, and this is for interactions.

2. Benefits of Testing Library

Short description:

In Testing Library, typing input into a text input is more readable and mimics user interaction. Just DOM assertions improve upon Enzyme assertions by providing a succinct way to check for element visibility and covering all possibilities. Testing Library is opinionated, encourages accessible code, and provides better readability and simulation of user interactions.

So, let's take an example where as part of your test, you need to type input into a text input. In Enzyme, your code would look like this. You would be simulating a change, and the change is that you would be changing the target value. This is not terribly readable, and it doesn't mimic how users interact. Users don't send change events.

Testing library with user event, on the other hand, is much more readable. You are typing hello world into your element. This also has options where you can simulate user behavior even more in a more detailed way. Using typing delays, clicking the element before typing, and so forth. So, big improvement here.

Just DOM assertions also improve upon the assertions that you can use in Enzyme. And for this, I'm going to use the example of asserting that an element is no longer visible after some user interaction. In Enzyme, you can expect that your property style will have visibility hidden, so this is also kind of cumbersome code wise, and it doesn't even cover all of the possibilities. There are lots of other reasons your element might not be visible, like display and opacity. With just DOM, you have this beautiful, succinct, expect my element not to be visible. So, it's more readable. And it also checks for all of the reasons that your code, excuse me, that your element might not be showing up on the page.

So, in conclusion, these are the reasons that I have come to prefer Testing Library. It is opinionated which makes it easy to follow best practices. It encourages accessible code to make sure that your tests can find elements in the same way assistive technologies can. And the code is just better. It is more readable and it simulates more how users actually interact. User event is very helpful for interactions, and JustDOM is helpful for assertions.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
Routing in React 18 and Beyond
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
Network Requests with Cypress
TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Whether you're testing your UI or API, Cypress gives you all the tools needed to work with and manage network requests. This intermediate-level task demonstrates how to use the cy.request and cy.intercept commands to execute, spy on, and stub network requests while testing your application in the browser. Learn how the commands work as well as use cases for each, including best practices for testing and mocking your network requests.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Concurrent Rendering Adventures in React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn