should-enzyme

should-enzyme

should.js assertions for enzyme

• Install
• Setup
• Assertions
• attr(key, [value])
• checked()
• className(string)
• contain(node)
• containsText(string)
• data(key, [value])
• disabled()
• exactClassNames(string)
• present()
• prop(key, [value])
• props(object)
• state(key, [value])
• text(string)
• value(string)
• Contribute

Install

npm i should-enzyme --save-dev

Setup

Install Enzyme JS

import "should";
import "should-enzyme";

Assertions

attr(key, [value])

render	mount	shallow
yes	yes	yes

Check to see if element has attribute and optionally check value.

import { mount, render, shallow } from "enzyme";
import React, { PropTypes } from "react";

const AttrFixture = ({ children, title }) => <div title={title}>content</div>;

AttrFixture.propTypes = {
  children: PropTypes.node,
  title: PropTypes.string
};

const wrapper = mount(<AttrFeature />);

wrapper.should.have.attr("title");
wrapper.should.have.attr("title", "enzyme");
wrapper.should.not.have.attr("pizza");
wrapper.should.not.have.attr("title", "stuff");

checked()

render	mount	shallow
yes	yes	yes

Check to see if input type checkbox is checked.

import React from "react";
import { mount, render, shallow } from "enzyme";

const CheckedFixture = () => (
  <div>
    <input id="coffee" type="checkbox" defaultChecked value="coffee" />
    <input id="tea" type="checkbox" value="tea" />
  </div>
);

const wrapper = renderMethod(<CheckedFixture />);
const coffee = wrapper.find("#coffee");
const tea = wrapper.find("#tea");

coffee.should.checked();
tea.should.not.be.checked();

className(string)

render	mount	shallow
yes	yes	yes

Check to see if wrapper has css class.

import React from "react";
import { mount, render, shallow } from "enzyme";

const ClassNameFixture = () => (
  <div className="special burger">Content here</div>
);

const wrapper = mount(<ClassNameFixture />);

wrapper.should.have.className("special");
wrapper.should.not.have.className("pizza");

contain(node)

render	mount	shallow
no	yes	yes

Check to see if wrapper contains the expected node.

import React from "react";
import { mount, shallow } from "enzyme";

const Banana = () => {
  return <div>Banana</div>;
};

const Apple = props => {
  return <div>Apple</div>;
};

const ContainNodesFixture = () => {
  return (
    <div>
      <Apple name="Jim" />
      <Apple name="Bob" />
    </div>
  );
};

const wrapper = mount(<ContainNodesFixture />);

wrapper.should.contain(<Apple name="Bob" />);
wrapper.should.not.be.contain(<Banana />);

containsText(string)

render	mount	shallow
yes	yes	yes

Check to see if wrapper contains text.

import React from 'react';
import {mount, render, shallow} from 'enzyme';

const TextFixture = () => (
  <div>Content here. More content</div>
);

cont wrapper = mount(<TextFixture />);

wrapper.should.containsText('Content here');
wrapper.should.not.containsText('pizza');

data(key, [value])

render	mount	shallow
yes	yes	yes

Check to see if element has a data attribute and optionally check value.

import { mount, render, shallow } from "enzyme";
import React, { PropTypes } from "react";

const DataFixture = ({ children, tr }) => (
  <div data-tr={tr} data-id="special-id">
    content
  </div>
);

DataFixture.propTypes = {
  children: PropTypes.node,
  tr: PropTypes.string
};

const wrapper = mount(<DataFixture tr="enzyme" />);

wrapper.should.have.data("tr");
wrapper.should.have.data("tr", "enzyme");
wrapper.should.not.have.data("pizza");
wrapper.should.not.have.data("tr", "stuff");

disabled()

render	mount	shallow
yes	yes	yes

Check to see if input fields are disabled.

import React from "react";
import { mount, render, shallow } from "enzyme";

const DisabledFixture = () => (
  <div>
    <input id="coffee" type="text" value="coffee" />
    <input id="tea" type="text" disabled value="tea" />
  </div>
);

const wrapper = renderMethod(<DisabledFixture />);
const coffee = wrapper.find("#coffee");
const tea = wrapper.find("#tea");

coffee.should.not.be.disabled();
tea.should.be.disabled();

exactClassNames(string)

render	mount	shallow
yes	yes	yes

Check to see if wrapper has the exact class names.

import React from 'react';
import {mount, render, shallow} from 'enzyme';

const ClassNamesFixture = () => (
  <div className="special buffalo chicken burger">Content here</div>
);

cont wrapper = mount(<ClassNamesFixture />);

