Setup.jsx

import React from "react";

// Same level of complexity for integration tests
export default function SetupBookDetail() {
  const { state: book, fetchBook, deleteBook } = React.useContext(BookContext);
  const bookUrl = utils.buildBookUrlFromUri();

  React.useEffect(() => {
    fetchBook(bookUrl);
  }, []);

  if (book === null) {
    return <p>Loading...</p>;
  }

  return <BookDetail book={book} deleteBook={deleteBook} />;
}

// No need to mock retrieving book
// Mock deleteBook at any level (either the function itself
// or the API calls it would make)
export default function BookDetail({ bookUrl, book, deleteBook }) {
  const [isDeleteClicked, setDeleteClicked] = React.useState(false);

  // Easy to test onDeleteClick event and its consequences
  // Easy to test console.log call
  // Easy to test deleteBook call
  // or even the underlying API call (in the case of integration tests)
  // Easy to snapshot test the result of isDeleteClicked change
  function onDeleteClick() {
    console.log("Book Deleted");
    deleteBook(bookUrl);
    setDeleteClicked(true);
  }

  return (
    <>
      <p>Book: {book.title}</p>
      <button onClick={onDeleteClick}>Delete book</button>
      <p>Is delete clicked: {isDeleteClicked}</p>
    </>
  );
}