We talked a lot about our function mocks but then focused on a bunch of other tests; now it's time for us to revisit our mocked function and actually test it out! Basically, all we need to do is to use a helper function to verify that our mock has been called:

  it("calls the mock remove function", () => {
    component.find("button.RemoveTodo").simulate("click");
    expect(mockRemoveTodo).toHaveBeenCalled();
  });

We had our mockRemoveTodo function that we had put back up in the top of our describe block:

const mockRemoveTodo = jest.fn();

We've already seen the simulate call in a previous test, so all we do is create the expectation that our mock function has been called, and that's it! With that, we have a very thorough test suite for our Todo component, and everything we do from here are just slightly more complicated variations of the same tests! Seven total Tests, two Test Suites, and one Snapshots test—all working perfectly! Refer the following screenshot:

Before we move on, let's verify the full test suite for src/Todo.test.js:

import React from "react";
import ReactDOM from "react-dom";
import { shallow } from "enzyme";
import renderer from "react-test-renderer";

import Todo from "./Todo";

describe(Todo, () => {
  const description = "New Todo";
  const mockRemoveTodo = jest.fn();
  const component = shallow(
    <Todo description={description} removeTodo={mockRemoveTodo} />
  );

  it("renders without crashing", () => {
    const div = document.createElement("div");
    ReactDOM.render(<Todo />, div);
    ReactDOM.unmountComponentAtNode(div);
  });

  it("renders and matches our snapshot", () => {
    const component = renderer.create(<Todo description="Yo" />);
    const tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });

  it("renders a Todo component", () => {
    expect(component.contains(<div className="Todo" />));
  });

  it("contains the description", () => {
    expect(component.text()).toContain(description);
  });

  it("marks the Todo as done", () => {
    component.find("button.MarkDone").simulate("click");
    expect(component.state("done")).toEqual(true);
  });

  it("calls the mock remove function", () => {
    component.find("button.RemoveTodo").simulate("click");
    expect(mockRemoveTodo).toHaveBeenCalled();
  });
});

Let's now add some tests for TodoList as well!