Skip to content

Latest commit

 

History

History
296 lines (220 loc) · 5.38 KB

enzyme.md

File metadata and controls

296 lines (220 loc) · 5.38 KB
Raw
title category updated tags weight keywords
Enzyme
React
2020-02-12
Featured
-1
shallow()
mount()
wrap.setProps()
wrap.find().simulate('click')
wrap.contains(<div/>)

Getting started

Introduction

{: .-intro}

Enzyme lets you write unit tests for React components. This guide covers Enzyme 3.x.

Mounting

{: .-prime}

import {shallow, mount} from 'enzyme'

{: .-setup}

wrap = shallow(<MyComponent />)
wrap = mount(<MyComponent />)

Shallow wrapping doesn't descend down to sub-components. A full mount also mounts sub-components.

See: Shallow rendering, Full rendering

Debugging

console.log(wrap.debug())

Shows HTML for debugging purposes.

See: debug()

Examples

{: .-three-column}

Basic example

{: .-prime}

import { shallow } from 'enzyme'
import MyComponent from '../MyComponent'

{: .-setup}

it('works', () => {
  const wrap = shallow(
    <MyComponent name='Groot' />
  )

  expect(wrap.text()).toEqual('I am Groot')
})

Props and state

Setting

wrap.setProps({ name: 'Moe' })
wrap.setState({ show: true })

Asserting

expect(wrap.prop('name')).toEqual('Moe')
expect(wrap.state('show')).toEqual(true)
expect('name' in wrap.props()).toEqual('Moe')
expect('show' in wrap.state()).toEqual(true)

Matching elements

expect(
  wrap.containsMatchingElement(
    <span>I am groot</span>
  )
).toBeTruthy()

containsMatchingElement() is probably the most useful assertion in Jest.

Snapshots

expect(wrap).toMatchSnapshot()

Be sure you've set up enzyme-to-json for snapshots (see Installing below).

Traversions

expect(
  wrap.find('button').text()
).toEqual('Submit')

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

Simulating events

wrap.find('input').simulate('click')

With event object props

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

Installing

Initial setup

npm install --save-dev enzyme \
  enzyme-adapter-react-16 \
  react-test-renderer

{: .-setup}

test/setup.js

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

Enzyme.configure({ adapter: new Adapter() })

package.json

"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.

See: Installation

Jest snapshots

npm install --save-dev enzyme-to-json

{: .-setup}

package.json

"jest": {
  "snapshotSerializers": [
    "enzyme-to-json/serializer"
  ]
}

Test

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

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

See: enzyme-to-json

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
wrap.get(0)           // → ReactElement
wrap.getElement()     // → ReactElement
wrap.getElements()    // → Array<ReactElement>
wrap.getDOMNode()     // → DOMComponent

See: Full rendering API

Actions

wrap.simulate('click')

React components

wrap.setState({ ··· })
wrap.setProps({ ··· })
wrap.setContext({ ··· })
wrap.state()         // get full state
wrap.props()         // get full props
wrap.context()       // get full context
wrap.state('key')    // → any
wrap.prop('key')     // → any
wrap.context('key')  // → any
wrap.instance()      // → ReactComponent

Mount

wrap.mount()
wrap.unmount()
wrap.update()      // calls forceUpdate()

Tests

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

References