should-enzyme
should.js assertions for enzyme
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" />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>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 }) => (
contentdisabled()
| 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" />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>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 }) => (
contentstate(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"};return <div id="best-mangos">{this.state.bestFruit}</div>;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>);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>