{"id":13422583,"url":"https://github.com/enzymejs/chai-enzyme","last_synced_at":"2025-04-13T02:15:46.202Z","repository":{"id":52162700,"uuid":"48797193","full_name":"enzymejs/chai-enzyme","owner":"enzymejs","description":"Chai.js assertions and convenience functions for testing React Components with enzyme","archived":false,"fork":false,"pushed_at":"2021-05-06T18:22:44.000Z","size":138,"stargazers_count":786,"open_issues_count":38,"forks_count":72,"subscribers_count":50,"default_branch":"master","last_synced_at":"2025-04-13T02:15:08.340Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/enzymejs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-12-30T11:13:21.000Z","updated_at":"2025-03-20T12:51:10.000Z","dependencies_parsed_at":"2022-08-20T16:50:27.552Z","dependency_job_id":null,"html_url":"https://github.com/enzymejs/chai-enzyme","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzymejs%2Fchai-enzyme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzymejs%2Fchai-enzyme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzymejs%2Fchai-enzyme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/enzymejs%2Fchai-enzyme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/enzymejs","download_url":"https://codeload.github.com/enzymejs/chai-enzyme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248654106,"owners_count":21140237,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T23:00:48.235Z","updated_at":"2025-04-13T02:15:46.175Z","avatar_url":"https://github.com/enzymejs.png","language":"JavaScript","funding_links":[],"categories":["Dev Tools","JavaScript"],"sub_categories":["Test"],"readme":"# chai-enzyme\n\n[![npm version](https://img.shields.io/npm/v/chai-enzyme.svg)](https://www.npmjs.com/package/chai-enzyme) [![License](https://img.shields.io/npm/l/chai-enzyme.svg)](https://www.npmjs.com/package/chai-enzyme) [![Build Status](https://travis-ci.org/producthunt/chai-enzyme.svg)](https://travis-ci.org/producthunt/chai-enzyme)\n\n[Chai.js](https://github.com/chaijs/chai) assertions for [enzyme](https://github.com/airbnb/enzyme/).\n\n## Table of Contents\n\n  1. [Installation](#installation)\n  1. [Setup](#setup)\n  1. [Debug output in assertion exceptions](#debug-output-in-assertion-exceptions)\n  1. [Assertions](#assertions)\n    1. [`checked()`](#checked)\n    1. [`className(str)`](#classnamestr)\n    1. [`contain(nodeOrNodes)`](#containnodeornodes)\n    1. [`containMatchingElement(node)`](#containmatchingelementnode)\n    1. [`descendants(selector)`](#descendantsselector)\n      1. [`exactly()`](#exactly)\n    1. [`disabled()`](#disabled)\n    1. [`blank()`](#blank)\n    1. [`present()`](#present)\n    1. [`html(str)`](#htmlstr)\n    1. [`id(str)`](#idstr)\n    1. [`match(selector)`](#matchselector)\n    1. [`ref(key)`](#refkey)\n    1. [`selected()`](#selected)\n    1. [`tagName(str)`](#tagnamestr)\n    1. [`text(str)`](#textstr)\n    1. [`type(func)`](#typefunc)\n    1. [`value(str)`](#valuestr)\n    1. [`attr(key, [val])`](#attrkey-val)\n    1. [`data(key, [val])`](#datakey-val)\n    1. [`style(key, [val])`](#stylekey-val)\n    1. [`state(key, [val])`](#statekey-val)\n    1. [`prop(key, [val])`](#propkey-val)\n    1. [`props(key, [val])`](#propskey-val)\n  1. [Development](#development)\n  1. [Contributing](#contributing)\n  1. [License](#license)\n\n## Installation\n\n`chai-enzyme` depends on:\n\n```js\n\"peerDependencies\": {\n  \"chai\": \"^3.0.0 || ^4.0.0\",\n  \"cheerio\": \"0.19.x || 0.20.x || 0.22.x || ^1.0.0-0\",\n  \"enzyme\": \"^2.7.0 || ^3.0.0\",\n  \"react\": \"^0.14.0 || ^15.0.0-0 || ^16.0.0-0\",\n  \"react-dom\": \"^0.14.0 || ^15.0.0-0 || ^16.0.0-0\"\n}\n```\n\n`cheerio` is already a dependency of `enzyme`, so most probably you will not have\nto install it manually\n\n```\n$ npm install chai-enzyme --save-dev\n```\n\n## Setup\n\n```js\nimport chai from 'chai'\nimport chaiEnzyme from 'chai-enzyme'\n\nchai.use(chaiEnzyme()) // Note the invocation at the end\n```\n\n## Debug output in assertion exceptions\n\nYou can also provide a custom debug function that can print useful information\nabout the `wrapper` that you are using.\n\nThe default one that chai-enzyme comes with, will pretty print the HTML of the\nwrapper under test.\n\n```shell\n  1) #text (text) (shallow): passes when the actual matches the expected:\n     AssertionError: expected \u003cFixture /\u003e to have text 'Test test', but it has 'Test'\n\n     ---------- this is where the debug output starts ----------\n\n     HTML:\n\n     \u003cspan id=\"child\"\u003eTest\u003c/span\u003e\n\n     ---------- this is where the debug output ends ----------\n```\n\nHere is how you can implement and configure one for yourself:\n\n```js\nfunction myAwesomeDebug (wrapper) {\n  let html = wrapper.html()\n  // do something cool with the html\n  return html\n}\n\nchai.use(chaiEnzyme(myAwesomeDebug))\n```\n\n## Assertions\n\nIt's important to know that all assertions are registered with Chai's `overwrite*`\nmethods and therefore this plugin can work next to other Chai.js plugins that have\nsimilar assertions, such as [chai-jquery](https://github.com/chaijs/chai-jquery).\n\nAt the beginning of each assertion, we verify if the provided object is a\n`ShallowWrapper`, `ReactWrapper` or a `cheerio` object and if not we delegate\nto the next assertion that responds to the given method.\n\nNote that not all assertions work with every rendering strategy.\n\nIf you are wondering what rendering mechanism to use when, refer to [enzyme's\ndocumentation](https://github.com/airbnb/enzyme).\n\n#### `checked()`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the given wrapper is checked:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cinput id='checked' defaultChecked /\u003e\n        \u003cinput id='not' defaultChecked={false} /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find('#checked')).to.be.checked()\nexpect(wrapper.find('#not')).to.not.be.checked()\n```\n\n#### `className(str)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the wrapper has a given class:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv className='root top'\u003e\n        \u003cspan className='child bottom'\u003etest\u003c/span\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find('span')).to.have.className('child')\nexpect(wrapper.find('span')).to.not.have.className('root')\n```\n\n#### `contain(nodeOrNodes)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| no     | yes   | yes     |\n\n\nAssert that the wrapper contains a given node or array of nodes:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\nimport PropTypes from 'prop-types';\n\nclass User extends React.Component {\n  render () {\n    return (\n      \u003cspan\u003eUser {this.props.index}\u003c/span\u003e\n    )\n  }\n}\n\nUser.propTypes = {\n  index: PropTypes.number.isRequired\n}\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003cUser index={1} /\u003e\u003c/li\u003e\n          \u003cli\u003e\n            \u003cUser index={2} /\u003e\n            \u003cUser index={3} /\u003e\n          \u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper).to.contain(\u003cUser index={1} /\u003e)\nexpect(wrapper).to.contain([\u003cUser index={2} /\u003e, \u003cUser index={3} /\u003e])\nexpect(wrapper).to.not.contain(\u003cUser index={3} /\u003e)\n```\n\n#### `containMatchingElement(node)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| no     | yes   | yes     |\n\n\nAssert that the wrapper contains a matching given node:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\nimport PropTypes from 'prop-types';\n\nclass User extends React.Component {\n  render () {\n    return (\n      \u003cspan\u003eUser {this.props.index} {this.props.name}\u003c/span\u003e\n    )\n  }\n}\n\nUser.propTypes = {\n  index: PropTypes.number,\n  name: PropTypes.string.isRequired\n}\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003cUser index={1} name='John' /\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cUser index={2} name='Doe' /\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper).to.containMatchingElement(\u003cUser name='John' /\u003e)\nexpect(wrapper).to.not.containMatchingElement(\u003cUser name='Conor' /\u003e)\n```\n\n#### `descendants(selector)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the wrapper contains a descendant matching the given selector:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass User extends React.Component {\n  render () {\n    return (\n      \u003cspan\u003eUser\u003c/span\u003e\n    )\n  }\n}\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv id='root'\u003e\n        \u003cUser /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper).to.have.descendants('#root')\nexpect(wrapper).to.have.descendants(User)\n\nexpect(wrapper).to.not.have.descendants('#root1')\n```\n\n#### `exactly()`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the wrapper contains an exact amount of descendants matching the given selector:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv id='root'\u003e\n        \u003cspan id='child'\u003e\n          \u003cspan class='item'\u003e\u003c/span\u003e\n          \u003cspan class='item'\u003e\u003c/span\u003e\n        \u003c/span\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper).to.have.exactly(2).descendants('.item')\n```\n\n#### `disabled()`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the given wrapper is disabled:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cinput id='disabled' disabled /\u003e\n        \u003cinput id='not' /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find('#disabled')).to.be.disabled()\nexpect(wrapper.find('#not')).to.not.be.disabled()\n```\n\n#### `blank()`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the given wrapper is empty:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv id='parent'\u003e\n        \u003cdiv id='child'\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find('#child')).to.be.blank()\nexpect(wrapper.find('#parent')).to.not.be.blank()\n\nexpect(wrapper.find('#child')).to.be.empty // an alias\nexpect(wrapper.find('#parent')).to.not.be.empty // an alias\n\nclass NullFixture extends React.Component {\n  render () {\n    return null\n  }\n}\n\nconst nullWrapper = mount(\u003cNullFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(nullWrapper).to.be.blank()\nexpect(nullWrapper).to.be.empty // an alias\n```\n\n#### `present()`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the given wrapper exists:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv id='parent'\u003e\u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find('#parent')).to.be.present()\nexpect(wrapper.find('#parent')).to.exist // an alias\n\nclass NullFixture extends React.Component {\n  render () {\n    return null\n  }\n}\n\nconst nullWrapper = mount(\u003cNullFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(nullWrapper).to.be.present()\nexpect(nullWrapper).to.exist // an alias\n```\n\n#### `html(str)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the wrapper has given html:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv id='root'\u003e\n        \u003cspan id='child'\u003eTest\u003c/span\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find('#child')).to.have.html('\u003cspan id=\"child\"\u003eTest\u003c/span\u003e')\n\nexpect(wrapper.find('#child')).to.not.have.html('\u003cspan id=\"child\"\u003eTest 1\u003c/span\u003e')\n\nexpect(wrapper.find('#child')).to.have.html().match(/Test/)\n```\n\n#### `id(str)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the wrapper has given ID attribute:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv id='root'\u003e\n        \u003cspan id='child'\u003etest\u003c/span\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper).to.have.id('root')\nexpect(wrapper).to.not.have.id('child')\n```\n\n#### `match(selector)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the wrapper matches given selector:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv id='root'\u003e\n        \u003cspan id='child'\u003etest\u003c/span\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find('span')).to.match('#child')\nexpect(wrapper.find('#root')).to.not.match('#child')\n```\n\n#### `ref(key)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| no     | yes   | no      |\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cinput ref='test' /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper).to.have.ref('test')\nexpect(wrapper).to.have.ref('random')\n```\n\n#### `selected()`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | no      |\n\n\nAssert that the given wrapper is selected:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cselect defaultValue='test1'\u003e\n        \u003coption id='test1' value='test1'\u003eTest 1\u003c/option\u003e\n        \u003coption id='test2' value='test2'\u003eTest 1\u003c/option\u003e\n      \u003c/select\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find('#test1')).to.be.selected()\nexpect(wrapper.find('#test2')).to.not.be.selected()\n```\n\n#### `tagName(str)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the given wrapper has the tag name:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cspan /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper).to.have.tagName('div')\nexpect(wrapper.find('span')).to.have.tagName('span')\n\nexpect(wrapper).to.not.have.tagName('a')\nexpect(wrapper.find('span')).to.not.have.tagName('a')\n```\n\n#### `text(str)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the given wrapper has the supplied text:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv id='root'\u003e\n        \u003cspan id='child'\u003eTest\u003c/span\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find('#child')).to.have.text('Test')\n\nexpect(wrapper.find('#child')).to.contain.text('Te')\nexpect(wrapper.find('#child')).to.include.text('Te') // include is an alias of contain\n\nexpect(wrapper.find('#child')).to.not.have.text('Other text')\nexpect(wrapper.find('#child')).to.not.include.text('Other text') // include is an alias of contain\n\nexpect(wrapper.find('#child')).to.have.text().match(/Test/)\n```\n\n#### `type(func)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| no     | yes   | yes     |\n\n\nAssert that the given wrapper has a given type:\n\n```js\nimport React from 'react'\nimport {shallow} from 'enzyme'\n\nclass Foo extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003eFoo\u003c/div\u003e\n    )\n  }\n}\n\nclass Bar extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003eBar\u003c/div\u003e\n    )\n  }\n}\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cFoo /\u003e\n    )\n  }\n}\n\nconst shallowWrapper = shallow(\u003cFixture /\u003e)\nconst mountWrapper = mount(\u003cFixture /\u003e)\n\nexpect(shallowWrapper).to.have.type(Foo)\nexpect(shallowWrapper).to.not.have.type(Bar)\n\nexpect(mountWrapper).to.have.type(Fixture)\nexpect(mountWrapper).to.not.have.type(Bar)\n```\n\n#### `value(str)`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the given wrapper has given value:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cinput defaultValue='test' /\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find('input')).to.have.value('test')\nexpect(wrapper.find('input')).to.not.have.value('other')\n```\n\n#### `attr(key, [val])`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the wrapper has given attribute [with value]:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv id='root'\u003e\n        \u003cspan id='child'\u003etest\u003c/span\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find('span')).to.have.attr('id')\nexpect(wrapper).to.not.have.attr('disabled')\n\nexpect(wrapper).to.have.attr('id', 'root')\nexpect(wrapper).to.not.have.attr('id', 'invalid')\n\nexpect(wrapper).to.have.attr('id').equal('root')\n```\n\n#### `data(key, [val])`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the wrapper has a given data attribute [with value]:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv data-name='root'\u003e\n        \u003cspan data-name='child'\u003etest\u003c/span\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper).to.have.data('name')\nexpect(wrapper).to.not.have.data('random')\n\nexpect(wrapper).to.have.data('name', 'root')\nexpect(wrapper).to.not.have.data('name', 'invalid')\n\nexpect(wrapper).to.have.data('name').equal('root')\n```\n\n#### `style(key, [val])`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| yes    | yes   | yes     |\n\n\nAssert that the wrapper has given style:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv style={{ border: 1 }}\u003e\n        \u003cspan style={{ color: 'red' }}\u003etest\u003c/span\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper).to.have.style('border')\nexpect(wrapper).to.not.have.style('color')\nexpect(wrapper).to.have.style('margin-top') // do not use camelCase keys as you would do in your React component\n\nexpect(wrapper).to.have.style('border', '1px')\nexpect(wrapper).to.not.have.style('border', '2px')\n\nexpect(wrapper).to.have.style('border').equal('1px')\n```\n\n#### `state(key, [val])`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| no     | yes   | yes     |\n\n\nAssert that the wrapper has given state [with value]:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\n\nclass Fixture extends React.Component {\n  constructor () {\n    super()\n    this.state = { foo: 'bar' }\n  }\n\n  render () {\n    return (\n      \u003cdiv id='root'\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper).to.have.state('foo')\nexpect(wrapper).to.not.have.state('bar')\n\n\nexpect(wrapper).to.have.state('foo', 'bar')\nexpect(wrapper).to.not.have.state('foo', 'baz')\n\nexpect(wrapper).to.have.state('foo').equal('bar')\n```\n\n\n#### `prop(key, [val])`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| no     | yes   | yes     |\n\nAssert that the wrapper has given prop [with value]:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\nimport PropTypes from 'prop-types';\n\nclass User extends React.Component {\n  render () {\n    return (\n      \u003cspan\u003eUser {this.props.index}\u003c/span\u003e\n    )\n  }\n}\n\nUser.propTypes = {\n  index: PropTypes.number.isRequired\n}\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003cUser index={1} user={{name: 'Jane'}} /\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cUser index={2} /\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find(User).first()).to.have.prop('index')\nexpect(wrapper.find(User).first()).to.not.have.prop('invalid')\n\n\nexpect(wrapper.find(User).first()).to.have.prop('index', 1)\nexpect(wrapper.find(User).first()).to.not.have.prop('index', 2)\n\nexpect(wrapper.find(User).first()).to.have.prop('index').equal(1)\nexpect(wrapper.find(User).first()).to.have.prop('user').deep.equal({name: 'Jane'})\n```\n\n#### `props(key, [val])`\n\n| render | mount | shallow |\n| -------|-------|-------- |\n| no     | yes   | yes     |\n\nAssert that the wrapper has given set of props [with values]:\n\n```js\nimport React from 'react'\nimport {mount, render, shallow} from 'enzyme'\nimport PropTypes from 'prop-types';\n\nclass User extends React.Component {\n  render () {\n    return (\n      \u003cspan\u003eUser {this.props.index}\u003c/span\u003e\n    )\n  }\n}\n\nUser.propTypes = {\n  index: PropTypes.number.isRequired\n}\n\nclass Fixture extends React.Component {\n  render () {\n    return (\n      \u003cdiv\u003e\n        \u003cul\u003e\n          \u003cli\u003e\u003cUser index={1} user={{name: 'Jane'}} /\u003e\u003c/li\u003e\n          \u003cli\u003e\u003cUser index={2} /\u003e\u003c/li\u003e\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    )\n  }\n}\n\nconst wrapper = mount(\u003cFixture /\u003e) // mount/render/shallow when applicable\n\nexpect(wrapper.find(User).first()).to.have.props([ 'index', 'user' ])\nexpect(wrapper.find(User).first()).to.not.have.props([ 'invalid' ])\n\n\nexpect(wrapper.find(User).first()).to.have.props({ index: 1 })\nexpect(wrapper.find(User).first()).to.not.have.props({ index: 2 })\n\nexpect(wrapper.find(User).first()).to.have.props([ 'index', 'user' ]).deep.equal([ 1, { name: 'Jane' } ])\n```\n\n## Development\n\n#### Setup\n\n```shell\n$ git clone \u003cthis repo\u003e\n$ cd chai-enzyme\n$ npm install\n```\n\n#### Tests\n\nLinters:\n\n```shell\n$ npm run test:lint\n```\n\nTests:\n\n```shell\n$ npm run test:unit\n```\n\nAll:\n\n```shell\n$ npm test\n```\n\n## Contributing\n\nWe want to make this assertion library as robust and complete as possible. If\nyou think that there are missing features/assertions, please open a GitHub issue or even\nbetter - a PR.\n\nBug reports and pull requests are welcome on GitHub. This project is intended to be a\nsafe, welcoming space for collaboration, and contributors are expected to adhere\nto the [Contributor Covenant](http://contributor-covenant.org/) code of conduct.\n\n## License\n\n[![Product Hunt](http://i.imgur.com/dtAr7wC.png)](https://www.producthunt.com)\n\n```\n _________________\n\u003c The MIT License \u003e\n -----------------\n        \\   ^__^\n         \\  (oo)\\_______\n            (__)\\       )\\/\\\n                ||----w |\n                ||     ||\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenzymejs%2Fchai-enzyme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fenzymejs%2Fchai-enzyme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fenzymejs%2Fchai-enzyme/lists"}