should-enzyme

should.js assertions for enzyme

1. Install
2. Setup
3. Assertions
   1. attr(key, [value])
   2. checked()
   3. className(string)
   4. containsText(string)
   5. prop(key, [value])
   6. state(key, [value])
4. text(string)
5. value(string)

Install

npm i should-enzyme --save-dev

Setup

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.

checked()

render	mount	shallow
yes	yes	yes

Check to see if input type checkbox is checked.

className(string)

render	mount	shallow
yes	yes	yes

Check to see if wrapper has css class.

containsText(string)

render	mount	shallow
yes	yes	yes

Check to see if wrapper contains text.

prop(key, [value])

render	mount	shallow
no	yes	yes

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

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, render, 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('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');