chai-enzyme
Chai.js assertions for enzyme.
Table of Contents
- Installation
- Setup
- Debug output in assertion exceptions
- Assertions
checked()
className(str)
contain(nodeOrNodes)
containMatchingElement(node)
descendants(selector)
exactly()
disabled()
blank()
present()
html(str)
id(str)
match(selector)
ref(key)
selected()
tagName(str)
text(str)
type(func)
value(str)
attr(key, [val])
data(key, [val])
style(key, [val])
state(key, [val])
prop(key, [val])
props(key, [val])
- Development
- Contributing
- License
Installation
chai-enzyme
depends on:
"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
chai // 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.
1) #text (text) (shallow): passes when the actual matches the expected: AssertionError: expected <Fixture /> to have text 'Test test', but it has 'Test' ---------- this is where the debug output starts ---------- HTML: <span id="child">Test</span> ---------- this is where the debug output ends ----------
Here is how you can implement and configure one for yourself:
{ let html = wrapper // do something cool with the html return html} chai
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:
Component { return <div> <input id='checked' defaultChecked /> <input id='not' defaultChecked=false /> </div> } const wrapper = // mount/render/shallow when applicable tobecheckedtonotbechecked
className(str)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the wrapper has a given class:
Component { return <div className='root top'> <span className='child bottom'>test</span> </div> } const wrapper = // mount/render/shallow when applicable tohaveclassName'child'tonothaveclassName'root'
contain(nodeOrNodes)
render | mount | shallow |
---|---|---|
no | yes | yes |
Assert that the wrapper contains a given node or array of nodes:
; Component { return <span>User thispropsindex</span> } UserpropTypes = index: PropTypesnumberisRequired Component { return <div> <ul> <li><User index=1 /></li> <li> <User index=2 /> <User index=3 /> </li> </ul> </div> } const wrapper = // mount/render/shallow when applicable tototonot
containMatchingElement(node)
render | mount | shallow |
---|---|---|
no | yes | yes |
Assert that the wrapper contains a matching given node:
; Component { return <span>User thispropsindex thispropsname</span> } UserpropTypes = index: PropTypesnumber name: PropTypesstringisRequired Component { return <div> <ul> <li><User index=1 name='John' /></li> <li><User index=2 name='Doe' /></li> </ul> </div> } const wrapper = // mount/render/shallow when applicable totonot
descendants(selector)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the wrapper contains a descendant matching the given selector:
Component { return <span>User</span> } Component { return <div id='root'> <User /> </div> } const wrapper = // mount/render/shallow when applicable tohavetohave tonothave
exactly()
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the wrapper contains an exact amount of descendants matching the given selector:
Component { return <div id='root'> <span id='child'> <span class='item'></span> <span class='item'></span> </span> </div> } const wrapper = // mount/render/shallow when applicable tohave
disabled()
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the given wrapper is disabled:
Component { return <div> <input id='disabled' disabled /> <input id='not' /> </div> } const wrapper = // mount/render/shallow when applicable tobedisabledtonotbedisabled
blank()
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the given wrapper is empty:
Component { return <div id='parent'> <div id='child'> </div> </div> } const wrapper = // mount/render/shallow when applicable tobetonotbe tobeempty // an aliastonotbeempty // an alias Component { return null } const nullWrapper = // mount/render/shallow when applicable tobetobeempty // an alias
present()
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the given wrapper exists:
Component { return <div id='parent'></div> } const wrapper = // mount/render/shallow when applicable tobetoexist // an alias Component { return null } const nullWrapper = // mount/render/shallow when applicable tobetoexist // an alias
html(str)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the wrapper has given html:
Component { return <div id='root'> <span id='child'>Test</span> </div> } const wrapper = // mount/render/shallow when applicable tohave tonothave tohave
id(str)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the wrapper has given ID attribute:
Component { return <div id='root'> <span id='child'>test</span> </div> } const wrapper = // mount/render/shallow when applicable tohaveid'root'tonothaveid'child'
match(selector)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the wrapper matches given selector:
Component { return <div id='root'> <span id='child'>test</span> </div> } const wrapper = // mount/render/shallow when applicable totonot
ref(key)
render | mount | shallow |
---|---|---|
no | yes | no |
Component { return <div> <input ref='test' /> </div> } const wrapper = // mount/render/shallow when applicable tohavetohave
selected()
render | mount | shallow |
---|---|---|
yes | yes | no |
Assert that the given wrapper is selected:
Component { return <select defaultValue='test1'> <option id='test1' value='test1'>Test 1</option> <option id='test2' value='test2'>Test 1</option> </select> } const wrapper = // mount/render/shallow when applicable tobeselectedtonotbeselected
tagName(str)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the given wrapper has the tag name:
Component { return <div> <span /> </div> } const wrapper = // mount/render/shallow when applicable tohavetagName'div'tohavetagName'span' tonothavetagName'a'tonothavetagName'a'
text(str)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the given wrapper has the supplied text:
Component { return <div id='root'> <span id='child'>Test</span> </div> } const wrapper = // mount/render/shallow when applicable tohavetext'Test' tocontaintext'Te'toincludetext'Te' // include is an alias of contain tonothavetext'Other text'tonotincludetext'Other text' // include is an alias of contain tohavetext
type(func)
render | mount | shallow |
---|---|---|
no | yes | yes |
Assert that the given wrapper has a given type:
Component { return <div>Foo</div> } Component { return <div>Bar</div> } Component { return <Foo /> } const shallowWrapper = const mountWrapper = tohavetypeFootonothavetypeBar tohavetypeFixturetonothavetypeBar
value(str)
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the given wrapper has given value:
Component { return <div> <input defaultValue='test' /> </div> } const wrapper = // mount/render/shallow when applicable tohavevalue'test'tonothavevalue'other'
attr(key, [val])
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the wrapper has given attribute [with value]:
Component { return <div id='root'> <span id='child'>test</span> </div> } const wrapper = // mount/render/shallow when applicable tohavetonothave tohavetonothave tohave
data(key, [val])
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the wrapper has a given data attribute [with value]:
Component { return <div data-name='root'> <span data-name='child'>test</span> </div> } const wrapper = // mount/render/shallow when applicable tohavedata'name'tonothavedata'random' tohavedata'name' 'root'tonothavedata'name' 'invalid' tohavedata'name'
style(key, [val])
render | mount | shallow |
---|---|---|
yes | yes | yes |
Assert that the wrapper has given style:
Component { return <div style= border: 1 > <span style= color: 'red' >test</span> </div> } const wrapper = // mount/render/shallow when applicable tohavestyle'border'tonothavestyle'color'tohavestyle'margin-top' // do not use camelCase keys as you would do in your React component tohavestyle'border' '1px'tonothavestyle'border' '2px' tohavestyle'border'
state(key, [val])
render | mount | shallow |
---|---|---|
no | yes | yes |
Assert that the wrapper has given state [with value]:
Component { super thisstate = foo: 'bar' } { return <div id='root'> </div> } const wrapper = // mount/render/shallow when applicable tohavetonothave tohavetonothave tohave
prop(key, [val])
render | mount | shallow |
---|---|---|
no | yes | yes |
Assert that the wrapper has given prop [with value]:
; Component { return <span>User thispropsindex</span> } UserpropTypes = index: PropTypesnumberisRequired Component { return <div> <ul> <li><User index=1 user=name: 'Jane' /></li> <li><User index=2 /></li> </ul> </div> } const wrapper = // mount/render/shallow when applicable tohavetonothave tohavetonothave tohavetohavedeep
props(key, [val])
render | mount | shallow |
---|---|---|
no | yes | yes |
Assert that the wrapper has given set of props [with values]:
; Component { return <span>User thispropsindex</span> } UserpropTypes = index: PropTypesnumberisRequired Component { return <div> <ul> <li><User index=1 user=name: 'Jane' /></li> <li><User index=2 /></li> </ul> </div> } const wrapper = // mount/render/shallow when applicable tohavetonothave tohavetonothave tohavedeep
Development
Setup
$ git clone <this repo>$ cd chai-enzyme$ npm install
Tests
Linters:
$ npm run test:lint
Tests:
$ npm run test:unit
All:
$ npm test
Contributing
We want to make this assertion library as robust and complete as possible. If you think that there are missing features/assertions, please open a GitHub issue or even better - a PR.
Bug reports and pull requests are welcome on GitHub. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.
License
_________________
< The MIT License >
-----------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||