App.test.jsx

import { render, screen, within } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import App from "./App";
import renderer from "react-test-renderer";

const setup = () => {
  render(<App />);
  return screen.getByRole("table");
};

it("renders products from API correctly", () => {
  const appTree = renderer.create(<App />).toJSON();
  expect(appTree).toMatchSnapshot();
});

describe("Filtering", () => {
  it("hides Electronics category", async () => {
    const app = setup();

    await screen.findByText("Football");
    userEvent.click(screen.getByLabelText(/electronics/i));

    expect(within(app).queryByText("Electronics")).not.toBeInTheDocument();
  });

  it("hides Sporting Goods category", async () => {
    const app = setup();

    await screen.findByText("Football");
    userEvent.click(screen.getByLabelText(/sporting goods/i));

    expect(within(app).queryByText("Sporting Goods")).not.toBeInTheDocument();
  });

  it("hides all products when both category checkboxes are unchecked", async () => {
    const app = setup();

    await screen.findByText("Football");
    userEvent.click(screen.getByLabelText(/electronics/i));
    userEvent.click(screen.getByLabelText(/sporting goods/i));

    const rows = within(app).getAllByRole("row");

    // Only header
    expect(rows.length).toBe(1);
  });

  it("hides out of stock items when 'In Stock' is checked", async () => {
    const app = setup();

    await screen.findByText("Football");
    userEvent.click(screen.getByLabelText("In Stock"));

    expect(within(app).queryByText("0")).not.toBeInTheDocument();
  });

  it("shows a single product when searching for 'ipod' (case-insensitive)", async () => {
    const app = setup();

    await screen.findByText("Football");
    userEvent.type(screen.getByLabelText(/search/i), "ipod");

    // Include the header
    expect(within(app).getAllByRole("row").length).toBe(2);
  });
});

Checkbox.test.jsx

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import renderer from "react-test-renderer";
import Checkbox from "./Checkbox";

const setup = (
  <Checkbox
    id="test"
    label="test"
    filterType="testFilter"
    changeHandler={() => {
      console.log("test");
    }}
    checked={true}
  />
);

it("renders a checkbox", () => {
  const checkboxTree = renderer.create(setup).toJSON();
  expect(checkboxTree).toMatchSnapshot();
});

it("logs a message when the checkbox is clicked", () => {
  const spy = jest.spyOn(console, "log");
  render(setup);
  userEvent.click(screen.getByRole("checkbox"));
  expect(spy).toHaveBeenCalledWith("test");
});

ProductTable.test.jsx

import renderer from "react-test-renderer";
import ProductTable from "./ProductTable";

const products = [
  {
    id: 1,
    category: "Sporting Goods",
    price: 49.99,
    qty: 0,
    name: "Football",
  },
  {
    id: 2,
    category: "Sporting Goods",
    price: 9.99,
    qty: 0,
    name: "Baseball",
  },
  {
    id: 3,
    category: "Sporting Goods",
    price: 29.99,
    qty: 0,
    name: "Basketball",
  },
];

it("renders", () => {
  const productTableTree = renderer
    .create(<ProductTable products={products} />)
    .toJSON();
  expect(productTableTree).toMatchSnapshot();
});