Difference between enzyme, ReactTestUtils and react-testing-library

Question

What is the difference between enzyme, ReactTestUtils and react-testing-library for react testing?

The ReactTestUtils documentation says:

ReactTestUtils makes it easy to test React components in the testing framework of your choice.

The enzyme documentation just says:

Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.

React-testing-library documentation:

The react-testing-library is a very light-weight solution for testing React components. It provides light utility functions on top of react-dom.

Why is actually every solution easier and what can't be achieved with the other one?

Dorolice

It's reactjs.org/docs/test-utils.html , not react-utils, isn't it? – Hargrave

@estus Yes, you are right. I have edited the question. – Dorolice

Enzyme doesn’t work with latest version of React #64658531 – Galibi

Answer 1

ReactTestUtils gives you the bare minimum to test a React component. I haven't seen it being used for big applications.

Enzyme and react-testing-library are both good libraries that give you all the tools you need to test your application. They have two different philosophies though.

Enzyme allows you to access the internal workings of your components. You can read and set the state, and you can mock children to make tests run faster.

On the other hand, react-testing-library doesn't give you any access to the implementation details. It renders the components and provides utility methods to interact with them. The idea is that you should communicate with your application in the same way a user would. So rather than set the state of a component you reproduce the actions a user would do to reach that state.

In my experience Enzyme is easier to grasp but in the long run, it's harder to maintain. react-testing-library forces you to write tests that are a bit more complex on average but it rewards you with higher confidence in your code.

Flawed

Answer 2

Enzyme is intended for unit/integration testing. Its API was designed to test the implementation. It offers custom renderer that doesn't require DOM (for shallow rendering), behaves differently from React renderer and allows things that are important for unit testing but aren't possible or straightforward with default renderer, like synchronous state updates, shallow rendering, disabling lifecycle methods, etc.

react-testing-library is intended for blackbox integration/e2e tests. It uses React renderer and ReactTestUtils internally, requires real DOM because it's component's output that is asserted in tests, not internals. It doesn't provide facilities for isolated unit tests but it's possible to do this by mocking modules that contain component that need to be spied, mocked or stubbed by other means, notably jest.mock.

react-dom/test-utils and react-test-renderer contain a subset of functionality, Enzyme and react-testing-library were built upon them. API is scarce and requires to write boilerplate code or custom utility functions for full-grown testing. React officially promotes Enzyme and react-testing-library as better alternatives.

Hargrave

One important clarification is that Enzyme and react-testing-library ARE custom utilities built on top of ReactTestUtils. Very useful ones at that :) – Oodles

As of 2021 React now recommends React Testing Library only (reactjs.org/docs/testing.html) – Menides

so "jest" is used just for mocking purpose ? – Addiction

@Addiction For mocking, asserting, running tests... Jest is testing framework, that's its purpose. Regarding the mention of jest.mock, Enzyme provides additional facilities to mock components, this is supposed to be done by means of Jest when using RTL. – Hargrave

Answer 3

In Enzyme, we test the component using the state and props of the component. This generally means that the tests are brittle. Let's say we have already written tests for a component and it is running fine. But what if someone changes the variable name of a state or props in the component, then even if the functionality of the component hasn't changed, our test fails. This kind of behavior demonstrates the brittleness of the test.

Whereas in React Testing Library, we test the component from the user's perspective. Let's say we want to test a drop-down component, we won't test the component according to its state and props. Instead, we use the DOM elements to test it, just how the user interacts with it.

The primary purpose of React Testing Library is to increase confidence in your tests by testing your components in the way a user would use them. Users don't care what happens behind the scenes, they just see and interact with the output. Instead of accessing the components' internal APIs or evaluating their state, you'll get more confidence by writing your tests based on the component output.

At some point, React Testing Library became more widely used than Enzyme.

Veats

Answer 4

React Testing Library can be a replacement for Enzyme. They have very different testing philosophies - Enzyme encourages (and provides utilities for) testing implementation details with rendered instances of components, whereas RTL encourages testing only the 'end result' by querying for and making assertions about actual DOM nodes.

Geddes