Home component and tests for https://bambielli.com/til/2018-03-04-directly-test-react-component-methods

Home.jsx

import React, { Component } from 'react';

// react 16.1.1

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
    };
    this.incrementCounter = this.incrementCounter.bind(this);
  }

  incrementCounter(two) {
    const counter = two ? this.state.counter + 2 : this.state.counter + 1;
    this.setState({ counter });
  }

  render() {
    const { two } = this.props;
    return (
      <div>
        <div>{this.state.counter}</div>
        <button onClick={() => this.incrementCounter(two)} >Increment</button>
      </div>
    );
  }
}

export default Home;

Home.test.js

import React from 'react';
import { shallow } from 'enzyme';
import Home from '../Home';

describe('Home', () => {
  describe('indirectly testing "incrementCounter" through click simulation', () => {
    it('should update the count by 1 when invoked by default', () => {
      const wrapper = shallow(<Home />);
      expect(wrapper.state('counter')).toBe(0);
      wrapper.find('button').simulate('click');
      expect(wrapper.state('counter')).toBe(1);
    });
    it('should add two to the count when the "two" value is true', () => {
      const wrapper = shallow(<Home two />);
      expect(wrapper.state('counter')).toBe(0);
      wrapper.find('button').simulate('click');
      expect(wrapper.state('counter')).toBe(2);
    });
  });
  describe('directly invoking the "incrementCounter" method from component instance', () => {
    it('should update the count by 1 when invoked by default', () => {
      const wrapper = shallow(<Home />);
      const instance = wrapper.instance();
      expect(wrapper.state('counter')).toBe(0);
      instance.incrementCounter();
      expect(wrapper.state('counter')).toBe(1);
    });
    it('should add two to the counter when the "two" value is true', () => {
      const wrapper = shallow(<Home />);
      const instance = wrapper.instance();
      expect(wrapper.state('counter')).toBe(0);
      instance.incrementCounter(true);
      expect(wrapper.state('counter')).toBe(2);
    });
  });
  describe('spying on', () => {
    it('should call incrementCounter when the button is clicked', () => {
      const two = true;
      const wrapper = shallow(<Home two />); // passing the "two" prop to test if it is properly passed to onClick handler
      const instance = wrapper.instance();
      jest.spyOn(instance, 'incrementCounter');
      wrapper.find('button').simulate('click');
      expect(instance.incrementCounter).toHaveBeenCalledWith(two);
      expect(wrapper.state('counter')).toBe(2);
    });
    it('should call with alternate implementation', () => {
      const two = true;
      const wrapper = shallow(<Home two />); // passing the "two" prop to test if it is properly passed to onClick handler
      const instance = wrapper.instance();
      jest.spyOn(instance, 'incrementCounter').mockImplementation(jest.fn()); // stub with empty function
      wrapper.find('button').simulate('click');
      expect(instance.incrementCounter).toHaveBeenCalledWith(two);
      expect(wrapper.state('counter')).toBe(0); // should not have changed, since i stubbed out the implementation with an empty mock function.
    });
  });
});

Great! Thanks for the snippet.