Frontend Testing

// Unit test for pure function
import { add } from "./utils";

test("add(2, 3) returns 5", () => {
  expect(add(2, 3)).toBe(5);
});

// Unit test for component
import { render, screen } from "@testing-library/react";
import Button from "./Button";

test("Button renders with correct text", () => {
  render(<Button>Click</Button>);
  expect(screen.getByText("Click")).toBeInTheDocument();
});

// Integration test: Form + API
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Form from "./Form";
import { mockServer } from "./mocks";

test("Form submits data to API", async () => {
  mockServer.post("/api/users", { name: "John" });

  render(<Form />);
  await userEvent.type(screen.getByLabelText("Name"), "John");
  await userEvent.click(screen.getByText("Submit"));

  await waitFor(() => {
    expect(screen.getByText("Success")).toBeInTheDocument();
  });
});

// E2E test: Login → Navigate → Logout
import { test, expect } from "@playwright/test";

test("User can login and logout", async ({ page }) => {
  await page.goto("/login");
  await page.fill('input[name="email"]', "user@example.com");
  await page.fill('input[name="password"]', "password123");
  await page.click('button[type="submit"]');

  await expect(page).toHaveURL("/dashboard");
  await page.click('button[data-testid="logout"]');

  await expect(page).toHaveURL("/login");
});

// Snapshot test
import { render } from "@testing-library/react";
import Card from "./Card";

test("Card matches snapshot", () => {
  const { container } = render(<Card title="Hello" />);
  expect(container).toMatchSnapshot();
});

// Web Vitals in production
import { onLCP, onFCP, onCLS } from "web-vitals";

onLCP((metric) => console.log("LCP:", metric.value));
onFCP((metric) => console.log("FCP:", metric.value));
onCLS((metric) => console.log("CLS:", metric.value));