133 lines
2.8 KiB
Markdown
133 lines
2.8 KiB
Markdown
---
|
|
title: Enzyme
|
|
category: React
|
|
layout: 2017/sheet
|
|
updated: 2017-09-14
|
|
weight: -1
|
|
---
|
|
|
|
## Getting started
|
|
{: .-three-column}
|
|
|
|
### 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.
|
|
See: [Shallow rendering](http://airbnb.io/enzyme/docs/api/shallow.html),
|
|
[Full rendering](http://airbnb.io/enzyme/docs/api/mount.html)
|
|
|
|
### Jest
|
|
|
|
```js
|
|
import toJson from 'enzyme-to-json'
|
|
```
|
|
{: .-setup}
|
|
|
|
```js
|
|
it('works', () => {
|
|
wrap = mount(<MyComponent />)
|
|
expect(toJson(wrap)).toMatchSnapshot()
|
|
})
|
|
```
|
|
|
|
Converts an Enzyme wrapper to a format compatible with Jest snapshots. See: [enzyme-to-json](https://www.npmjs.com/package/enzyme-to-json)
|
|
|
|
### Debugging
|
|
|
|
```js
|
|
console.log(wrap.debug())
|
|
```
|
|
|
|
Shows HTML for debugging purposes. See: [debug()](http://airbnb.io/enzyme/docs/api/ReactWrapper/debug.html)
|
|
|
|
## ReactWrapper
|
|
|
|
### Traversing
|
|
|
|
```js
|
|
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
|
|
```
|
|
|
|
```js
|
|
wrap.get(0) // => ReactElement
|
|
wrap.getNode() // => ReactElement
|
|
wrap.getNodes() // => Array<ReactElement>
|
|
wrap.getDOMNode() // => DOMComponent
|
|
```
|
|
|
|
See: [Full rendering API](http://airbnb.io/enzyme/docs/api/mount.html)
|
|
|
|
### Actions
|
|
|
|
```js
|
|
wrap.simulate('click')
|
|
```
|
|
|
|
### React components
|
|
|
|
```js
|
|
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
|
|
|
|
```js
|
|
wrap.mount()
|
|
wrap.unmount()
|
|
wrap.update() // calls forceUpdate()
|
|
```
|
|
|
|
### Tests
|
|
|
|
```js
|
|
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
|
|
|
|
- <https://airbnb.io/enzyme>
|