{{ page.intro | markdownify }}
diff --git a/enzyme.md b/enzyme.md
index 116c2a9d2..e983c3ad2 100644
--- a/enzyme.md
+++ b/enzyme.md
@@ -2,13 +2,45 @@
title: Enzyme
category: React
layout: 2017/sheet
-updated: 2017-09-14
+updated: 2017-10-12
weight: -1
+intro: |
+ [Enzyme](http://airbnb.io/enzyme) lets you write unit tests for React components. This guide covers Enzyme 3.x.
---
## Getting started
{: .-three-column}
+### Initial setup
+
+```
+npm install --save-dev enyzme \
+ 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"
+ ]
+}
+```
+
+This configures Enzyme for React v16, and Jest to automatically configure Enzyme for you. There are other adapters in Enzyme's [installation instructions](http://airbnb.io/enzyme/#installation).
+
### Mounting
{: .-prime}
@@ -27,24 +59,39 @@ wrap = mount(
)
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
+### Jest snapshots
-```js
-import toJson from 'enzyme-to-json'
+```
+npm install --save-dev enzyme-to-json
```
{: .-setup}
+#### package.json
+
+```js
+"jest": {
+ "snapshotSerializers": [
+ "enzyme-to-json/serializer"
+ ]
+}
+```
+
+#### Test
+
```js
it('works', () => {
wrap = mount(
)
- expect(toJson(wrap)).toMatchSnapshot()
+ expect(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)
+Converts an Enzyme wrapper to a format compatible with Jest snapshots.
+
+See: [enzyme-to-json](https://www.npmjs.com/package/enzyme-to-json)
### Debugging
@@ -52,7 +99,9 @@ Converts an Enzyme wrapper to a format compatible with Jest snapshots. See: [enz
console.log(wrap.debug())
```
-Shows HTML for debugging purposes. See: [debug()](http://airbnb.io/enzyme/docs/api/ReactWrapper/debug.html)
+Shows HTML for debugging purposes.
+
+See: [debug()](http://airbnb.io/enzyme/docs/api/ReactWrapper/debug.html)
## ReactWrapper
@@ -129,4 +178,5 @@ wrap.containsAnyMatchingElements([
]) // => boolean
## References
--
+- [Enzyme website](https://airbnb.io/enzyme) _(airbnb.io)_
+- [Enzyme v2 cheatsheet](./enzyme@2) _(devhints.io)_ (old version)
diff --git a/enzyme@2.md b/enzyme@2.md
new file mode 100644
index 000000000..09acba2d6
--- /dev/null
+++ b/enzyme@2.md
@@ -0,0 +1,135 @@
+---
+title: Enzyme v2
+category: React
+layout: 2017/sheet
+updated: 2017-09-14
+weight: -1
+deprecated_by: /enzyme
+intro: |
+ [Enzyme](http://airbnb.io/enzyme) lets you write unit tests for React components. This guide covers Enzyme 2.x.
+---
+
+## Getting started
+{: .-three-column}
+
+### Mounting
+{: .-prime}
+
+```js
+import {shallow, mount} from 'enzyme'
+```
+{: .-setup}
+
+```js
+wrap = shallow()
+```
+
+```js
+wrap = mount()
+```
+
+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()
+ 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
+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() // => boolean
+wrap.contains([ ]) // => boolean
+
+wrap.containsMatchingElement() // => boolean
+wrap.containsAllMatchingElements([ ]) // => boolean
+wrap.containsAnyMatchingElements([ ]) // => boolean
+```
+
+## References
+
+-