should-enzyme

Useful functions for testing React components with Enzyme and Shouldjs

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
should-enzyme
4062.1.06 years ago7 years agoMinified + gzip package size for should-enzyme in KB

Readme

should-enzyme
npm version Build Status should.js assertions for enzyme
  1. Install
  1. Setup
  1. Assertions
  1. attr(key, [value])
  1. checked()
  1. className(string)
  1. contain(node)
  1. containsText(string)
  1. data(key, [value])
  1. disabled()
  1. exactClassNames(string)
  1. present()
  1. prop(key, [value])
  1. props(object)
  1. state(key, [value])
  1. text(string)
  1. value(string)
  1. Contribute

Install

npm i should-enzyme --save-dev

Setup

Install Enzyme JS ```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. ```js import { mount, render, shallow } from "enzyme"; import React, { PropTypes } from "react"; const AttrFixture = ({ children, title }) =>
content
; AttrFixture.propTypes = { children: PropTypes.node, title: PropTypes.string }; const wrapper = mount(); 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. ```js import React from "react"; import { mount, render, shallow } from "enzyme"; const CheckedFixture = () => (
<input id="coffee" type="checkbox" defaultChecked value="coffee" />
<input id="tea" type="checkbox" value="tea" />
); const wrapper = renderMethod(); 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. ```js import React from "react"; import { mount, render, shallow } from "enzyme"; const ClassNameFixture = () => (
Content here
); const wrapper = mount(); 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. ```js import React from "react"; import { mount, shallow } from "enzyme"; const Banana = () => { return
Banana
; }; const Apple = props => { return
Apple
; }; const ContainNodesFixture = () => { return (
<div>
<Apple name="Jim" />
<Apple name="Bob" />
</div>
); }; const wrapper = mount(); wrapper.should.contain(); wrapper.should.not.be.contain(); ```

containsText(string)

| render | mount | shallow | | ------ | ----- | ------- | | yes | yes | yes | Check to see if wrapper contains text. ```js import React from 'react'; import {mount, render, shallow} from 'enzyme'; const TextFixture = () => (
Content here. More content
); cont wrapper = mount(); 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. ```js import { mount, render, shallow } from "enzyme"; import React, { PropTypes } from "react"; const DataFixture = ({ children, tr }) => (
content
); DataFixture.propTypes = { children: PropTypes.node, tr: PropTypes.string }; const wrapper = mount(); 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. ```js import React from "react"; import { mount, render, shallow } from "enzyme"; const DisabledFixture = () => (
<input id="coffee" type="text" value="coffee" />
<input id="tea" type="text" disabled value="tea" />
); const wrapper = renderMethod(); 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. ```js import React from 'react'; import {mount, render, shallow} from 'enzyme'; const ClassNamesFixture = () => (
Content here
); cont wrapper = mount(); 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. ```js import React from "react"; import { mount, render, shallow } from "enzyme"; const PresentFixture = () => (
<div id="burgers">with cheese</div>
<div>side of fries</div>
); const wrapper = mount(); 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: ```js import React from "react"; import { mount, render, shallow } from "enzyme"; const PresentFixture = () => null; const wrapperMount = mount(); wrapperMount.should.be.present(); // true const wrapperRender = render(); 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. ```js import React from "react"; import { mount, shallow } from "enzyme"; const PropFixture = ({ children, id, myObj }) =>
salad
; const wrapper = mount(); 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. ```js import React from "react"; import { mount, shallow } from "enzyme"; const PropsFixture = ({ id, title, total }) => (
content
); const wrapper = mount( ); 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. ```js 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(); 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. ```js 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(); 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>. ```js import React from "react"; import { mount, render, shallow } from "enzyme"; const FormInputsFixture = () => (
<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>
); const wrapper = mount(); 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"); ```