Updated Enzyme Testing Implementation from https://www.robertcooper.me/testing-stateful-react-function-components-with-react-testing-library

ChecklistClassComponent.test.tsx

import React from "react";
import { shallow, mount } from "enzyme";
import { Checklist } from "./ChecklistClassComponent";
import Enzyme from "enzyme";
import Adapter from "enzyme-adapter-react-16";

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

const mockItems = [
  {
    description: "first item",
    completed: false
  },
  {
    description: "second item",
    completed: false
  },
  {
    description: "third item",
    completed: false
  }
];

describe("Checklist Class Component", () => {
  it("should render all 3 list items", () => {
    const wrapper = shallow(<Checklist items={mockItems} />);


    expect(wrapper.find("label").length).toBe(3);
  });

  describe("handleChange", () => {
    it("should check two out the three checklist items", () => {
      const wrapper = shallow(<Checklist items={mockItems} />);

      const firstCheck = () => wrapper
        .find('input')
        .filterWhere((n: any) => n.props().id === 'first item')

      const secondCheck = () => wrapper
        .find('input')
        .filterWhere((n: any) => n.props().id === 'second item')

      const thirdCheck = () => wrapper
        .find('input')
        .filterWhere((n: any) => n.props().id === 'third item')

      firstCheck().simulate('change')
      secondCheck().simulate('change')

      expect(firstCheck().props().checked).toBeTruthy()
      expect(secondCheck().props().checked).toBeTruthy()
      expect(thirdCheck().props().checked).toBeFalsy()
      expect(wrapper.findWhere(n => n.text() === 'All tasks completed')).toHaveLength(0)
    });

    it("should display a message when all items are completed", () => {
      const wrapper = shallow(<Checklist items={mockItems} />);

      const firstCheck = () => wrapper
        .find('input')
        .filterWhere((n: any) => n.props().id === 'first item')

      const secondCheck = () => wrapper
        .find('input')
        .filterWhere((n: any) => n.props().id === 'second item')

      const thirdCheck = () => wrapper
        .find('input')
        .filterWhere((n: any) => n.props().id === 'third item')

      firstCheck().simulate('change')
      secondCheck().simulate('change')
      thirdCheck().simulate('change')

      expect(
        wrapper
          .findWhere(n => n.text() === 'All tasks completed')
      ).toHaveLength(1);
    });
  });
});

ChecklistClassComponent.tsx

import React from "react";
import styled from "styled-components";

interface Item {
  description: string;
  completed: boolean;
}

type ChecklistProps = {
  items: Array<Item>;
};

type ChecklistState = {
  checklistItems: Array<Item>;
};

const TasksCompletedMessage = styled.p<{ visible: boolean }>`
  visibility: ${props => (props.visible ? "visible" : "hidden")};
`;

export class Checklist extends React.Component<ChecklistProps, ChecklistState> {
  state = {
    checklistItems: this.props.items
  };

  handleChange = (itemIndex: number) => {
    // Make a shallow copy so we don't mutate state directly
    const toggledItem = { ...this.state.checklistItems[itemIndex] };
    toggledItem.completed = !toggledItem.completed;
    this.setState({
      checklistItems: [
        ...this.state.checklistItems.slice(0, itemIndex),
        toggledItem,
        ...this.state.checklistItems.slice(itemIndex + 1)
      ]
    });
  };

  render() {
    // Determine if all tasks are completed
    const allTasksCompleted = this.state.checklistItems.every(
      ({ completed }) => completed
    );
    return (
      <div>
        <form>
          {this.state.checklistItems.map((item, index) => (
            <React.Fragment key={item.description}>
              <input
                onChange={() => this.handleChange(index)}
                type="checkbox"
                className="checkbox"
                checked={item.completed ? true : false}
                id={item.description}
              />
              <label htmlFor={item.description}>{item.description}</label>
            </React.Fragment>
          ))}
        </form>
        {/* I changed this */}
        {allTasksCompleted &&
          <TasksCompletedMessage
            className="xs-text-4 text-green xs-mt2"
            visible={allTasksCompleted}
          >
            All tasks completed{" "}
            <span role="img" aria-label="checkmark">
              ✅
          </span>
          </TasksCompletedMessage>
      }
      </div>
    );
  }
}