Difference between Enzyme’s rendering methods

shallow vs mount vs render

Darth Vader on the importance of unit tests, circa 1977

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

The library offers different methods to render the component under test. However, for new users the difference between them can be a bit confusing.

Hopefully this post will help you choose the correct rendering method for your use case.

Note: methods marked with v3 are only available since version 3.

Shallow

Simple shallow

Calls:

• constructor
• render
• componentDidMount v3

shallow + setProps

Calls:

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate v3

Shallow + unmount

Calls:

• componentWillUnmount

Mount

• Full rendering including child components.
• Requires a DOM (jsdom, domino).
• More costly in execution time.

Simple mount

Calls:

• constructor
• render
• componentDidMount

Mount + setProps

Calls:

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

Mount + unmount

Calls:

• componentWillUnmount

Render

Only calls render but renders all children.

So my rule of thumbs is:

• Always begin with shallow
• If you want to test children behavior, use mount
• If you want to test children rendering with less overhead than mount and you are not interested in lifecycle methods, use render

Acknowledgment

This post is basically a copy of this comment by Geoffroy Warin, with a few edits to reflect updates to the library. I wanted to create a separate post for it as I felt it’s relevant to anyone learning/using Enzyme in general.