2017-03-29 08:35:24 +00:00
---
title: Enzyme
category: React
2020-07-04 13:33:09 +00:00
updated: 2020-02-12
2017-10-12 17:09:18 +00:00
tags: [Featured]
2017-09-14 09:19:13 +00:00
weight: -1
2017-10-15 18:02:23 +00:00
keywords:
- shallow()
- mount()
- wrap.setProps()
- "wrap.find().simulate('click')"
- "wrap.contains(< div /> )"
2017-03-29 08:35:24 +00:00
---
2017-09-14 10:03:54 +00:00
## Getting started
2017-10-12 10:12:44 +00:00
2020-07-05 14:38:31 +00:00
### Introduction
2020-07-05 15:35:26 +00:00
{: .-intro}
2020-07-05 14:38:31 +00:00
2022-11-01 03:29:32 +00:00
[Enzyme ](https://airbnb.io/enzyme ) lets you write unit tests for React components. This guide covers Enzyme 3.x.
2020-07-05 14:38:31 +00:00
- [Enzyme website ](https://enzymejs.github.io/enzyme/ ) _(enzymejs.github.io)_
2017-10-12 10:12:44 +00:00
### Mounting
{: .-prime}
```js
import {shallow, mount} from 'enzyme'
```
{: .-setup}
```js
wrap = shallow(< MyComponent / > )
```
```js
wrap = mount(< MyComponent / > )
```
Shallow wrapping doesn't descend down to sub-components.
A full mount also mounts sub-components.
2022-11-01 03:29:32 +00:00
See: [Shallow rendering ](https://airbnb.io/enzyme/docs/api/shallow.html ),
[Full rendering ](https://airbnb.io/enzyme/docs/api/mount.html )
2017-10-12 10:12:44 +00:00
### Debugging
```js
console.log(wrap.debug())
```
Shows HTML for debugging purposes.
2022-11-01 03:29:32 +00:00
See: [debug() ](https://airbnb.io/enzyme/docs/api/ReactWrapper/debug.html )
2017-10-12 10:12:44 +00:00
2017-10-12 16:43:39 +00:00
## Examples
{: .-three-column}
### Basic example
{: .-prime}
```js
import { shallow } from 'enzyme'
import MyComponent from '../MyComponent'
```
{: .-setup}
```js
it('works', () => {
const wrap = shallow(
< MyComponent name = 'Groot' / >
)
expect(wrap.text()).toEqual('I am Groot')
})
```
### Props and state
#### Setting
```js
wrap.setProps({ name: 'Moe' })
wrap.setState({ show: true })
```
#### Asserting
```js
2020-02-12 19:06:28 +00:00
expect(wrap.prop('name')).toEqual('Moe')
2017-10-12 16:43:39 +00:00
expect(wrap.state('show')).toEqual(true)
```
```js
2019-12-24 09:43:42 +00:00
expect('name' in wrap.props()).toEqual('Moe')
2017-10-12 16:43:39 +00:00
expect('show' in wrap.state()).toEqual(true)
```
### Matching elements
```js
expect(
wrap.containsMatchingElement(
< span > I am groot< / span >
)
).toBeTruthy()
```
`containsMatchingElement()` is probably the most useful assertion in Jest.
### Snapshots
```js
expect(wrap).toMatchSnapshot()
```
Be sure you've set up enzyme-to-json for snapshots (see [Installing ](#installing ) below).
### Traversions
```js
expect(
wrap.find('button').text()
).toEqual('Submit')
```
Use `.find()` to traverse down to nodes. It will return wrapper objects, too.
### Simulating events
```js
wrap.find('input').simulate('click')
```
#### With event object props
```js
wrap.find('input').simulate('change', {
target: { value: 'hello' }
})
```
2017-10-12 10:12:44 +00:00
## Installing
2017-09-14 10:03:54 +00:00
2017-10-12 10:10:12 +00:00
### Initial setup
```
2017-11-02 14:13:39 +00:00
npm install --save-dev enzyme \
2017-10-12 10:10:12 +00:00
enzyme-adapter-react-16 \
react-test-renderer
```
{: .-setup}
#### test/setup.js
```js
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({ adapter: new Adapter() })
```
#### package.json
```js
"jest": {
"setupFiles": [
"test/setup.js"
]
}
```
2017-10-12 10:12:44 +00:00
This configures Enzyme for React v16, and Jest to automatically configure Enzyme for you. There are other adapters in Enzyme's installation instructions.
2017-10-12 10:10:12 +00:00
2022-11-01 03:29:32 +00:00
See: [Installation ](https://airbnb.io/enzyme/#installation )
2017-09-14 10:03:54 +00:00
2017-10-12 10:10:12 +00:00
### Jest snapshots
2017-09-14 10:03:54 +00:00
2017-10-12 10:10:12 +00:00
```
npm install --save-dev enzyme-to-json
2017-09-14 10:03:54 +00:00
```
{: .-setup}
2017-10-12 10:10:12 +00:00
#### package.json
```js
"jest": {
"snapshotSerializers": [
"enzyme-to-json/serializer"
]
}
```
#### Test
2017-09-14 10:03:54 +00:00
```js
it('works', () => {
wrap = mount(< MyComponent / > )
2017-10-12 10:10:12 +00:00
expect(wrap).toMatchSnapshot()
2017-09-14 10:03:54 +00:00
})
```
2017-10-12 10:12:44 +00:00
Optional, but recommended: This allows you to use Enzyme wrappers with Jest snapshots.
2017-10-12 10:10:12 +00:00
See: [enzyme-to-json ](https://www.npmjs.com/package/enzyme-to-json )
2017-09-14 10:03:54 +00:00
## ReactWrapper
2017-03-29 08:35:24 +00:00
### Traversing
```js
2017-10-12 16:43:39 +00:00
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
2017-03-29 08:35:24 +00:00
```
```js
2017-10-12 16:43:39 +00:00
wrap.get(0) // → ReactElement
2019-12-31 22:59:57 +00:00
wrap.getElement() // → ReactElement
wrap.getElements() // → Array< ReactElement >
2017-10-12 16:43:39 +00:00
wrap.getDOMNode() // → DOMComponent
2017-03-29 08:35:24 +00:00
```
2022-11-01 03:29:32 +00:00
See: [Full rendering API ](https://airbnb.io/enzyme/docs/api/mount.html )
2017-09-14 10:03:54 +00:00
2017-03-29 08:35:24 +00:00
### Actions
```js
wrap.simulate('click')
```
### React components
```js
2017-10-12 16:43:39 +00:00
wrap.setState({ ··· })
wrap.setProps({ ··· })
wrap.setContext({ ··· })
```
2017-03-29 08:35:24 +00:00
2017-10-12 16:43:39 +00:00
```js
wrap.state() // get full state
wrap.props() // get full props
wrap.context() // get full context
```
2017-03-29 08:35:24 +00:00
2017-10-12 16:43:39 +00:00
```js
wrap.state('key') // → any
2019-12-24 09:43:42 +00:00
wrap.prop('key') // → any
2017-10-12 16:43:39 +00:00
wrap.context('key') // → any
```
```js
wrap.instance() // → ReactComponent
2017-03-29 08:35:24 +00:00
```
### Mount
```js
wrap.mount()
wrap.unmount()
wrap.update() // calls forceUpdate()
```
### Tests
```js
2017-10-12 16:43:39 +00:00
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.some('.child') // → boolean
wrap.someWhere(n => n.hasClass('foo'))
wrap.containsMatchingElement(< div / > ) // → boolean
wrap.containsAllMatchingElements([ < div / > ]) // → boolean
wrap.containsAnyMatchingElements([ < div / > ]) // → boolean
2017-03-29 08:35:24 +00:00
```
## References
2017-10-12 10:10:12 +00:00
- [Enzyme website ](https://airbnb.io/enzyme ) _(airbnb.io)_
- [Enzyme v2 cheatsheet ](./enzyme@2 ) _(devhints.io)_ (old version)