Menu
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?
640
It's clear that react-testing-library makes that a lot easier with all of the helper methods for querying and the matchers from jest-dom, so it's natural that you'd want to use that instead.
React Testing Library doesn't replace Jest, just Enzyme. We recommend test because it helps with this: Avoid Nesting When You're Testing.
Both Enzyme and react-testing-library have great documentation, but I believe that the Enzyme API leans you towards testing implementation (state and props) whilst react-testing-library leans you towards testing user behavior. This will require a different mindset when writing your tests.
Jest is a unit test framework designed by Facebook to test react applications. Jest allows to write unit tests using the Snapshot feature. Enzyme allows to write unit tests using regular assertions. Using Enzyme with Jest makes writing tests for React applications a lot easier.
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.
103
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
