fully-tested-react-counter.js

// Component
class App extends Component {
  constructor(props) {
    super(props);

    this.state = { counter: 0 };
  }

  render() {
    return (
      <div testId="component-app" className="App">
        <h1 testId="counter-display">
          The Counter is currently {this.state.counter}
        </h1>
        <button
          testId="increment-button"
          onClick={() => this.setState({ counter: this.state.counter + 1 })}
        >
          Increment counter
        </button>
        <button
          testId="decrement-button"
          onClick={() => this.setState({ counter: this.state.counter - 1 })}
        >
          Decrement counter
        </button>
      </div>
    );
  }
}

export default App;

// Tests
import React from "react";
import Enzyme, { shallow } from "enzyme";
import EnzymeAdapter from "enzyme-adapter-react-16";
import App from "./App";

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

/**
 * Factory to create a `ShallowWrapper for the App component
 * @function setup
 * @param {object} props - Component props specific to this setup.
 * @param {object} state - Initial state
 * @returns {ShallowWrapper}
 */
const setup = (props = {}, state = null) => {
  const wrapper = shallow(<App {...props} />);
  if (state) wrapper.setState(state);
  return wrapper;
};

/**
 * Return `ShallowWrapper` containing node(s) with the given test-id value.
 * @function findByTestId
 * @param {ShallowWrapper} wrapper - Enzyme shallow wrapper to search within.
 * @param {string} val - Value of data-test attribute to search
 * @return {ShallowWrapper}
 */
const findByTestId = (wrapper, id) => {
  return wrapper.find(`[testId="${id}"]`);
};

test("renders without crashing", () => {
  const wrapper = setup();
  findByTestId(wrapper, "component-app");
});

test("renders increment button", () => {
  const wrapper = setup();
  findByTestId(wrapper, "increment-button");
});

test("renders counter display", () => {
  const wrapper = setup();
  findByTestId(wrapper, "counter-display");
});

test("counter starts at 0", () => {
  const wrapper = setup();
  const initialCounterState = wrapper.state("counter");
  expect(initialCounterState).toBe(0);
});

test("clicking button increments counter display", () => {
  const counter = 7;
  const wrapper = setup(null, { counter });

  // find button and click
  const button = findByTestId(wrapper, "increment-button");
  button.simulate("click");
  wrapper.update();

  // find display and test value
  const counterDisplay = findByTestId(wrapper, "counter-display");
  expect(counterDisplay.text()).toContain(counter + 1);
});

test("click button decrements counter display", () => {
  const counter = 7;
  const wrapper = setup(null, { counter });

  const button = findByTestId(wrapper, "decrement-button");
  button.simulate("click");
  wrapper.update();

  const counterDisplay = findByTestId(wrapper, "counter-display");
  expect(counterDisplay.text()).toContain(counter - 1);
});