Tests to add function and Add component from article https://joaoforja.com/blog/how-to-get-started-testing-react-applications/

Tests to add function and Add component

import { add, Add } from "./Add";
import React from "react";
import { render, fireEvent, waitFor } from "@testing-library/react";

test("6 + 4 = 10", function () {
  expect.assertions(1);
  return expect(add(6, 4)).resolves.toBe(10);
});

test("Add component has expected fields", function () {
  const { getByLabelText, getByText } = render(<Add />);

  expect(getByLabelText("Term1")).toBeInTheDocument();
  expect(getByLabelText("Term2")).toBeInTheDocument();
  expect(getByText("ADD")).toBeInTheDocument();
});

test("User can add 3 to 4", function () {
  const { getByLabelText, getByText } = render(<Add />);

  fireEvent.change(getByLabelText("Term1"), { target: { value: 3 } });
  fireEvent.change(getByLabelText("Term2"), { target: { value: 4 } });
  fireEvent.click(getByText("ADD"));

  return waitFor(() => expect(getByText("7")).toBeInTheDocument());
});