12 - "wrap.find().simulate('click')"
13 - "wrap.contains(<div/>)"
21 [Enzyme](http://airbnb.io/enzyme) lets you write unit tests for React components. This guide covers Enzyme 3.x.
23 - [Enzyme website](https://enzymejs.github.io/enzyme/) _(enzymejs.github.io)_
29 import {shallow, mount} from 'enzyme'
34 wrap = shallow(<MyComponent />)
38 wrap = mount(<MyComponent />)
41 Shallow wrapping doesn't descend down to sub-components.
42 A full mount also mounts sub-components.
44 See: [Shallow rendering](http://airbnb.io/enzyme/docs/api/shallow.html),
45 [Full rendering](http://airbnb.io/enzyme/docs/api/mount.html)
50 console.log(wrap.debug())
53 Shows HTML for debugging purposes.
55 See: [debug()](http://airbnb.io/enzyme/docs/api/ReactWrapper/debug.html)
64 import { shallow } from 'enzyme'
65 import MyComponent from '../MyComponent'
72 <MyComponent name='Groot' />
75 expect(wrap.text()).toEqual('I am Groot')
84 wrap.setProps({ name: 'Moe' })
85 wrap.setState({ show: true })
91 expect(wrap.prop('name')).toEqual('Moe')
92 expect(wrap.state('show')).toEqual(true)
96 expect('name' in wrap.props()).toEqual('Moe')
97 expect('show' in wrap.state()).toEqual(true)
100 ### Matching elements
104 wrap.containsMatchingElement(
105 <span>I am groot</span>
110 `containsMatchingElement()` is probably the most useful assertion in Jest.
115 expect(wrap).toMatchSnapshot()
118 Be sure you've set up enzyme-to-json for snapshots (see [Installing](#installing) below).
124 wrap.find('button').text()
128 Use `.find()` to traverse down to nodes. It will return wrapper objects, too.
130 ### Simulating events
133 wrap.find('input').simulate('click')
136 #### With event object props
139 wrap.find('input').simulate('change', {
140 target: { value: 'hello' }
149 npm install --save-dev enzyme \
150 enzyme-adapter-react-16 \
158 import Enzyme from 'enzyme'
159 import Adapter from 'enzyme-adapter-react-16'
161 Enzyme.configure({ adapter: new Adapter() })
174 This configures Enzyme for React v16, and Jest to automatically configure Enzyme for you. There are other adapters in Enzyme's installation instructions.
176 See: [Installation](http://airbnb.io/enzyme/#installation)
181 npm install --save-dev enzyme-to-json
189 "snapshotSerializers": [
190 "enzyme-to-json/serializer"
199 wrap = mount(<MyComponent />)
200 expect(wrap).toMatchSnapshot()
204 Optional, but recommended: This allows you to use Enzyme wrappers with Jest snapshots.
206 See: [enzyme-to-json](https://www.npmjs.com/package/enzyme-to-json)
213 wrap.find('button') // → ReactWrapper
214 wrap.filter('button') // → ReactWrapper
215 wrap.not('span') // → ReactWrapper (inverse of filter())
216 wrap.children() // → ReactWrapper
217 wrap.parent() // → ReactWrapper
218 wrap.closest('div') // → ReactWrapper
219 wrap.childAt(0) // → ReactWrapper
220 wrap.at(0) // → ReactWrapper
221 wrap.first() // → ReactWrapper
222 wrap.last() // → ReactWrapper
226 wrap.get(0) // → ReactElement
227 wrap.getElement() // → ReactElement
228 wrap.getElements() // → Array<ReactElement>
229 wrap.getDOMNode() // → DOMComponent
232 See: [Full rendering API](http://airbnb.io/enzyme/docs/api/mount.html)
237 wrap.simulate('click')
243 wrap.setState({ ··· })
244 wrap.setProps({ ··· })
245 wrap.setContext({ ··· })
249 wrap.state() // get full state
250 wrap.props() // get full props
251 wrap.context() // get full context
255 wrap.state('key') // → any
256 wrap.prop('key') // → any
257 wrap.context('key') // → any
261 wrap.instance() // → ReactComponent
269 wrap.update() // calls forceUpdate()
275 wrap.debug() // → string
276 wrap.html() // → string
277 wrap.text() // → string
278 wrap.type() // → string | function
279 wrap.name() // → string
280 wrap.is('.classname') // → boolean
281 wrap.hasClass('class') // → boolean
282 wrap.exists() // → boolean
283 wrap.contains(<div />) // → boolean
284 wrap.contains([ <div /> ]) // → boolean
285 wrap.some('.child') // → boolean
287 wrap.someWhere(n => n.hasClass('foo'))
289 wrap.containsMatchingElement(<div />) // → boolean
290 wrap.containsAllMatchingElements([ <div /> ]) // → boolean
291 wrap.containsAnyMatchingElements([ <div /> ]) // → boolean
296 - [Enzyme website](https://airbnb.io/enzyme) _(airbnb.io)_
297 - [Enzyme v2 cheatsheet](./enzyme@2) _(devhints.io)_ (old version)