Enzyme3Gotchas.md

Enzyme 3 Gotchas

Some things have changed with enzyme 3 that deviate from version 2, and in some cases deviate from what even the enzyme docs suggest. Here's some of the gotchas I came across in upgrading from enzyme 2 to 3.

Accessing the DOM node

React

render () {
  return (
    <input type={this.props.type} />
  )
}

Enzyme

const type = 'number'
const subject = testbed.render({ type })
expect(subject.find('input').getDOMNode().type).to.equal(type)

Accessing properties on the component instance

React

class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    this.labelledBy = `foo-${uid()}`
  }
}

Enzyme

subject.instance().labelledBy

Accessing component props

React

<Button label="Foo"/>

Enzyme

subject.props('label')

Accessing component refs

React

render () {
  return (
    <div>
      <button ref={(el) => { this._button = el }}>Click ME!</button>
    </div>
  )
}

Enzyme

// This will give you a DOM node
subject.instance()._button

// This will give you a ReactWrapper instance
subject.find('button')

Getting a length double what expected

I'm still not 100% clear when this needs to be done but it seems to be when find is done with a CSS selector ¯_(ツ)_/¯

See enzyme's ugrade guide for more deets.

React

render () {
  return (
    <div>
      <div role="presentation">Hiii!</div>
    </div>
  )
}

Enzyme

// If you expected a single button but got 2, limit results to DOM nodes, not DOM nodes + React Components
subject.find('[role="presentation"]').length // 2
subject.find('[role="presentation"]').hostNodes().length // 1