React Cheatsheet 13 — Testing with React Testing Library

npm i -D vitest @vitest/coverage-v8 jsdom \
  @testing-library/react @testing-library/jest-dom @testing-library/user-event

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: "jsdom",
    setupFiles: ["./test/setup.ts"],
  },
});

import "@testing-library/jest-dom/vitest";

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

test("renders greeting", () => {
  render(<Hello name="World" />);
  expect(screen.getByText("Hello World")).toBeInTheDocument();
});

test("increments on click", async () => {
  const user = userEvent.setup();
  render(<Counter />);
  
  await user.click(screen.getByRole("button", { name: /add/i }));
  
  expect(screen.getByRole("status")).toHaveTextContent("1");
});

// getByX — sync, throws if not found
screen.getByRole("button", { name: "Save" })
screen.getByLabelText("Email")
screen.getByPlaceholderText("Search…")
screen.getByText(/welcome/i)
screen.getByDisplayValue("text")
screen.getByAltText("logo")
screen.getByTitle("close")
screen.getByTestId("user-card")

// queryByX — sync, returns null
screen.queryByText("nope")

// findByX — async, awaits up to 1s
await screen.findByText("loaded")

// getAllByX — multiple
screen.getAllByRole("listitem")

expect(el).toBeInTheDocument();
expect(el).toBeVisible();
expect(el).toBeDisabled();
expect(el).toBeChecked();
expect(el).toHaveTextContent("hi");
expect(el).toHaveValue("v");
expect(el).toHaveClass("active");
expect(el).toHaveAttribute("href", "/x");
expect(el).toHaveFocus();
expect(input).toBeRequired();

const user = userEvent.setup();

await user.click(button);
await user.dblClick(button);
await user.hover(el);
await user.unhover(el);

await user.type(input, "hello");
await user.clear(input);
await user.keyboard("{Enter}");
await user.tab();
await user.upload(input, file);
await user.selectOptions(select, "option-value");

// Find: re-tries until found
const el = await screen.findByText("loaded");

// waitFor: arbitrary predicate
await waitFor(() => {
  expect(spy).toHaveBeenCalled();
});

// waitForElementToBeRemoved
await waitForElementToBeRemoved(() => screen.queryByText("loading"));

vi.mock("./api", () => ({
  fetchUser: vi.fn().mockResolvedValue({ id: 1, name: "A" }),
}));

import { fetchUser } from "./api";

test("loads user", async () => {
  render(<UserCard id={1} />);
  expect(await screen.findByText("A")).toBeInTheDocument();
});

npm i -D msw

import { setupServer } from "msw/node";
import { http, HttpResponse } from "msw";

const server = setupServer(
  http.get("/api/users/:id", () => HttpResponse.json({ id: 1, name: "A" })),
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

// test/utils.tsx
function renderWithProviders(ui: React.ReactElement) {
  return render(
    <QueryClientProvider client={new QueryClient()}>
      <Router>{ui}</Router>
    </QueryClientProvider>
  );
}

export * from "@testing-library/react";
export { renderWithProviders as render };

import { render, screen } from "./utils";

expect(container).toMatchSnapshot();
expect(container).toMatchInlineSnapshot();

import { renderHook } from "@testing-library/react";

test("useCounter", () => {
  const { result } = renderHook(() => useCounter());
  act(() => result.current.inc());
  expect(result.current.count).toBe(1);
});