Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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

like image 712
maasha Avatar asked May 20 '17 06:05

maasha


People also ask

What is the difference between shallow mount and render in Enzyme?

The difference between shallow() and mount() is that shallow() tests components in isolation from the child components they render while mount()goes deeper and tests a component's children.

What is the benefit of shallow rendering?

Shallow rendering lets you render a component “one level deep” and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.

What does Shallow do in Enzyme?

shallow method is used to render the single component that we are testing. It does not render child components. In Enzyme version less than 3, the shallow method does not have the ability to access lifecycle methods. But in Enzyme version 3, we have this ability.

What is the ideal outcome of using shallow tests?

Shallow tests might be good quick win practice optimizing tests. Isolation. It's quite common to add a new dependency to a resuable directive or component. It tends to break other tests because something is missing in dependency injection tree.


1 Answers

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.

like image 101
Preview Avatar answered Sep 18 '22 17:09

Preview