The last step is to test the actual interactions in your component! We'll need to be able to target each of our buttons, though. If you think back to our Todo component's render() function, there are two buttons that get created:

  render() {
    return (
      <div className={this.cssClasses()}>
        {this.state.description}
        <br />
        <button onClick={this.markAsDone}>Mark as Done</button>
        <button onClick={this.removeTodo}>Remove Me</button>
      </div>
    );
  }

Without any modifications, it would actually be difficult for us to specifically target either of the actual buttons. We'll want a way to target each button separately from each other, so let's go into the Todo component and add a unique className to each button! Add MarkDone className to the first button and RemoveTodo className to the second button in the render function in src/Todo.js, just like the following code:

  render() {
    return (
      <div className={this.cssClasses()}>
        {this.props.description}
        <br />
        <button className="MarkDone" onClick={this.markAsDone}>
          Mark as Done
        </button>
        <button className="RemoveTodo" onClick={this.removeTodo}>
          Remove Me
        </button>
      </div>
    );
  }

Save this code and the tests will rerun and it fails? But why? We haven't changed the tests yet! Refer the following screenshot:

This is actually doing exactly what it's supposed to! We made some modifications to our component that changed how the component got rendered out. In our case, we're totally okay with these changes, so we'll use another one of our test-watcher commands to update the snapshot! Hit u and our snapshot will get updated and our tests will go back to passing! Finally, we can go back to finishing up our tests for interaction!