Enzyme as a Testing Framework

As part of the engagement team at Hootsuite, we use React as part of our front-end framework for everything from the streams that users see when they log on to dashboard to the new Assignment Manager. Testing is crucial to ensure that our code will work correctly when it has the right inputs, or will fail gracefully when it doesn’t. One of the many challenges of front-end testing is that with increasingly complex frameworks like React, thorough tests are needed to ensure that components render correctly, receive the right props, and update properly. Such tests are often difficult to implement, maintain, and understand. While React offers a  ReactTestUtils library, the library is very basic in terms of ease of testing and manipulating the React component’s output. We went as far as writing our own test utils but it simply did not provide the extensive coverage needed.

Enter Airbnb’s Enzyme!

enzyme

Airbnb has built a testing framework for React called Enzyme. Enzyme is a JavaScript library for testing React components. Enzyme uses React test utils and extends it by providing a flexible interface that mimics jQuery’s API for DOM manipulation and traversal. Enzyme makes it simple to “assert, manipulate, and traverse your React Components’ output.” We needed our tests to be easy to implement and read, and Enzyme helps us achieve both objectives.

Enzyme supports shallow rendering, full DOM rendering and static rendering. Shallow rendering is useful for to test the component as a unit without relying on the behaviour of any child nodes. It also prevents any errors in the child nodes from affecting the tests for the parent component.  Full DOM rendering can be useful if the full lifecycle is needed to test the component – for instance, testing componentDidMount – or if the component is expected to interact with DOM APIs. Static rendering is useful for testing the HTML structure of a React component as it renders the React component in static HTML. All three forms of rendering return wrapper objects that make it very easy to traverse and manipulate for testing.

Many Methods for Querying

The primary advantage of Enzyme is the number of methods available for querying the DOM which makes tests easy to implement and readable. For instance, contrast the React test utils’s scryRenderedDOMComponentsWithTag with Enzyme’s .find() method to search the render output for a tag.

The numerous query methods available with enzyme’s API have the additional benefit of making tests more robust and reusable by not relying on the component’s specific tree structure. By making tests less coupled with specific implementation of the component, we can focus our tests specifically on the behaviour of the component we want to test. We can find specific nodes by passing in the constructor, css selectors, or even objects that map to props.

Let’s say we have an Author component:

We can write the following tests using Enzyme.

Event Simulations

A key part of front-end testing is simulating user events. Enzyme provides an elegant method to  simulate such events through its .simulate() method, which takes as arguments the event name to be simulated as a string and any optional arguments the event handler might require.

You can simulate any type of event as long as there is an associated event handler with the same name – component.simulate(‘sing’) – and Enzyme will just look for an onSing event handler. Event simulation is currently limited to shallow rendering only.

Easy Debugging

Enzyme has a debug() method which returns the render output as a string in formatted HTML which is convenient for debugging when tests are failing and to understand the structure of the component. It is easy to see all the parts of the component and easy to diagnose if the tests are failing.

Compatability

Enzyme is compatible with most assertion libraries and test runners. Our team uses it with Mocha and Jasmine, but it can be used with Chai, Karma, Jest or React Native etc.

Conclusion

Enzyme provides an intuitive framework to test React applications by providing a variety of methods to easily traverse and manipulate render output of components. Enzyme allows test to be readable and concise and it can be used with a number of popular existing test runners and assertion libraries. Enzyme is working to improve its simulation support and expand its offering of selectors. Perhaps the strongest recommendation for Enzyme can be found on the React test utils page:

“Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components’ output. If you’re deciding on a unit testing library, it’s worth checking out.”
So, go ahead, try using Enzyme today. Set up and installation instructions can be found here.

Further Reading

About the Author

profileAditi Chakravarthi is a Software Developer Co-op on the Engagement team, currently studying Computer Science at the University of British Columbia. In her spare time, Aditi enjoys white water rafting and trying to find tickets to Hamilton. Connect with Aditi on LinkedIn.