jasmine-enzyme
Jasmine assertions for enzyme.
Large thanks to chai-enzyme
. We have taken several thoughts from that library and ultimately hope to maintain feature parity.
Table of Contents
- Installation
- Setup
1. Jest
1. Jasmine
- Assertions
1. toBeChecked()
1. toBeDisabled()
1. toBeEmpty()
1. toBePresent()
1. toContain()
1. toHaveClassName()
1. toHaveHTML()
1. toHaveProp()
1. toHaveRef()
1. toHaveState()
1. toHaveTagName()
1. toHaveValue()
1. toMatch()
- Development
- Contributing
- License
Installation
jasmine-enzyme
depends on:
"peerDependencies": {
"jasmine": "1.x || 2.x",
"enzyme": "1.x || 2.x"
}
$ npm install jasmine-enzyme --save-dev
Setup
Jest
If you are using jest, the simplest setup is to use jests setupTestFrameworkScriptFile
config. Add this to your package.json
"jest": {
"setupTestFrameworkScriptFile": "node_modules/jasmine-enzyme/jest",
}
Vanilla Jasmine
If you are just using vanilla jasmine, you'll need to call
jasmineEnzyme()
in any before
method due to the way jasmine's plugin
system works.
import jasmineEnzyme from 'jasmine-enzyme';
describe('test', () => {
beforeEach(() => {
jasmineEnzyme();
});
});
Assertions
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.
toBeChecked()
render | mount | shallow |
---|
no | yes | yes |
Assert that the given wrapper is checked:
import React from 'react'
import {mount, shallow} from 'enzyme'
function Fixture() {
return (
<div>
<input id="checked" defaultChecked />
<input id="not" defaultChecked={false} />
<input id="tertiary" defaultChecked checked={false} />
</div>
);
}
const wrapper = mount(<Fixture />);
expect(wrapper.find('#checked')).toBeChecked();
expect(wrapper.find('#not')).not.toBeChecked();
toBeDisabled()
render | mount | shallow |
---|
no | yes | yes |
Assert that the given wrapper is disabled:
import React from 'react'
import {mount, shallow} from 'enzyme'
function Fixture() {
return (
<div>
<input id="disabled" disabled />
<input id="not"/>
</div>
);
}
const wrapper = mount(<Fixture />);
expect(wrapper.find('#disabled')).toBeDisabled();
expect(wrapper.find('#not')).not.toBeDisabled();
toBeEmpty()
render | mount | shallow |
---|
no | yes | yes |
Assert that the given wrapper is empty:
function Fixture() {
return (
<div>
<span className="foo" />
<span className="bar baz" />
</div>
);
}
const wrapper = mount(<Fixture />);
expect(wrapper.find('ul')).toBeEmpty();
expect(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:
function Fixture() {
return (
<div>
<span className="foo" />
<span className="bar baz" />
</div>
);
}
const wrapper = mount(<Fixture />);
expect(wrapper.find('span')).toBePresent();
expect(wrapper.find('ul')).not.toBePresent();
toContain(ReactInstance:Object)
render | mount | shallow |
---|
no | yes | yes |
Assert that the given wrapper contains the provided react instance:
class User extends React.Component {
render () {
return (
<span>User {this.props.index}</span>
)
}
}
User.propTypes = {
index: React.PropTypes.number.isRequired
}
class Fixture extends React.Component {
render () {
return (
<div>
<ul>
<li><User index={1} /></li>
<li><User index={2} /></li>
</ul>
</div>
)
}
}
const wrapper = mount(<Fixture />);
expect(wrapper).toContain(<User index={1} />);
expect(wrapper).not.toContain(<User index={9000} />);
toHaveClassName(className:string)
render | mount | shallow |
---|
no | yes | yes |
Assert that the given wrapper has the provided className:
function Fixture() {
return (
<div>
<span className="foo" />
<span className="bar baz" />
</div>
);
}
const wrapper = mount(<Fixture />);
expect(wrapper.find('.foo')).toHaveClassName('foo');
expect(wrapper.find('.foo')).not.toHaveClassName('baz');
expect(wrapper.find('.bar')).toHaveClassName('bar baz');
expect(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.
function Fixture() {
return (
<div id="root">
<span id="child">Test</span>
</div>
);
}
const wrapper = mount(<Fixture />);
expect(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:
function User() { ... }
User.propTypes = {
foo: PropTypes.string,
bar: PropTypes.array,
};
function Fixture() {
return (
<div id="root">
<User foo={'baz'} bar={[1,2,3]} />
</div>
);
}
const wrapper = mount(<Fixture />);
expect(wrapper.find(User)).toHaveProp('foo');
expect(wrapper.find(User)).toHaveProp('foo', 'baz');
expect(wrapper.find(User)).toHaveProp('bar');
expect(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:
class Fixture extends React.Component {
render() {
return (
<div>
<span ref="child" />
</div>
);
}
}
const wrapper = mount(<Fixture />);
expect(wrapper).toHaveRef('child');
expect(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:
class Fixture extends React.Component {
constructor() {
super();
this.state = {
foo: false,
};
}
render() {
return (
<div />
);
}
}
const wrapper = mount(<Fixture />);
expect(wrapper).toHaveState('foo');
expect(wrapper).toHaveState('foo', false);
toHaveTagName(tagName:string)
render | mount | shallow |
---|
no | yes | yes |
Assert that the wrapper is of a certain tag type:
function Fixture() {
return (
<div>
<span id="span" />
</div>
);
}
const wrapper = mount(<Fixture />);
expect(wrapper.find('#span')).toHaveTagName('span');
expect(wrapper.find('#span')).not.toHaveTagName('div');
toHaveValue(value:any)
render | mount | shallow |
---|
no | yes | yes |
Assert that the given wrapper has the provided value
:
function Fixture() {
return (
<div>
<input defaultValue="test" />
<input defaultValue="foo" value="bar" onChange={jest.genMockFunction()} />
</div>
);
}
const wrapper = mount(<Fixture />);
expect(wrapper.find('input').at(0)).toHaveValue('test');
expect(wrapper.find('input').at(1)).toHaveValue('bar');
toMatch(selector:string)
render | mount | shallow |
---|
no | yes | yes |
Assert that the wrapper matches the provided selector
:
function Fixture() {
return (
<div>
<span id="foo" className="bar" />
</div>
);
}
const wrapper = mount(<Fixture />);
expect(wrapper.find('span')).toMatch('span');
expect(wrapper.find('span')).toMatch('#foo');
expect(wrapper.find('span')).toMatch('.bar');
Development
Setup
$ git clone <this repo>
$ cd jasmein-enzyme
$ npm install
Tests
Linters:
$ npm run lint
Tests:
$ 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 |
|| ||