React Testing: Unit, Integration, and E2E Strategies

React Testing: Unit, Integration, and E2E Strategies | DevPrep

import { render, screen, fireEvent } from "@testing-library/react";
import { Counter } from "./Counter";

test("increments counter on click", () => {
  render(<Counter />);
  const button = screen.getByRole("button", { name: /increment/i });
  fireEvent.click(button);
  expect(screen.getByText("Count: 1")).toBeInTheDocument();
});

import { renderHook, act } from "@testing-library/react";
import { useCounter } from "./useCounter";

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

test("user can search and filter results", async () => {
  // Mock API
  server.use(
    rest.get("/api/products", (req, res, ctx) => {
      const q = req.url.searchParams.get("q");
      return res(ctx.json(products.filter(p => p.name.includes(q))));
    })
  );

  render(<ProductSearch />);
  
  await userEvent.type(screen.getByRole("searchbox"), "laptop");
  await userEvent.click(screen.getByRole("button", { name: /search/i }));
  
  expect(await screen.findAllByRole("listitem")).toHaveLength(3);
});

React Testing: Unit, Integration, and E2E Strategies

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

The Testing Pyramid

Unit Tests with React Testing Library

Testing Hooks

Integration Tests

What NOT to Test

Testing Best Practices