Enzyme: When to use shallow, render, or mount?

reactjs enzyme
maasha picture maasha · May 20, 2017 · Viewed 7.6k times · Source

From the Enzyme docs shallow, render, and mount are described, but when to use which method?

Answer

Balthazar picture Balthazar · May 20, 2017

shallow

  • No children rendering
  • Isolated, you know for sure the error comes from here

render

  • No lifecycles
  • Render children
  • Less APIs (setState, debug...)

mount

Will require jsdom or similar.

  • Lifecycle methods, like componentDidMount
  • Render children

If some of your children are connected components, you probably don't want to use mount, or you will need to setup a <Provider> and store creation, which would be a bit painful, just use shallow in this case.

This post is really insightful about the subject.

Related questions

Simulate a button click in Jest

Simulating a button click seems like a very easy/standard operation. Yet, I can't get it to work in Jest.js tests. This is what I tried (and also doing it using jQuery), but it didn't seem to trigger anything: …

Read More
Enzyme - How to access and set <input> value?

I'm confused about how to access <input> value when using mount. Here's what I've got as my test: it('cancels changes when user presses esc', done => { const wrapper = mount(<EditableText defaultValue="Hello" />); const input = wrapper.…

Read More
Jest spyOn function called

I'm trying to write a simple test for a simple React component, and I want to use Jest to confirm that a function has been called when I simulate a click with enzyme. According to the Jest docs, I should …

Read More