jasmine-enzyme

!License

Quick Links
* Installation
* Setup
* Assertions

$3

We suggest using yarn for installations.

``
yarn add jasmine-enzyme --dev
`

But npm works too!

`
$ npm install jasmine-enzyme --save-dev
`

$3

For Jasmine, you'll need to call jasmineEnzyme() in any before method due to the way jasmine's plugin
system works.

`js
import jasmineEnzyme from 'jasmine-enzyme';

describe('test', () => {
beforeEach(() => {
jasmineEnzyme();
});

// tests
});
`

$3

> * Not all assertions work with every rendering strategy.
> If you are wondering what rendering mechanism to use when, refer to
> enzyme's documentation.

* toBeChecked()
* toBeDisabled()
* toBeEmptyRender()
* toExist()
* toContainMatchingElement()
* toContainMatchingElements()
* toContainExactlyOneMatchingElement()
* toContainReact()
* toHaveClassName()
* toHaveDisplayName()
* toHaveHTML()
* toHaveProp()
* toHaveRef()
* toHaveState()
* toHaveStyle()
* toHaveTagName()
* toHaveText()
* toIncludeText()
* toHaveValue()
* toMatchElement()
* toMatchSelector()

#### toBeChecked()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toBeChecked();
`

Assert that the given wrapper is checked:

`js
import React from 'react'
import {mount, shallow} from 'enzyme'

function Fixture() {
return (


);
}

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

expect(wrapper.find('#checked')).toBeChecked();
expect(wrapper.find('#not')).not.toBeChecked();
`

#### toBeDisabled()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toBeDisabled();
`

Assert that the given wrapper is disabled:

`js
import React from 'react'
import {mount, shallow} from 'enzyme'

function Fixture() {
return (


);
}

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

expect(wrapper.find('#disabled')).toBeDisabled();
expect(wrapper.find('#not')).not.toBeDisabled();
`

#### toBeEmptyRender()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toBeEmptyRender();
`

Assert that the given wrapper has an empty render (null or false):

`js
function EmptyRenderFixture() {
return null;
}

function NonEmptyRenderFixture() {
return (


);
}

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

expect(wrapper.find('EmptyRenderFixture')).toBeEmptyRender();
expect(wrapper).not.toBeEmptyRender();
`

#### toExist()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toExist();
`

Assert that the given enzyme wrapper has rendered content.

`js
function Fixture() {
return (


);
}

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

expect(wrapper.find('span')).toExist();
expect(wrapper.find('ul')).not.toExist();
`

#### toContainMatchingElement()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toContainMatchingElement('.foo');
`

Assert that the given wrapper contains at least one match for the given selector:

`js
function User(props) {
return (

User {props.index}

);
}

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

function Fixture() {
return (


);
}

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

expect(wrapper).toContainMatchingElement('.userOne');
expect(wrapper).not.toContainMatchingElement('.userThree');
`

#### toContainMatchingElements()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toContainMatchingElements(2, '.foo');
`

Assert that the given wrapper contains a given number of matches for the given selector:

`js
function User(props) {
return (

User {props.index}

);
}

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

function Fixture() {
return (


);
}

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

expect(wrapper).toContainMatchingElements(2, 'User');
expect(wrapper).not.toContainMatchingElements(2, '.userTwo');
`

#### toContainExactlyOneMatchingElement()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toContainExactlyOneMatchingElement('.foo');
`

Assert that the given wrapper contains exactly one match for the given selector:

`js
function User(props) {
return (

User {props.index}

);
}

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

function Fixture() {
return (


);
}

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

expect(wrapper).toContainExactlyOneMatchingElement('.userOne');
expect(wrapper).not.toContainExactlyOneMatchingElement('User');
`

#### toContainReact()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toContainReact(

);
`

Assert that the given wrapper contains the provided react instance:

`js
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).toContainReact();
expect(wrapper).not.toContainReact();
`

#### toHaveClassName()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toHaveClassName('foo');
`

Assert that the given wrapper has the provided className:

`js
function Fixture() {
return (


);
}

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

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');
`

#### toHaveDisplayName()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toHaveDisplayName('div');
`

Assert that the wrapper is of a certain tag type:

`js
function Fixture() {
return (


);
}

const wrapper = mount();

expect(wrapper.find('#span')).toHaveDisplayName('span');
expect(wrapper.find('#span')).not.toHaveDisplayName('div');
`

#### toHaveHTML()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toHaveHTML('

');
`

Assert that the given wrapper has the provided html:

> Note Quotations are normalized.

`js
function Fixture() {
return (


);
}

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

expect(wrapper.find('#child')).toHaveHTML(
'Test'
);
`

#### toHaveProp()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toHaveProp('foo', 'value');
expect().toHaveProp('foo');
expect().toHaveProp({foo: 'value'});
`

Assert that the given wrapper has the provided propKey and associated value if specified:

`js
function User() { ... }
User.propTypes = {
foo: PropTypes.string,
bar: PropTypes.array,
};

function Fixture() {
return (


);
}

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

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]);

expect(wrapper.find(User)).toHaveProp({
bar: [1, 2, 3],
foo: 'baz',
});
`

#### toHaveRef()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toHaveRef('foo');
`

Assert that the mounted wrapper has the provided ref:

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


);
}
}

const wrapper = mount();

expect(wrapper).toHaveRef('child');
expect(wrapper).not.toHaveRef('foo');
`

#### toHaveState()

| render | mount | shallow |
| -------|-------|-------- |
| no | yes | yes |

Ways to use this API:

`js
expect().toHaveState('foo');
expect().toHaveState('foo', 'bar');
expect().toHaveState({ foo: 'bar' });
`

Assert that the component has the provided stateKey and optional value if specified:

`js
class Fixture extends React.Component {
constructor() {
super();
this.state = {
foo: false,
};
}

render() {
return (