Baike.dev
All toolsOnline toolsAI codingTrendingOpen sourceNewsSubmit
Log in
< Back to tools
C

chai-enzyme

> 编程语言
Open source

Chai.js assertions and convenience functions for testing React Components with enzyme

780 stars0 likes0 views
WebsiteGitHub

About

Chai.js assertions and convenience functions for testing React Components with enzyme

chai-enzyme

Chai.js assertions for enzyme.

Table of Contents

  1. Installation
  2. Setup
  3. Debug output in assertion exceptions
  4. Assertions 1. checked() 1. className(str) 1. contain(nodeOrNodes) 1. containMatchingElement(node) 1. descendants(selector)
    1. exactly()
      1. disabled()
      2. blank()
      3. present()
      4. html(str)
      5. id(str)
      6. match(selector)
      7. ref(key)
      8. selected()
      9. tagName(str)
      10. text(str)
      11. type(func)
      12. value(str)
      13. attr(key, [val])
      14. data(key, [val])
      15. style(key, [val])
      16. state(key, [val])
      17. prop(key, [val])
      18. props(key, [val])
  5. Development
  6. Contributing
  7. License

Installation

chai-enzyme depends on:

javascript
"peerDependencies": {
  "chai": "^3.0.0 || ^4.0.0",
  "cheerio": "0.19.x || 0.20.x || 0.22.x || ^1.0.0-0",
  "enzyme": "^2.7.0 || ^3.0.0",
  "react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0",
  "react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
}

cheerio is already a dependency of enzyme, so most probably you will not have to install it manually

$ npm install chai-enzyme --save-dev

Setup

javascript
import chai from 'chai'
import chaiEnzyme from 'chai-enzyme'

chai.use(chaiEnzyme()) // Note the invocation at the end

Debug output in assertion exceptions

You can also provide a custom debug function that can print useful information about the wrapper that you are using.

The default one that chai-enzyme comes with, will pretty print the HTML of the wrapper under test.

bash
  1) #text (text) (shallow): passes when the actual matches the expected:
     AssertionError: expected  to have text 'Test test', but it has 'Test'

     ---------- this is where the debug output starts ----------

     HTML:

     Test

     ---------- this is where the debug output ends ----------

Here is how you can implement and configure one for yourself:

javascript
function myAwesomeDebug (wrapper) {
  let html = wrapper.html()
  // do something cool with the html
  return html
}

chai.use(chaiEnzyme(myAwesomeDebug))

Assertions

It's important to know that all assertions are registered with Chai's overwrite* methods and therefore this plugin can work next to other Chai.js plugins that have similar assertions, such as chai-jquery.

At the beginning of each assertion, we verify if the provided object is a ShallowWrapper, ReactWrapper or a cheerio object and if not we delegate to the next assertion that responds to the given method.

Note that not all assertions work with every rendering strategy.

If you are wondering what rendering mechanism to use when, refer to enzyme's documentation.

checked()

render mount shallow
yes yes yes

Assert that the given wrapper is checked:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper.find('#checked')).to.be.checked()
expect(wrapper.find('#not')).to.not.be.checked()

className(str)

render mount shallow
yes yes yes

Assert that the wrapper has a given class:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper.find('span')).to.have.className('child')
expect(wrapper.find('span')).to.not.have.className('root')

contain(nodeOrNodes)

render mount shallow
no yes yes

Assert that the wrapper contains a given node or array of nodes:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'
import PropTypes from 'prop-types';

class User extends React.Component {
  render () {
    return (
      User {this.props.index}
    )
  }
}

User.propTypes = {
  index: PropTypes.number.isRequired
}

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper).to.contain()
expect(wrapper).to.contain([, ])
expect(wrapper).to.not.contain()

containMatchingElement(node)

render mount shallow
no yes yes

Assert that the wrapper contains a matching given node:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'
import PropTypes from 'prop-types';

class User extends React.Component {
  render () {
    return (
      User {this.props.index} {this.props.name}
    )
  }
}

User.propTypes = {
  index: PropTypes.number,
  name: PropTypes.string.isRequired
}

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper).to.containMatchingElement()
expect(wrapper).to.not.containMatchingElement()

descendants(selector)

render mount shallow
yes yes yes

Assert that the wrapper contains a descendant matching the given selector:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class User extends React.Component {
  render () {
    return (
      User
    )
  }
}

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper).to.have.descendants('#root')
expect(wrapper).to.have.descendants(User)

expect(wrapper).to.not.have.descendants('#root1')

exactly()

render mount shallow
yes yes yes

Assert that the wrapper contains an exact amount of descendants matching the given selector:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper).to.have.exactly(2).descendants('.item')

disabled()

render mount shallow
yes yes yes

Assert that the given wrapper is disabled:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper.find('#disabled')).to.be.disabled()
expect(wrapper.find('#not')).to.not.be.disabled()

blank()

render mount shallow
yes yes yes

Assert that the given wrapper is empty:

…

present()

render mount shallow
yes yes yes

Assert that the given wrapper exists:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper.find('#parent')).to.be.present()
expect(wrapper.find('#parent')).to.exist // an alias

class NullFixture extends React.Component {
  render () {
    return null
  }
}

const nullWrapper = mount() // mount/render/shallow when applicable

expect(nullWrapper).to.be.present()
expect(nullWrapper).to.exist // an alias

html(str)

render mount shallow
yes yes yes

Assert that the wrapper has given html:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper.find('#child')).to.have.html('Test')

expect(wrapper.find('#child')).to.not.have.html('Test 1')

expect(wrapper.find('#child')).to.have.html().match(/Test/)

id(str)

render mount shallow
yes yes yes

Assert that the wrapper has given ID attribute:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper).to.have.id('root')
expect(wrapper).to.not.have.id('child')

match(selector)

render mount shallow
yes yes yes

Assert that the wrapper matches given selector:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper.find('span')).to.match('#child')
expect(wrapper.find('#root')).to.not.match('#child')

ref(key)

render mount shallow
no yes no
javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper).to.have.ref('test')
expect(wrapper).to.have.ref('random')

selected()

render mount shallow
yes yes no

Assert that the given wrapper is selected:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class Fixture extends React.Component {
  render () {
    return (
      
        Test 1
        Test 1
      
    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper.find('#test1')).to.be.selected()
expect(wrapper.find('#test2')).to.not.be.selected()

tagName(str)

render mount shallow
yes yes yes

Assert that the given wrapper has the tag name:

javascript
import React from 'react'
import {mount, render, shallow} from 'enzyme'

class Fixture extends React.Component {
  render () {
    return (
      

    )
  }
}

const wrapper = mount() // mount/render/shallow when applicable

expect(wrapper).to.have.tagName('div')
expect(wrapper.find('span')).to.have.tagName('span')

expect(wrapper).to.not.have.tagName('a')
expect(wrapper.find('span')).to.not.have.tagName('a')

text(str)

render mount shallow
yes yes yes

Assert that the given wrapper has the supplied text:

…

type(func)

render mount shallow
no yes yes

Assert that the given wrapper has a given type:

javascript
import React from 'react'
import {shallow} from 'enzyme'

class Foo extends React.Component {
  render () {
    return (
      

    )
  }
}

class Bar extends Rea

Issues· 38 open

View all issuesOpen on GitHub

No open issues yet, or sync has not completed.

> Tags

JavaScript

No comments yet. Be the first to share.

> Details

PublishedAug 1, 2026
UpdatedSep 17, 2026
Category编程语言
PricingOpen source

> Related tools

T
TypeScript
JavaScript 的超集，为前端与全栈提供静态类型
P
Python
通用编程语言，广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言