react-testing-library

// Images
getByAltText("Company logo");
 
// Title attribute (less reliable)
getByTitle("Close");

// Only when other queries don't work
getByTestId("custom-element");

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
 
test("shows greeting after login", async () => {
  const user = userEvent.setup();
  render(<App />);
 
  // Act — simulate user interactions
  await user.type(screen.getByLabelText(/username/i), "john");
  await user.click(screen.getByRole("button", { name: /login/i }));
 
  // Assert — verify outcome
  expect(await screen.findByText(/welcome, john/i)).toBeInTheDocument();
});

import userEvent from "@testing-library/user-event";
 
test("user interactions", async () => {
  const user = userEvent.setup();
 
  // Click
  await user.click(element);
  await user.dblClick(element);
  await user.tripleClick(element);
 
  // Type
  await user.type(input, "Hello");
  await user.clear(input);
 
  // Select
  await user.selectOptions(select, ["option1", "option2"]);
 
  // Keyboard
  await user.keyboard("{Enter}");
  await user.keyboard("[ShiftLeft>]a[/ShiftLeft]"); // Shift+A
 
  // Clipboard
  await user.copy();
  await user.paste();
 
  // Pointer
  await user.hover(element);
  await user.unhover(element);
});

await waitFor(() => {
  expect(screen.getByText("Loaded")).toBeInTheDocument();
});
 
// With options
await waitFor(() => expect(callback).toHaveBeenCalled(), {
  timeout: 5000,
  interval: 100,
});

// Equivalent to: await waitFor(() => getByText('Loaded'))
const element = await screen.findByText("Loaded");

await waitForElementToBeRemoved(() => screen.queryByText("Loading..."));

// test-utils.tsx
import { render } from "@testing-library/react";
import { ThemeProvider } from "./ThemeProvider";
import { AuthProvider } from "./AuthProvider";
 
function AllProviders({ children }) {
  return (
    <ThemeProvider>
      <AuthProvider>{children}</AuthProvider>
    </ThemeProvider>
  );
}
 
const customRender = (ui, options) => render(ui, { wrapper: AllProviders, ...options });
 
export * from "@testing-library/react";
export { customRender as render };

import { renderHook, act } from "@testing-library/react";
 
test("useCounter increments", () => {
  const { result } = renderHook(() => useCounter());
 
  expect(result.current.count).toBe(0);
 
  act(() => {
    result.current.increment();
  });
 
  expect(result.current.count).toBe(1);
});

const { rerender } = render(<Counter count={1} />);
expect(screen.getByText("Count: 1")).toBeInTheDocument();
 
rerender(<Counter count={2} />);
expect(screen.getByText("Count: 2")).toBeInTheDocument();

import { within } from "@testing-library/react";
 
const modal = screen.getByRole("dialog");
const submitBtn = within(modal).getByRole("button", { name: /submit/i });

// Print entire DOM
screen.debug();
 
// Print specific element
screen.debug(screen.getByRole("button"));
 
// Log available roles
import { logRoles } from "@testing-library/react";
logRoles(container);
 
// With prettyDOM options
screen.debug(undefined, 10000); // max length

import "@testing-library/jest-dom";
 
expect(element).toBeInTheDocument();
expect(element).toBeVisible();
expect(element).toBeEnabled();
expect(element).toBeDisabled();
expect(element).toHaveTextContent("Hello");
expect(element).toHaveValue("input value");
expect(element).toHaveAttribute("href", "/home");
expect(element).toHaveClass("active");
expect(element).toHaveFocus();
expect(element).toBeChecked();

import { configure } from "@testing-library/react";
 
configure({
  // Custom test ID attribute
  testIdAttribute: "data-my-test-id",
 
  // Async timeout
  asyncUtilTimeout: 5000,
 
  // Default hidden
  defaultHidden: true,
 
  // Throw suggestions (debugging)
  throwSuggestions: true,
});

// ❌ Don't query by class/id
container.querySelector(".my-class");
 
// ❌ Don't use container.firstChild
const { container } = render(<Component />);
expect(container.firstChild).toHaveClass("active");
 
// ❌ Don't use fireEvent when userEvent works
fireEvent.click(button); // Use userEvent.click instead
 
// ❌ Don't test implementation details
expect(component.state.loading).toBe(false);
 
// ❌ Don't use waitFor with findBy
await waitFor(() => screen.findByText("x")); // findBy already waits
 
// ❌ Don't assert inside waitFor callback (unless necessary)
await waitFor(() => {
  expect(mockFn).toHaveBeenCalled(); // OK - need to wait for call
});

// ✅ Use screen for all queries
import { render, screen } from "@testing-library/react";
render(<Component />);
screen.getByRole("button"); // Good
 
// ✅ Prefer userEvent over fireEvent
const user = userEvent.setup();
await user.click(button);
 
// ✅ Use findBy for async elements
const element = await screen.findByText("Loaded");
 
// ✅ Use queryBy for non-existence assertions
expect(screen.queryByText("Error")).not.toBeInTheDocument();
 
// ✅ Use within for scoped queries
const form = screen.getByRole("form");
within(form).getByLabelText("Email");
 
// ✅ Use accessible queries (role, label, text)
getByRole("button", { name: /submit/i });

// Exact match (default)
getByText("Hello World");
 
// Substring match
getByText("llo Worl", { exact: false });
 
// Regex
getByText(/hello world/i);
 
// Custom function
getByText((content, element) => {
  return element.tagName === "SPAN" && content.startsWith("Hello");
});