Enzyme gotchas

enzyme.md

Enzyme gotchas

Things to look out for when writing Enzyme tests

https://airbnb.io/enzyme/docs/api/

Gotchas

Props not updating

For each prop change the target element must be re-queried.

For example, let's say our component updates a prop called hasBeenClicked whenever the component is clicked

const button = container.find('button')
button.prop('hasBeenClick') // false

button.simulate('click')

// props should now be updated

container.find('button').prop('hasBeenClick') // true
button.prop('hasBeenClick') // false

NOTE: if the props don't update call container.update() before you re-query the element.

Shallow vs Mount vs Render

Just use mount

https://kentcdodds.com/blog/why-i-never-use-shallow-rendering

Cheatsheet

• finding an element - container.find('selector')
• finding nested sub-elements - container.find('selector').find('child')
• checking class names - container.find('selector').hasClass('foo')
• checking element's text value - container.find('selector').text()
• simulating events - container.find('selector').simulate('event-name')