Testing React State with React Class, Jest, and Enzyme

ClassComponent.jsx

import React from 'react';

class TestComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  render() {
    return (
      <h3>{this.state.count}</h3>
      <span>
        <button id="count-up" type="button" onClick={() => this.setState({ count: this.state.count + 1 })}>
          Count Up!
        </button>
        <button id="count-down" type="button" onClick={() => this.setState({ count: this.state.count - 1 })}>
          Count Down!
        </button>
        <button id="zero-count" type="button" onClick={() => this.setState({ count: 0 })}>Zero</button>
      </span>
    )
  }
}

export default TestComponent;

ClassComponent.test.jsx

import React from 'react';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import TestComponent from './ClassComponent';

Enzyme.configure({ adapter: new Adapter() });

describe('<TestComponent />', () => {
  let wrapper;
  
  beforeEach(() => {
    wrapper = Enzyme.shallow(<TestComponent />);
  });

  it('has the initial state count of zero', () => {
    expect(wrapper.state()).toEqual({ count: 0 });
  })
  
  describe('The Count Up Button', () => {
    it('increments state count by 1 on click', () => {
      wrapper.find('#count-up').props().onClick();
      expect(wrapper.state()).toEqual({ count: 1 });
    });
  });
  
  describe('The Count Down Button', () => {
    it('decrements state count by 1 on click', () => {
      wrapper.find('#count-down').props().onClick();
      expect(wrapper.state()).toEqual({ count: -1 });
    });
  });
  
  describe('The Count Zero Button', () => {
    it('sets state count to 0 on click', () => {
      wrapper.setState({ count: 10 });
      wrapper.find('#zero-count').props().onClick();
      expect(wrapper.state()).toEqual({ count: 0 });
    });
  });
  
});