wrapper.should.have.exactClassNames('special buffalo chicken burger');
wrapper.should.not.have.exactClassNames('special buffalo chicken');
wrapper.should.not.have.exactClassNames('other class names');

present()

render	mount	shallow
yes	yes	yes

Check to see if the wrapper is present.

import React from "react";
import { mount, render, shallow } from "enzyme";

const PresentFixture = () => (
  <div>
    <div id="burgers">with cheese</div>
    <div>side of fries</div>
  </div>
);

const wrapper = mount(<PresentFeature />);
const burgers = wrapper.find("#burgers");
const salad = wrapper.find("#salad");

burgers.should.be.present();
salad.should.not.be.present();

Exception: Using render only with Enzyme 3 means null components are not classed as "present". This is related to the cheerio wrapper v1 being returned.

See example below:

import React from "react";
import { mount, render, shallow } from "enzyme";

const PresentFixture = () => null;

const wrapperMount = mount(<PresentFeature />);
wrapperMount.should.be.present(); // true

const wrapperRender = render(<PresentFeature />);
wrapperRender.should.be.present(); // false

prop(key, [value])

render	mount	shallow
no	yes	yes

Check to see if wrapper has prop and optionally check value.

import React from "react";
import { mount, shallow } from "enzyme";

const PropFixture = ({ children, id, myObj }) => <div id={id}>salad</div>;

const wrapper = mount(<PropFeature id="mango" myObj={{ foo: "bar" }} />);

wrapper.should.have.prop("id");
wrapper.should.not.have.prop("iDontExistProp");

wrapper.should.have.prop("id", "mango");
wrapper.should.not.have.prop("id", "banana");
// assert objects
wrapper.should.have.prop("myObj", { foo: "bar" });

wrapper.should.not.have.prop("iDontExistProp", "banana");

props(object)

render	mount	shallow
no	yes	yes

Check to see if wrapper has props and value. This uses shouldJS deepEqual assert.

import React from "react";
import { mount, shallow } from "enzyme";

const PropsFixture = ({ id, title, total }) => (
  <div id={id} title={title} total={total}>
    content
  </div>
);

const wrapper = mount(
  <PropsFixture id="content" title="superfood" total={24} />
);

wrapper.should.have.props({ id: "content" });
wrapper.should.have.props({ id: "content", title: "superfood", total: 24 });

wrapper.should.not.have.props({ food: "pizza" });
wrapper.should.not.have.props({ id: "stuff" });

wrapper.should.have.props(); // will error require object

state(key, [value])

render	mount	shallow
no	yes	yes

Check to see if wrapper has state property and optionally check value.

import React, { Component } from "react";
import { mount, shallow } from "enzyme";

class StateFixture extends Component {
  constructor() {
    super();
    this.state = {
      bestFruit: "mango"
    };
  }

  render() {
    return <div id="best-mangos">{this.state.bestFruit}</div>;
  }
}

const wrapper = mount(<StateFeature />);

wrapper.should.have.state("bestFruit");
wrapper.should.not.have.state("anotherFruit");

wrapper.should.have.state("bestFruit", "mango");
wrapper.should.not.have.state("bestFruit", "orange");

wrapper.should.not.have.state("anotherFruit", "banana");

text(string)

render	mount	shallow
yes	yes	yes

Check to see if the exact text content is in wrapper.

import React from 'react';
import {mount, render, shallow} from 'enzyme';

const TextFeature (props) => (
      <div id='text-feature'>
        <span id='text-span'>Test</span>
      </div>
    );

const wrapper = mount(<TextFeature />);

wrapper.find('#text-span').should.have.text('Test');

wrapper.find('#text-span').should.not.have.text('Other text');

value(string)

render	mount	shallow
yes	yes	yes

Assert on input field values this includes <input>, <select> and <textarea>.

import React from "react";
import { mount, render, shallow } from "enzyme";

const FormInputsFixture = () => (
  <form>
    <input type="text" name="mug" defaultValue="coffee" />
    <select defaultValue="pizza">
      <option value="coffee">More coffee</option>
      <option value="pizza">Pizza</option>
      <option value="salad">Salad</option>
    </select>
    <textarea name="fruit" value="Hands or bunch of bananas?" />
    <div id="failSelect">What value?</div>
  </form>
);

const wrapper = mount(<FormInputsFixture />);

wrapper.find("input").should.have.value("coffee");
wrapper.find("input").should.not.have.value("pizza");

wrapper.find("select").should.have.value("pizza");
wrapper.find("select").should.not.have.value("salad");

wrapper.find("textarea").should.have.value("Hands or bunch of bananas?");
wrapper.find("textarea").should.not.have.value("Mangoes");