DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 968,873 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Lรขm
Lรขm

Posted on

Enzyme Cheat Sheet

References

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.some('.child')        // โ†’ boolean

wrap.someWhere(n => n.hasClass('foo'))

wrap.containsMatchingElement(<div />)         // โ†’ boolean
wrap.containsAllMatchingElements([ <div /> ]) // โ†’ boolean
wrap.containsAnyMatchingElements([ <div /> ]) // โ†’ boolean
Enter fullscreen mode Exit fullscreen mode

[ReactWrapper] Mount

wrap.mount()
wrap.unmount()
wrap.update()      // calls forceUpdate()
Enter fullscreen mode Exit fullscreen mode

[ReactWrapper] React components

wrap.setState({ ยทยทยท })
wrap.setProps({ ยทยทยท })
wrap.setContext({ ยทยทยท })
Enter fullscreen mode Exit fullscreen mode
wrap.state()         // get full state
wrap.props()         // get full props
wrap.context()       // get full context
Enter fullscreen mode Exit fullscreen mode
wrap.state('key')    // โ†’ any
wrap.prop('key')     // โ†’ any
wrap.context('key')  // โ†’ any
Enter fullscreen mode Exit fullscreen mode
wrap.instance()      // โ†’ ReactComponent
Enter fullscreen mode Exit fullscreen mode

[ReactWrapper] Actions

wrap.simulate('click')
Enter fullscreen mode Exit fullscreen mode

[ReactWrapper] Traversing

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
Enter fullscreen mode Exit fullscreen mode
wrap.get(0)           // โ†’ ReactElement
wrap.getElement()     // โ†’ ReactElement
wrap.getElements()    // โ†’ Array<ReactElement>
wrap.getDOMNode()     // โ†’ DOMComponent
Enter fullscreen mode Exit fullscreen mode

See: Full rendering API

[Installing] Jest snapshots

npm install --save-dev enzyme-to-json
Enter fullscreen mode Exit fullscreen mode

{: .-setup}

package.json

"jest": {
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Test

it('works', () => {
  wrap = mount(<MyComponent />)
  expect(wrap).toMatchSnapshot()
})
Enter fullscreen mode Exit fullscreen mode

Optional, but recommended: This allows you to use Enzyme wrappers with Jest snapshots.

See: enzyme-to-json

[Installing] Initial setup

npm install --save-dev enzyme \
  enzyme-adapter-react-16 \
  react-test-renderer
Enter fullscreen mode Exit fullscreen mode

{: .-setup}

test/setup.js

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

Enzyme.configure({ adapter: new Adapter() })
Enter fullscreen mode Exit fullscreen mode

package.json

"jest": {
  "setupFiles": [
    "test/setup.js"
  ]
}
Enter fullscreen mode Exit fullscreen mode

This configures Enzyme for React v16, and Jest to automatically configure Enzyme for you. There are other adapters in Enzyme's installation instructions.

See: Installation

[Examples] Simulating events

wrap.find('input').simulate('click')
Enter fullscreen mode Exit fullscreen mode

With event object props

wrap.find('input').simulate('change', {
  target: { value: 'hello' }
})
Enter fullscreen mode Exit fullscreen mode

[Examples] Traversions

expect(
  wrap.find('button').text()
).toEqual('Submit')
Enter fullscreen mode Exit fullscreen mode

Use .find() to traverse down to nodes. It will return wrapper objects, too.

Reference

Top comments (0)

๐ŸŒš Life is too short to browse without dark mode