enzyme.md

   1 ---
   2 title: Enzyme
   3 category: React
   4 layout: 2017/sheet
   5 updated: 2020-02-12
   6 tags: [Featured]
   7 weight: -1
   8 keywords:
   9   - shallow()
  10   - mount()
  11   - wrap.setProps()
  12   - "wrap.find().simulate('click')"
  13   - "wrap.contains(<div/>)"
  14 ---
  15
  16 ## Getting started
  17
  18 ### Introduction
  19 {: .-intro}
  20
  21 [Enzyme](http://airbnb.io/enzyme) lets you write unit tests for React components. This guide covers Enzyme 3.x.
  22
  23 - [Enzyme website](https://enzymejs.github.io/enzyme/) _(enzymejs.github.io)_
  24
  25 ### Mounting
  26 {: .-prime}
  27
  28 ```js
  29 import {shallow, mount} from 'enzyme'
  30 ```
  31 {: .-setup}
  32
  33 ```js
  34 wrap = shallow(<MyComponent />)
  35 ```
  36
  37 ```js
  38 wrap = mount(<MyComponent />)
  39 ```
  40
  41 Shallow wrapping doesn't descend down to sub-components.
  42 A full mount also mounts sub-components.
  43
  44 See: [Shallow rendering](http://airbnb.io/enzyme/docs/api/shallow.html),
  45 [Full rendering](http://airbnb.io/enzyme/docs/api/mount.html)
  46
  47 ### Debugging
  48
  49 ```js
  50 console.log(wrap.debug())
  51 ```
  52
  53 Shows HTML for debugging purposes.
  54
  55 See: [debug()](http://airbnb.io/enzyme/docs/api/ReactWrapper/debug.html)
  56
  57 ## Examples
  58 {: .-three-column}
  59
  60 ### Basic example
  61 {: .-prime}
  62
  63 ```js
  64 import { shallow } from 'enzyme'
  65 import MyComponent from '../MyComponent'
  66 ```
  67 {: .-setup}
  68
  69 ```js
  70 it('works', () => {
  71   const wrap = shallow(
  72     <MyComponent name='Groot' />
  73   )
  74
  75   expect(wrap.text()).toEqual('I am Groot')
  76 })
  77 ```
  78
  79 ### Props and state
  80
  81 #### Setting
  82
  83 ```js
  84 wrap.setProps({ name: 'Moe' })
  85 wrap.setState({ show: true })
  86 ```
  87
  88 #### Asserting
  89
  90 ```js
  91 expect(wrap.prop('name')).toEqual('Moe')
  92 expect(wrap.state('show')).toEqual(true)
  93 ```
  94
  95 ```js
  96 expect('name' in wrap.props()).toEqual('Moe')
  97 expect('show' in wrap.state()).toEqual(true)
  98 ```
  99
 100 ### Matching elements
 101
 102 ```js
 103 expect(
 104   wrap.containsMatchingElement(
 105     <span>I am groot</span>
 106   )
 107 ).toBeTruthy()
 108 ```
 109
 110 `containsMatchingElement()` is probably the most useful assertion in Jest.
 111
 112 ### Snapshots
 113
 114 ```js
 115 expect(wrap).toMatchSnapshot()
 116 ```
 117
 118 Be sure you've set up enzyme-to-json for snapshots (see [Installing](#installing) below).
 119
 120 ### Traversions
 121
 122 ```js
 123 expect(
 124   wrap.find('button').text()
 125 ).toEqual('Submit')
 126 ```
 127
 128 Use `.find()` to traverse down to nodes. It will return wrapper objects, too.
 129
 130 ### Simulating events
 131
 132 ```js
 133 wrap.find('input').simulate('click')
 134 ```
 135
 136 #### With event object props
 137
 138 ```js
 139 wrap.find('input').simulate('change', {
 140   target: { value: 'hello' }
 141 })
 142 ```
 143
 144 ## Installing
 145
 146 ### Initial setup
 147
 148 ```
 149 npm install --save-dev enzyme \
 150   enzyme-adapter-react-16 \
 151   react-test-renderer
 152 ```
 153 {: .-setup}
 154
 155 #### test/setup.js
 156
 157 ```js
 158 import Enzyme from 'enzyme'
 159 import Adapter from 'enzyme-adapter-react-16'
 160
 161 Enzyme.configure({ adapter: new Adapter() })
 162 ```
 163
 164 #### package.json
 165
 166 ```js
 167 "jest": {
 168   "setupFiles": [
 169     "test/setup.js"
 170   ]
 171 }
 172 ```
 173
 174 This configures Enzyme for React v16, and Jest to automatically configure Enzyme for you. There are other adapters in Enzyme's installation instructions.
 175
 176 See: [Installation](http://airbnb.io/enzyme/#installation)
 177
 178 ### Jest snapshots
 179
 180 ```
 181 npm install --save-dev enzyme-to-json
 182 ```
 183 {: .-setup}
 184
 185 #### package.json
 186
 187 ```js
 188 "jest": {
 189   "snapshotSerializers": [
 190     "enzyme-to-json/serializer"
 191   ]
 192 }
 193 ```
 194
 195 #### Test
 196
 197 ```js
 198 it('works', () => {
 199   wrap = mount(<MyComponent />)
 200   expect(wrap).toMatchSnapshot()
 201 })
 202 ```
 203
 204 Optional, but recommended: This allows you to use Enzyme wrappers with Jest snapshots.
 205
 206 See: [enzyme-to-json](https://www.npmjs.com/package/enzyme-to-json)
 207
 208 ## ReactWrapper
 209
 210 ### Traversing
 211
 212 ```js
 213 wrap.find('button')   // → ReactWrapper
 214 wrap.filter('button') // → ReactWrapper
 215 wrap.not('span')      // → ReactWrapper (inverse of filter())
 216 wrap.children()       // → ReactWrapper
 217 wrap.parent()         // → ReactWrapper
 218 wrap.closest('div')   // → ReactWrapper
 219 wrap.childAt(0)       // → ReactWrapper
 220 wrap.at(0)            // → ReactWrapper
 221 wrap.first()          // → ReactWrapper
 222 wrap.last()           // → ReactWrapper
 223 ```
 224
 225 ```js
 226 wrap.get(0)           // → ReactElement
 227 wrap.getElement()     // → ReactElement
 228 wrap.getElements()    // → Array<ReactElement>
 229 wrap.getDOMNode()     // → DOMComponent
 230 ```
 231
 232 See: [Full rendering API](http://airbnb.io/enzyme/docs/api/mount.html)
 233
 234 ### Actions
 235
 236 ```js
 237 wrap.simulate('click')
 238 ```
 239
 240 ### React components
 241
 242 ```js
 243 wrap.setState({ ··· })
 244 wrap.setProps({ ··· })
 245 wrap.setContext({ ··· })
 246 ```
 247
 248 ```js
 249 wrap.state()         // get full state
 250 wrap.props()         // get full props
 251 wrap.context()       // get full context
 252 ```
 253
 254 ```js
 255 wrap.state('key')    // → any
 256 wrap.prop('key')     // → any
 257 wrap.context('key')  // → any
 258 ```
 259
 260 ```js
 261 wrap.instance()      // → ReactComponent
 262 ```
 263
 264 ### Mount
 265
 266 ```js
 267 wrap.mount()
 268 wrap.unmount()
 269 wrap.update()      // calls forceUpdate()
 270 ```
 271
 272 ### Tests
 273
 274 ```js
 275 wrap.debug()               // → string
 276 wrap.html()                // → string
 277 wrap.text()                // → string
 278 wrap.type()                // → string | function
 279 wrap.name()                // → string
 280 wrap.is('.classname')      // → boolean
 281 wrap.hasClass('class')     // → boolean
 282 wrap.exists()              // → boolean
 283 wrap.contains(<div />)     // → boolean
 284 wrap.contains([ <div /> ]) // → boolean
 285 wrap.some('.child')        // → boolean
 286
 287 wrap.someWhere(n => n.hasClass('foo'))
 288
 289 wrap.containsMatchingElement(<div />)         // → boolean
 290 wrap.containsAllMatchingElements([ <div /> ]) // → boolean
 291 wrap.containsAnyMatchingElements([ <div /> ]) // → boolean
 292 ```
 293
 294 ## References
 295
 296 - [Enzyme website](https://airbnb.io/enzyme) _(airbnb.io)_
 297 - [Enzyme v2 cheatsheet](./enzyme@2) _(devhints.io)_ (old version)