56

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?

Black
  • 5,253
  • 3
  • 34
  • 43

2 Answers2

110

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.

Giorgio Polvara - Gpx
  • 12,268
  • 5
  • 53
  • 55
48

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.

Estus Flask
  • 150,909
  • 47
  • 291
  • 441
  • 10
    One important clarification is that Enzyme and react-testing-library ARE custom utilities built on top of ReactTestUtils. Very useful ones at that :) – kqcef Apr 26 '19 at 17:21
  • 1
    As of 2021 React now recommends React Testing Library only (https://reactjs.org/docs/testing.html) – Borduhh Mar 23 '21 at 12:28
  • so "jest" is used just for mocking purpose ? – vikramvi Apr 16 '21 at 06:34
  • 1
    @vikramvi 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. – Estus Flask Apr 16 '21 at 11:08