Learning how to spy on bound React component methods with Sinon

react-bound-test.js

import React, { Component } from 'react'

import chai, { expect } from 'chai'
import { mount } from 'enzyme'
import chaiEnzyme from 'chai-enzyme'
chai.use(chaiEnzyme())

import sinon from 'sinon'

class FormComponent extends Component {
    state = { value : '' }

    boundChangeInput = ev => { this.setState({ value : ev.target.value}) }
    notBoundChangeInput(ev) { this.setState({ value : ev.target.value }) }

    render() {
        const { value } = this.state

        return (
            <div>
                <input value={value} onChange={this.boundChangeInput} />
                <input value={value} onChange={this.notBoundChangeInput.bind(this)} />
            </div>
        )
    }
}

describe('bound method spying', function() {

    it('should be an instance of FormComponent', function() {
        const wrapper = mount(<FormComponent />)
        const node = wrapper.getNode()

        expect(node).to.be.an.instanceOf(FormComponent)
    })

    describe('should spy on boundChangeInput', function() {

        const wrapper = mount(<FormComponent />)
        let node = wrapper.getNode()

        sinon.spy(node, 'boundChangeInput')

        it('should have calledOnce prop on boundChangeInput from spy', function() {
            expect(node.boundChangeInput.calledOnce).to.exist
        })

        it('should have boundChangeInput.calledOnce true on simulated input change', function() {
            wrapper.find('input').at(0).simulate('change',{target:{value:'some value'}})

            expect(node.boundChangeInput.calledOnce).to.equal(true)
        })

        it('has the correct value', function() {
            expect(wrapper).to.have.state('value', 'some value')
        })
    })

    describe('should spy on notBoundChangeInput', function() {

        sinon.spy(FormComponent.prototype, 'notBoundChangeInput')

        const wrapper = mount(<FormComponent />)

        it('should have calledOnce prop on notBoundChangeInput from spy', function() {
            expect(FormComponent.prototype.notBoundChangeInput.calledOnce).to.exist
        })

        it('should have notBoundChangeInput.calledOnce true on simulated input change', function() {
            wrapper.find('input').at(1).simulate('change',{target:{value:'some other value'}})

            expect(FormComponent.prototype.notBoundChangeInput.calledOnce).to.equal(true)
        })

        it('has the correct value', function() {
            expect(wrapper).to.have.state('value', 'some other value')
        })
    })
})

/*
bound method spying
  √ should be an instance of FormComponent
  should spy on boundChangeInput
    √ should have calledOnce prop on boundChangeInput from spy
    1) should have boundChangeInput.calledOnce true on simulated input change
    √ has the correct value
  should spy on notBoundChangeInput
    √ should have calledOnce prop on notBoundChangeInput from spy
    √ should have notBoundChangeInput.calledOnce true on simulated input change
    √ has the correct value
*/