cheatsheets/enzyme.md

title	category	layout	updated	weight	intro
Enzyme	React	2017/sheet	2017-10-12	-1	[Enzyme](http://airbnb.io/enzyme) lets you write unit tests for React components. This guide covers Enzyme 3.x.

Getting started

Mounting

{: .-prime}

import {shallow, mount} from 'enzyme'

{: .-setup}

wrap = shallow(<MyComponent />)

wrap = mount(<MyComponent />)

Shallow wrapping doesn't descend down to sub-components. A full mount also mounts sub-components.

See: Shallow rendering, Full rendering

Debugging

console.log(wrap.debug())

Shows HTML for debugging purposes.

See: debug()

Installing

Initial setup

npm install --save-dev enyzme \
  enzyme-adapter-react-16 \
  react-test-renderer

{: .-setup}

test/setup.js

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({ adapter: new Adapter() })

package.json

"jest": {
  "setupFiles": [
    "test/setup.js"
  ]
}

This configures Enzyme for React v16, and Jest to automatically configure Enzyme for you. There are other adapters in Enzyme's installation instructions.

See: Installation

Jest snapshots

npm install --save-dev enzyme-to-json

{: .-setup}

package.json

"jest": {
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ]
}

Test

it('works', () => {
  wrap = mount(<MyComponent />)
  expect(wrap).toMatchSnapshot()
})

Optional, but recommended: This allows you to use Enzyme wrappers with Jest snapshots.

See: enzyme-to-json

ReactWrapper

Traversing

wrap.find('button')   // => ReactWrapper
wrap.filter('button') // => ReactWrapper
wrap.not('span')      // => ReactWrapper (inverse of filter())
wrap.children()       // => ReactWrapper
wrap.parent()         // => ReactWrapper
wrap.closest('div')   // => ReactWrapper
wrap.childAt(0)       // => ReactWrapper
wrap.at(0)            // => ReactWrapper
wrap.first()          // => ReactWrapper
wrap.last()           // => ReactWrapper

wrap.get(0)           // => ReactElement
wrap.getNode()        // => ReactElement
wrap.getNodes()       // => Array<ReactElement>
wrap.getDOMNode()     // => DOMComponent

See: Full rendering API

Actions

wrap.simulate('click')

React components

wrap.setState({ ... })
wrap.setProps({ ... })
wrap.setContext({ ... })

wrap.state()            // => Any (get state)
wrap.props()            // => object (get props)
wrap.context()          // => Any (get context)

wrap.instance()         // => ReactComponent

Mount

wrap.mount()
wrap.unmount()
wrap.update()      // calls forceUpdate()

Tests

wrap.debug()               // => string
wrap.html()                // => string
wrap.text()                // => string
wrap.type()                // => string | function
wrap.name()                // => string
wrap.is('.classname')      // => boolean
wrap.hasClass('class')     // => boolean
wrap.exists()              // => boolean
wrap.contains(<div />)     // => boolean
wrap.contains([ <div /> ]) // => boolean

wrap.containsMatchingElement(<div />)         // => boolean
wrap.containsAllMatchingElements([ <div /> ]) // => boolean
wrap.containsAnyMatchingElements([ <div /> ]) // => boolean

References

• Enzyme website (airbnb.io)
• Enzyme v2 cheatsheet (devhints.io) (old version)