Skip to content
Branch: master
Find file History
Latest commit 66c1937 Sep 4, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
spec Remove bad fixture from jasmine-enzyme tests Oct 8, 2018
src Cleanup jasmine-enzyme failure message Mar 13, 2018
.eslintrc Ensure flow type checking passes Sep 4, 2019
README.md
package.json v7.1.1 Sep 4, 2019

README.md

jasmine-enzyme

npm version License

Quick Links

Installation

We suggest using yarn for installations.

yarn add jasmine-enzyme --dev

But npm works too!

$ npm install jasmine-enzyme --save-dev

Setup

For 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();
  });

  // tests
});

Assertions

  • 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

Ways to use this API:

expect().toBeChecked();

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 />); // 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:

expect().toBeDisabled();

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 />); // 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:

expect().toBeEmptyRender();

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

function EmptyRenderFixture() {
  return null;
}

function NonEmptyRenderFixture() {
  return (
    <div>
      <EmptyRenderFixture />
    </div>
  );
}

const wrapper = mount(<EmptyRenderFixture />); // 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:

expect().toExist();

Assert that the given enzyme wrapper has rendered content.

function Fixture() {
  return (
    <div>
      <span className="foo" />
      <span className="bar baz" />
    </div>
  );
}

const wrapper = mount(<Fixture />); // 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:

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

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

function User(props) {
  return (
    <span className={props.className}>
      User {props.index}
    </span>
  );
}

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

function Fixture() {
  return (
    <div>
      <ul>
        <li>
          <User index={1} className="userOne" />
        </li>
        <li>
          <User index={2} className="userTwo" />
        </li>
      </ul>
    </div>
  );
}

const wrapper = mount(<Fixture />); // 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:

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

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

function User(props) {
  return (
    <span className={props.className}>
      User {props.index}
    </span>
  );
}

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

function Fixture() {
  return (
    <div>
      <ul>
        <li>
          <User index={1} className="userOne" />
        </li>
        <li>
          <User index={2} className="userTwo" />
        </li>
      </ul>
    </div>
  );
}

const wrapper = mount(<Fixture />); // 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:

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

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

function User(props) {
  return (
    <span className={props.className}>
      User {props.index}
    </span>
  );
}

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

function Fixture() {
  return (
    <div>
      <ul>
        <li>
          <User index={1} className="userOne" />
        </li>
        <li>
          <User index={2} className="userTwo" />
        </li>
      </ul>
    </div>
  );
}

const wrapper = mount(<Fixture />); // 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:

expect().toContainReact(<div>foo</div>);

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: 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 />); // mount/render/shallow when applicable

expect(wrapper).toContainReact(<User index={1} />);
expect(wrapper).not.toContainReact(<User index={9000} />);

toHaveClassName()

render mount shallow
no yes yes

Ways to use this API:

expect().toHaveClassName('foo');

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 />); // 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:

expect().toHaveDisplayName('div');

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')).toHaveDisplayName('span');
expect(wrapper.find('#span')).not.toHaveDisplayName('div');

toHaveHTML()

render mount shallow
no yes yes

Ways to use this API:

expect().toHaveHTML('<div>html</div>');

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 />); // mount/render/shallow when applicable

expect(wrapper.find('#child')).toHaveHTML(
  '<span id="child">Test</span>'
);

toHaveProp()

render mount shallow
no yes yes

Ways to use this API:

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:

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 />); // 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:

expect().toHaveRef('foo');

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()

render mount shallow
no yes yes

Ways to use this API:

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

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 />); // mount/render/shallow when applicable

expect(wrapper).toHaveState('foo');
expect(wrapper).toHaveState('foo', false);
expect(wrapper).toHaveState({ foo: false });

toHaveStyle()

render mount shallow
no yes yes

Ways to use this API:

expect().toHaveStyle('height');
expect().toHaveStyle('height', '100%');
expect().toHaveStyle({ height: '100%' });

Assert that the component has style of the provided key and value:

function Fixture() {
  const style1 = { height: '100%' };
  const style2 = { flex: 8 };

  return (
    <div>
      <span id="style1" style={style1} />
      <span id="style2" style={style2} />
    </div>
  );
}

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

expect(wrapper.find('#style1')).toHaveStyle('height', '100%');
expect(wrapper.find('#style2')).toHaveStyle('flex', 8);

toHaveTagName()

Deprecated: Matcher toHaveTagName is deprecated. Use the replacement, [toHaveDisplayName()](#tohavedisplayname) instead.

toHaveText()

render mount shallow
no yes yes

Ways to use this API:

expect().toHaveText('bar');

Assert that the wrapper's text matches the provided text exactly, using a strict comparison (===).

function Fixture() {
  return (
    <div>
      <p id="full">Text</p>
      <p id="empty"></p>
    </div>
  );
}

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

expect(wrapper.find('#full')).toHaveText('Text');
expect(wrapper.find('#full')).not.toHaveText('Wrong');

expect(wrapper.find('#full')).toHaveText();
expect(wrapper.find('#empty')).not.toHaveText();

toIncludeText()

render mount shallow
no yes yes

Ways to use this API:

expect().toIncludeText('bar');

Assert that the wrapper includes the provided text:

function Fixture() {
  return (
    <div>
      <p id="full">Some important text</p>
    </div>
  );
}

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

expect(wrapper.find('#full')).toIncludeText('important');
expect(wrapper.find('#full')).not.toIncludeText('Wrong');

toHaveValue()

render mount shallow
no yes yes

Ways to use this API:

expect().toHaveValue('bar');

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 />); // mount/render/shallow when applicable

expect(wrapper.find('input').at(0)).toHaveValue('test');
expect(wrapper.find('input').at(1)).toHaveValue('bar');

toMatchElement()

render mount shallow
no yes yes

Ways to use this API:

expect().toMatchElement(<Foo />);
expect().toMatchElement(<Foo />, { ignoreProps: false });
expect().toMatchElement(<Foo />, { ignoreProps: false, verbose: false });

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:

function Fixture() {
  return (
    <div>
      <span id="foo" className="bar" />
    </div>
  );
}

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

expect(wrapper).toMatchElement(<Fixture />);
expect(wrapper.find('span')).toMatchElement(<span />);
expect(wrapper.find('span')).toMatchElement(
  <span id="foo" className="bar" />,
  { ignoreProps: false }
);
expect(wrapper).not.toMatchElement(<div />);

toMatchSelector()

render mount shallow
no yes yes

Ways to use this API:

expect().toMatchSelector('.foo');

Assert that the wrapper matches the provided selector:

function Fixture() {
  return (
    <div>
      <span id="foo" className="bar" />
    </div>
  );
}

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

expect(wrapper.find('span')).toMatchSelector('span');
expect(wrapper.find('span')).toMatchSelector('#foo');
expect(wrapper.find('span')).toMatchSelector('.bar');
You can’t perform that action at this time.