enzyme@2.md

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