jasmine-enzyme

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

1. Installation
2. Setup 1. Jest 1. Jasmine
3. Assertions 1. toBeChecked() 1. toBeDisabled() 1. toBeEmpty() 1. toBePresent() 1. toContain() 1. toHaveClassName() 1. toHaveHTML() 1. toHaveProp() 1. toHaveRef() 1. toHaveState() 1. toHaveStyle() 1. toHaveTagName() 1. toHaveValue() 1. toMatch()
4. Development
5. Contributing
6. 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/lib/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();
  });

  // tests
});

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

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

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

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

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

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

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

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

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

expect(wrapper).toHaveState('foo');
expect(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:

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

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

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