Sample unit testing with Chai-Enzyme

Counter.jsx

import React, {Component} from "react";
import {connect, Provider} from "react-redux";
import autoBind from 'react-autobind';
import Box, {Container, VBox, Page} from "react-layout-components"

import fireflyIcon from "./Firefly.png";

import {INCREMENT_COUNTER, DECREMENT_COUNTER} from "../constants/ActionTypes"



export const CounterValue = ({value}) => <div>Counter: <span className="counterValue">{value}</span></div>;



export class Counter extends Component {
    static rerenderViz = true;
    constructor(props) {
        super(props);

        this.state = {counter: 0};

        autoBind(this);
    }

    increment() {
        this.setState({counter: this.state.counter + 1});
    }

    incrementAction() {
        this.props.dispatch({type : INCREMENT_COUNTER})
    }

    decrementAction() {
        this.props.dispatch({type : DECREMENT_COUNTER})
    }

    decrement() {
        this.setState({counter: this.state.counter - 1});
    }

    render() {
        return (
            <div>
                <p>Testing a React component... (abcd) </p>
                <div><img src={fireflyIcon} /></div>
                <div>Component state counter:
                    <CounterValue value={this.state.counter} />
                </div>
                <div>Redux state counter:
                    <CounterValue value={this.props.counter} />
                </div>
                <VBox>
                    <button onClick={this.increment}>Increment Component</button>
                    <button onClick={this.decrement}>Decrement Component</button>
                    <button onClick={this.incrementAction}>Increment Redux</button>
                    <button onClick={this.decrementAction}>Decrement Redux</button>
                </VBox>
            </div>
        );
    }
}

let mapStateToProps = (state) => {
    return {counter : state.counter};
}


const ConnectedCounter = connect(mapStateToProps)(Counter);

export default ConnectedCounter;

counter.spec.js

import React from 'react'
import {mount, render, shallow} from 'enzyme'
import sinon from 'sinon';


import {INCREMENT_COUNTER} from "constants/ActionTypes";
import {Counter} from "../src/containers/Counter"



describe('testing the Counter component', () => {

    const handleButtonClick = sinon.spy();

    const wrapper = mount(<Counter counter={0} dispatch={handleButtonClick} />);

    it("Counts properly", () => {
        let counterValues = wrapper.find(".counterValue");
        let stateCounterValue = counterValues.first();
        let reduxCounterValue = counterValues.last();

        let stateValue = stateCounterValue.text();
        expect(stateValue).to.equal('0');

        let reduxValue = reduxCounterValue.text();
        expect(reduxValue).to.equal('0');

        let buttons = wrapper.find('button');

        let incrementStateButton = buttons.filterWhere(button => button.text() === 'Increment Component');
        let incrementReduxButton = buttons.filterWhere(button => button.text() === 'Increment Redux')

        expect(incrementStateButton.length).to.equal(1);
        expect(incrementReduxButton.length).to.equal(1);

        incrementStateButton.simulate('click');
        stateValue = stateCounterValue.text();
        expect(stateValue).to.equal('1');

        incrementReduxButton.simulate('click');
        expect(handleButtonClick.calledOnce).to.equal(true);
        expect(handleButtonClick.calledWith({type : INCREMENT_COUNTER})).to.be.true;

        wrapper.setProps({counter : 1});

        reduxValue = reduxCounterValue.text();
        expect(reduxValue).to.equal('1');
    });
});

hello_world.spec.js

import { expect } from 'chai';

import React from 'react'
import {mount, render, shallow} from 'enzyme'



class Fixture extends React.Component {
    render () {
        return (
            <div style={{ border: 1 }}>
                <span style={{ color: 'red' }}>test</span>
            </div>
        )
    }
}


class Foo extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }
    render() {
        const { count } = this.state;
        return (
            <div>
                <div className={`clicks-${count}`}>
                    {count} clicks
                </div>
                <a onClick={() => this.setState({ count: count + 1 })}>
                    Increment
                </a>
            </div>
        );
    }
}




describe('hello world test sequence', () => {
    it('works!', () => {
        expect(true).to.be.true;
    });

    it('has a second test', () => {
        expect("a").to.have.length(1)
    })
});


describe('second sequence in same file', () => {

    const wrapper = mount(<Fixture />) // mount/render/shallow when applicable

   it('might work?', () => {
       expect(true).to.be.true;
   })

    it('has a React component', () => {

        let keys = Object.keys(expect(wrapper).to.have);
        expect(wrapper).to.have.style('border')
        expect(wrapper).to.not.have.style('color')

        expect(wrapper).to.have.style('border', '1px')
        expect(wrapper).to.not.have.style('border', '2px')

        expect(wrapper).to.have.style('border').equal('1px')
    })
});


describe('testing interaction with a component', () => {
    const wrapper = mount(<Foo />);

    it("Can click on stuff", () => {

        expect(wrapper.find('.clicks-0').length).to.equal(1);
        wrapper.find('a').simulate('click');
        expect(wrapper.find('.clicks-1').length).to.equal(1);
    })
})