Name: enzyme-matchers
Owner: Formidable
Description: Jasmine/Jest assertions for enzyme
Created: 2016-04-06 22:10:35.0
Updated: 2018-02-18 13:14:11.0
Pushed: 2018-02-13 23:27:18.0
Size: 432
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
An assertion library for enzyme.
This library supports several testing frameworks including Jest and Jasmine.
Want to add support for another testing framework? Check out our contributing doc!
Notes
The syntax for using these assertions may be different depending on your testing framework. For more information, visit the framework you are using's package README in
packages/Not all assertions work with every rendering strategy. If you are wondering what rendering mechanism to use when, refer to enzyme's documentation.
Other
toBeChecked()| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the given wrapper is checked:
rt React from 'react'
rt {mount, shallow} from 'enzyme'
tion Fixture() {
turn (
<div>
<input id="checked" defaultChecked />
<input id="not" defaultChecked={false} />
<input id="tertiary" defaultChecked checked={false} />
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find('#checked')).toBeChecked();
ct(wrapper.find('#not')).not.toBeChecked();
toBeDisabled()| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the given wrapper is disabled:
rt React from 'react'
rt {mount, shallow} from 'enzyme'
tion Fixture() {
turn (
<div>
<input id="disabled" disabled />
<input id="not"/>
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find('#disabled')).toBeDisabled();
ct(wrapper.find('#not')).not.toBeDisabled();
toBeEmpty()| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the given wrapper is empty:
tion Fixture() {
turn (
<div>
<span className="foo" />
<span className="bar baz" />
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find('ul')).toBeEmpty();
ct(wrapper.find('span')).not.toBeEmpty();
toBePresent()| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Opposite of toBeEmpty(). Assert that the given wrapper has children of any length:
tion Fixture() {
turn (
<div>
<span className="foo" />
<span className="bar baz" />
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find('span')).toBePresent();
ct(wrapper.find('ul')).not.toBePresent();
toContainReact(reactInstance:Object)| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the given wrapper contains the provided react instance:
s User extends React.Component {
nder () {
return (
<span>User {this.props.index}</span>
)
.propTypes = {
dex: PropTypes.number.isRequired
s Fixture extends React.Component {
nder () {
return (
<div>
<ul>
<li><User index={1} /></li>
<li><User index={2} /></li>
</ul>
</div>
)
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper).toContainReact(<User index={1} />);
ct(wrapper).not.toContainReact(<User index={9000} />);
toHaveClassName(className:string)| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the given wrapper has the provided className:
tion Fixture() {
turn (
<div>
<span className="foo" />
<span className="bar baz" />
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find('.foo')).toHaveClassName('foo');
ct(wrapper.find('.foo')).not.toHaveClassName('baz');
ct(wrapper.find('.bar')).toHaveClassName('bar baz');
ct(wrapper.find('.bar')).toHaveClassName('baz');
toHaveHTML(html:string)| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the given wrapper has the provided html:
Note Quotations are normalized.
tion Fixture() {
turn (
<div id="root">
<span id="child">Test</span>
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find('#child')).toHaveHTML(
span id="child">Test</span>'
toHaveProp(propKey:string[, propValue:?any])| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the given wrapper has the provided propKey and associated value if specified:
tion User() { ... }
.propTypes = {
o: PropTypes.string,
r: PropTypes.array,
tion Fixture() {
turn (
<div id="root">
<User foo={'baz'} bar={[1,2,3]} />
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find(User)).toHaveProp('foo');
ct(wrapper.find(User)).toHaveProp('foo', 'baz');
ct(wrapper.find(User)).toHaveProp('bar');
ct(wrapper.find(User)).toHaveProp('bar', [1,2,3]);
toHaveRef(refName:string)| render | mount | shallow | | ——-|——-|——– | | no | yes | no |
Assert that the mounted wrapper has the provided ref:
s Fixture extends React.Component {
nder() {
return (
<div>
<span ref="child" />
</div>
);
t wrapper = mount(<Fixture />);
ct(wrapper).toHaveRef('child');
ct(wrapper).not.toHaveRef('foo');
toHaveState(stateKey:string[, stateValue:?any])| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the component has the provided stateKey and optional value if specified:
s Fixture extends React.Component {
nstructor() {
super();
this.state = {
foo: false,
};
nder() {
return (
<div />
);
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper).toHaveState('foo');
ct(wrapper).toHaveState('foo', false);
toHaveStyle(styleKey:string[, styleValue:?any])| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the component has style of the provided key and value:
tion Fixture() {
nst style1 = { height: '100%' };
nst style2 = { flex: 8 };
turn (
<div>
<span id="style1" style={style1} />
<span id="style2" style={style2} />
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find('#style1')).toHaveStyle('height', '100%');
ct(wrapper.find('#style2')).toHaveStyle('flex', 8);
toHaveTagName(tagName:string)| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the wrapper is of a certain tag type:
tion Fixture() {
turn (
<div>
<span id="span" />
</div>
t wrapper = mount(<Fixture />);
ct(wrapper.find('#span')).toHaveTagName('span');
ct(wrapper.find('#span')).not.toHaveTagName('div');
toHaveText(text:string)| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the wrapper's text matches the provided text exactly, using a strict comparison (===).
tion Fixture() {
turn (
<div>
<p id="full">Text</p>
<p id="empty"></p>
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find('#full')).toHaveText('Text');
ct(wrapper.find('#full')).not.toHaveText('Wrong');
ct(wrapper.find('#full')).toHaveText();
ct(wrapper.find('#empty')).not.toHaveText();
toIncludeText(text:string)| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the wrapper includes the provided text:
tion Fixture() {
turn (
<div>
<p id="full">Some important text</p>
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find('#full')).toIncludeText('important');
ct(wrapper.find('#full')).not.toIncludeText('Wrong');
toHaveValue(value:any)| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the given wrapper has the provided value:
tion Fixture() {
turn (
<div>
<input defaultValue="test" />
<input defaultValue="foo" value="bar" onChange={jest.genMockFunction()} />
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find('input').at(0)).toHaveValue('test');
ct(wrapper.find('input').at(1)).toHaveValue('bar');
toMatchElement(reactInstance:Object, options:any)| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert the wrapper matches the provided react instance. This is a matcher form of Enzyme's wrapper.matchesElement(), which returns a bool with no indication of what caused a failed match. This matcher includes the actual and expected debug trees as contextual information when it fails. Like matchesElement(), props are ignored. If you want to compare prop values as well, pass { ignoreProps: false } as options. Uses enzyme's debug() under the hood and compares debug strings, which makes for a human readable diff when expects fail.
Example:
tion Fixture() {
turn (
<div>
<span id="foo" className="bar" />
</div>
t wrapper = shallow(<Fixture />); // mount/render/shallow when applicable
ct(wrapper).toMatchElement(<Fixture />);
ct(wrapper.find('span')).toMatchElement(<span />);
ct(wrapper.find('span')).toMatchElement(
pan id="foo" className="bar" />,
ignoreProps: false }
ct(wrapper).not.toMatchElement(<div />);
toMatchSelector(selector:string)| render | mount | shallow | | ——-|——-|——– | | no | yes | yes |
Assert that the wrapper matches the provided selector:
tion Fixture() {
turn (
<div>
<span id="foo" className="bar" />
</div>
t wrapper = mount(<Fixture />); // mount/render/shallow when applicable
ct(wrapper.find('span')).toMatchSelector('span');
ct(wrapper.find('span')).toMatchSelector('#foo');
ct(wrapper.find('span')).toMatchSelector('.bar');
t clone <this repo>
enzyme-matchers
m install
rna bootstrap
Linters:
m run lint
Tests:
m test
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.
This project uses lerna
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.
______________
e MIT License >
--------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||