pentaho/hv-uikit-react/ui-unit-testing

import { render, screen } from "@testing-library/react";
import { userEvent } from "@testing-library/user-event";
import { expect, it, vi } from "vitest";
import { MyForm } from "./MyForm";
// short and descriptive 👇 test name focused on the behavior
it("submits the form when valid", async () => {
  const submitMock = vi.fn();
  render(<MyForm onSubmit={submitMock} />);
  // prefer the `screen.*byRole` queries
  const input = screen.getByRole("textbox", { name: /username/i });
  await userEvent.type(input, "testUser");
  const submitButton = screen.getByRole("button", { name: /submit/i });
  await userEvent.click(submitButton);
  // assert the user-observable UI changes
  expect(screen.getByText(/form submitted successfully/i)).toBeInTheDocument();
  expect(submitMock).toHaveBeenCalledWith({ username: "testUser" });
});