enyzme: update for v3

CONTRIBUTING.md

@@ -43,6 +43,7 @@ updated: 2017-08-30       # To show in the updated list
 ads: false                # Add this to disable ads
 weight: -5                # lower number = higher in related posts list
 deprecated: true          # Don't show in related posts
+deprecated_by: /enzyme    # Point to latest version
 prism_languages: [vim]    # Extra syntax highlighting
 intro: |
   This is some *Markdown* at the beginning of the article.

_layouts/2017/sheet.html

@@ -33,6 +33,13 @@
     </aside>
   {% endif %}
 
+  {% if page.deprecated_by %}
+    <aside class='notice-box'>
+      <strong>Deprecated:</strong> This guide covers an older version.
+      <a href='{{ base }}{{ page.deprecated_by }}'>A newer version is available here.</a>
+    </aside>
+  {% endif %}
+
   {% if page.intro %}
     <div class='intro-content MarkdownBody'>
       {{ page.intro | markdownify }}

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(<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
+### 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(<MyComponent />)
-  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([ <div /> ]) // => boolean
 
 ## References
 
-- <https://airbnb.io/enzyme>
+- [Enzyme website](https://airbnb.io/enzyme) _(airbnb.io)_
+- [Enzyme v2 cheatsheet](./enzyme@2) _(devhints.io)_ (old version)

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(<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>