Differences
Shallow or Deep Rendering
The DOM is used to test in the React Testing Library. As a result, there is no such thing as shallow or deep rendering. Enzyme, on the other hand, allows for shallow or deep rendering.
We can use shallow rendering to ensure that our tests aren't asserted based on the behaviour of any child component of the component we're testing.
Enzyme also renders the DOM elements in their entirety. It's useful when we need to test components that are wrapped inside a higher-order component.
Different Design Approach
The state and props of the component are used to test the component in Enzyme. This usually denotes brittleness in the tests. Let's have a look at an example. Let's pretend we've already built tests for a component and they're working perfectly. But what if someone changes the variable name of a state or a property in the component? Our test will fail even if the component's functionality hasn't changed. This type of behaviour demonstrates the test's brittleness.
React Testing Library, on the other hand, tests the component from the user's perspective. Let's imagine we want to test a drop down component, but we won't test it based on its state and properties.
Setup
To make Enzyme operate with React, we need to configure the adapter. There are various adapters available that allow you to use Enzyme with different libraries.
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
When we use the Enzyme library to test our react components this library requires another library called “enzyme-adapter-react” while RTL doesn’t require another library.
With React Testing Library, we just need to install “@testing-library/react“. and be up and running.
Avoid Implementation Details
Instead of focusing on implementation details on your component, React-testing-library encourages you to focus on making your tests provide you with the assurance you need. In the long term, this will make your test a lot easier to maintain.
Enzyme, for example, allows you to update the component's state and properties, which isn't how most users would interact with your app.
Frequently Asked Questions
-
What is the difference between Enzyme and the React testing library?
The 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.
-
Which is better, Enzyme or RTL?
Both Enzyme and react-testing-library have great documentation, but it is believed that the Enzyme API leans you towards testing implementation (state and props) whilst react-testing-library leans you towards testing user behaviour.
-
Should I use Enzyme with Jest?
Jest can be used without Enzyme to render components and test with snapshots, Enzyme simply adds additional functionality. Enzyme can be used without Jest, however Enzyme must be paired with another test runner if Jest is not used.
Conclusion
When it comes to testing a component, there are no hard and fast rules. When simply testing the DOM from the user's perspective isn't enough, we may need to test the component's internals. Enzyme is absolutely the way to go in these situations.
And it can be tempting to test everything when simply testing the DOM is sufficient. React Testing Library is an excellent alternative in these situations.
We hope that this blog has helped you enhance your knowledge regarding the differences between RTL and Enzyme. Do upvote our blog to help other ninjas grow.
Head over to our practice platform Coding Ninjas Studio to practice top problems, attempt mock tests, read interview experiences, and much more.!
305+ registered