Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 days ago
JSON representation

Useful functions for testing React Components with Enzyme.

Awesome Lists containing this project

README 

        
# should-enzyme



[![npm version](https://img.shields.io/npm/v/should-enzyme.svg)](https://www.npmjs.com/package/should-enzyme)

[![Build Status](https://travis-ci.org/rkotze/should-enzyme.svg?branch=master)](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");

```