https://github.com/rkotze/should-enzyme
Useful functions for testing React Components with Enzyme.
https://github.com/rkotze/should-enzyme
assertions bdd enzyme mocha react react-components should tdd test testing
Last synced: 3 months ago
JSON representation
Useful functions for testing React Components with Enzyme.
- Host: GitHub
- URL: https://github.com/rkotze/should-enzyme
- Owner: rkotze
- License: mit
- Created: 2016-09-17T22:49:15.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T17:46:00.000Z (almost 3 years ago)
- Last Synced: 2025-07-02T05:41:32.925Z (4 months ago)
- Topics: assertions, bdd, enzyme, mocha, react, react-components, should, tdd, test, testing
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/should-enzyme
- Size: 430 KB
- Stars: 40
- Watchers: 3
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# should-enzyme
[](https://www.npmjs.com/package/should-enzyme)
[](https://travis-ci.org/rkotze/should-enzyme)
[should.js](https://shouldjs.github.io/) assertions for [enzyme](https://github.com/airbnb/enzyme)
1. [Install](#install)
1. [Setup](#setup)
1. [Assertions](#assertions)
1. [`attr(key, [value])`](#attrkey-value)
1. [`checked()`](#checked)
1. [`className(string)`](#classnamestring)
1. [`contain(node)`](#containnode)
1. [`containsText(string)`](#containstextstring)
1. [`data(key, [value])`](#datakey-value)
1. [`disabled()`](#disabled)
1. [`exactClassNames(string)`](#exactclassnamesstring)
1. [`present()`](#present)
1. [`prop(key, [value])`](#propkey-value)
1. [`props(object)`](#propsobject)
1. [`state(key, [value])`](#statekey-value)
1. [`text(string)`](#textstring)
1. [`value(string)`](#valuestring)
1. [Contribute](https://github.com/rkotze/should-enzyme/blob/master/CONTRIBUTING.md)
## Install
`npm i should-enzyme --save-dev`
## Setup
Install [Enzyme JS](https://github.com/airbnb/enzyme#installation)
```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 = () => (
);
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 (
);
};
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 = () => (
);
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 = () => (
with cheese
side of fries
);
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
{this.state.bestFruit};
}
}
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) => (
Test
);
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 ``, `` and ``.
```js
import React from "react";
import { mount, render, shallow } from "enzyme";
const FormInputsFixture = () => (
More coffee
Pizza
Salad
What value?
);
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");
```