enzyme@2.md

   1 ---
   2 title: Enzyme v2
   3 category: React
   4 layout: 2017/sheet
   5 updated: 2017-10-12
   6 weight: -1
   7 deprecated_by: /enzyme
   8 ---
   9
  10 ## Getting started
  11 {: .-three-column}
  12
  13 ### Introduction
  14 {: .-intro}
  15
  16 **(Deprecated)** [Enzyme](http://airbnb.io/enzyme) lets you write unit tests for React components. This guide covers a previous version (v2.x).
  17
  18 ### Mounting
  19 {: .-prime}
  20
  21 ```js
  22 import {shallow, mount} from 'enzyme'
  23 ```
  24 {: .-setup}
  25
  26 ```js
  27 wrap = shallow(<MyComponent />)
  28 ```
  29
  30 ```js
  31 wrap = mount(<MyComponent />)
  32 ```
  33
  34 Shallow wrapping doesn't descend down to sub-components.
  35 A full mount also mounts sub-components.
  36 See: [Shallow rendering](http://airbnb.io/enzyme/docs/api/shallow.html),
  37 [Full rendering](http://airbnb.io/enzyme/docs/api/mount.html)
  38
  39 ### Jest
  40
  41 ```js
  42 import toJson from 'enzyme-to-json'
  43 ```
  44 {: .-setup}
  45
  46 ```js
  47 it('works', () => {
  48   wrap = mount(<MyComponent />)
  49   expect(toJson(wrap)).toMatchSnapshot()
  50 })
  51 ```
  52
  53 Converts an Enzyme wrapper to a format compatible with Jest snapshots. See: [enzyme-to-json](https://www.npmjs.com/package/enzyme-to-json)
  54
  55 ### Debugging
  56
  57 ```js
  58 console.log(wrap.debug())
  59 ```
  60
  61 Shows HTML for debugging purposes. See: [debug()](http://airbnb.io/enzyme/docs/api/ReactWrapper/debug.html)
  62
  63 ## ReactWrapper
  64
  65 ### Traversing
  66
  67 ```js
  68 wrap.find('button')   // => ReactWrapper
  69 wrap.filter('button') // => ReactWrapper
  70 wrap.not('span')      // => ReactWrapper (inverse of filter())
  71 wrap.children()       // => ReactWrapper
  72 wrap.parent()         // => ReactWrapper
  73 wrap.closest('div')   // => ReactWrapper
  74 wrap.childAt(0)       // => ReactWrapper
  75 wrap.at(0)            // => ReactWrapper
  76 wrap.first()          // => ReactWrapper
  77 wrap.last()           // => ReactWrapper
  78 ```
  79
  80 ```js
  81 wrap.get(0)           // => ReactElement
  82 wrap.getNode()        // => ReactElement
  83 wrap.getNodes()       // => Array<ReactElement>
  84 wrap.getDOMNode()     // => DOMComponent
  85 ```
  86
  87 See: [Full rendering API](http://airbnb.io/enzyme/docs/api/mount.html)
  88
  89 ### Actions
  90
  91 ```js
  92 wrap.simulate('click')
  93 ```
  94
  95 ### React components
  96
  97 ```js
  98 wrap.setState({ ... })
  99 wrap.setProps({ ... })
 100 wrap.setContext({ ... })
 101
 102 wrap.state()            // => Any (get state)
 103 wrap.props()            // => object (get props)
 104 wrap.context()          // => Any (get context)
 105
 106 wrap.instance()         // => ReactComponent
 107 ```
 108
 109 ### Mount
 110
 111 ```js
 112 wrap.mount()
 113 wrap.unmount()
 114 wrap.update()      // calls forceUpdate()
 115 ```
 116
 117 ### Tests
 118
 119 ```js
 120 wrap.debug()               // => string
 121 wrap.html()                // => string
 122 wrap.text()                // => string
 123 wrap.type()                // => string | function
 124 wrap.name()                // => string
 125 wrap.is('.classname')      // => boolean
 126 wrap.hasClass('class')     // => boolean
 127 wrap.exists()              // => boolean
 128 wrap.contains(<div />)     // => boolean
 129 wrap.contains([ <div /> ]) // => boolean
 130
 131 wrap.containsMatchingElement(<div />)         // => boolean
 132 wrap.containsAllMatchingElements([ <div /> ]) // => boolean
 133 wrap.containsAnyMatchingElements([ <div /> ]) // => boolean
 134 ```
 135
 136 ## References
 137
 138 - <https://airbnb.io/enzyme>