Frontend Testing Best Practices

sergiodxa/agent-skills/skills/frontend-testing-best-practices

by sergiodxa40e21b46189dNo license90 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 8 months ago

Testing best practices for the frontend. Emphasizes E2E tests over unit tests, minimal mocking, and testing behavior over implementation details. Use when writing tests or reviewing test code.

Instructions onlySoftware Development

AI-generated overview

Guidelines for frontend testing that favor E2E tests, minimal mocking, and behavior-focused assertions.

What it does: This skill provides six rules for writing and reviewing frontend tests. It recommends preferring end-to-end tests over unit tests, avoiding direct React component tests, minimizing mocks, and using accessible selectors. It also covers E2E and unit test file structure and placement.
When to use it: Use it when deciding what type of test to write, writing new E2E or unit tests, reviewing test code, or refactoring existing tests.
Requirements: No scripts or tooling are required; it is instructions only. The examples reference Playwright, Vitest, and MSW, but the skill itself needs nothing beyond the agent.

Testing Best Practices

Guidelines for writing effective, maintainable tests that provide real confidence. Contains 6 rules focused on preferring E2E tests, minimizing mocking, and testing behavior over implementation.

Core Philosophy

Prefer E2E tests over unit tests - Test the whole system, not isolated pieces
Minimize mocking - If you need complex mocks, write an E2E test instead
Test behavior, not implementation - Test what users see and do
Avoid testing React components directly - Test them through E2E

When to Apply

Reference these guidelines when:

Deciding what type of test to write
Writing new E2E or unit tests
Reviewing test code
Refactoring tests

Rules Summary

Testing Strategy (CRITICAL)

prefer-e2e-tests - @rules/prefer-e2e-tests.md

Default to E2E tests. Only write unit tests for pure functions.

typescript

// E2E test (PREFERRED) - tests real user flowtest("user can place an order", async ({ page }) => {  await createTestingAccount(page, { account_status: "active" });  await page.goto("/catalog");  await page.getByRole("heading", { name: "Example Item" }).click();  await page.getByRole("link", { name: "Buy" }).click();  // ... complete flow  await expect(page.getByAltText("Thank you")).toBeVisible();});
// Unit test - ONLY for pure functionstest("formatCurrency formats with two decimals", () => {  expect(formatCurrency(1234.5)).toBe("$1,234.50");});

// E2E test (PREFERRED) - tests real user flowtest("user can place an order", async ({ page }) => {  await createTestingAccount(page, { account_status: "active" });  await page.goto("/catalog");  await page.getByRole("heading", { name: "Example Item" }).click();  await page.getByRole("link", { name: "Buy" }).click();  // ... complete flow  await expect(page.getByAltText("Thank you")).toBeVisible();});
// Unit test - ONLY for pure functionstest("formatCurrency formats with two decimals", () => {  expect(formatCurrency(1234.5)).toBe("$1,234.50");});

avoid-component-tests - @rules/avoid-component-tests.md

Don't unit test React components. Test them through E2E or not at all.

typescript

// BAD: Component unit testdescribe("OrderCard", () => {  test("renders amount", () => {    render(<OrderCard amount={100} />);    expect(screen.getByText("$100")).toBeInTheDocument();  });});
// GOOD: E2E test covers the component naturallytest("order history shows orders", async ({ page }) => {  await page.goto("/orders");  await expect(page.getByText("$100")).toBeVisible();});

// BAD: Component unit testdescribe("OrderCard", () => {  test("renders amount", () => {    render(<OrderCard amount={100} />);    expect(screen.getByText("$100")).toBeInTheDocument();  });});
// GOOD: E2E test covers the component naturallytest("order history shows orders", async ({ page }) => {  await page.goto("/orders");  await expect(page.getByText("$100")).toBeVisible();});

minimize-mocking - @rules/minimize-mocking.md

Keep mocks simple. If you need 3+ mocks, write an E2E test instead.

typescript

// BAD: Too many mocks = write E2E testvi.mock("~/lib/auth");vi.mock("~/lib/transactions");vi.mock("~/hooks/useAccount");
// GOOD: Simple MSW mock for loader testmockServer.use(  http.get("/api/user", () => HttpResponse.json({ name: "John" })),);

// BAD: Too many mocks = write E2E testvi.mock("~/lib/auth");vi.mock("~/lib/transactions");vi.mock("~/hooks/useAccount");
// GOOD: Simple MSW mock for loader testmockServer.use(  http.get("/api/user", () => HttpResponse.json({ name: "John" })),);

E2E Tests (HIGH)

e2e-test-structure - @rules/e2e-test-structure.md

E2E tests go in e2e/tests/, not frontend/.

typescript

// e2e/tests/order.spec.tsimport { test, expect } from "@playwright/test";import { addAccountBalance, createTestingAccount } from "./utils";
test.describe("Orders", () => {  test.beforeEach(async ({ page, context }) => {    await createTestingAccount(page, { account_status: "active" });    let cookies = await context.cookies();    let account_id = cookies.find((c) => c.name === "account_id").value;    await addAccountBalance({ account_id, amount: 10000, replaceBalance: true });  });
  test("place order with default values", async ({ page }) => {    await page.goto("/catalog");    // ... user flow  });});

// e2e/tests/order.spec.tsimport { test, expect } from "@playwright/test";import { addAccountBalance, createTestingAccount } from "./utils";
test.describe("Orders", () => {  test.beforeEach(async ({ page, context }) => {    await createTestingAccount(page, { account_status: "active" });    let cookies = await context.cookies();    let account_id = cookies.find((c) => c.name === "account_id").value;    await addAccountBalance({ account_id, amount: 10000, replaceBalance: true });  });
  test("place order with default values", async ({ page }) => {    await page.goto("/catalog");    // ... user flow  });});

e2e-selectors - @rules/e2e-selectors.md

Use accessible selectors: role > label > text > testid.

typescript

// GOOD: Role-based (preferred)await page.getByRole("button", { name: "Submit" }).click();await page.getByRole("heading", { name: "Dashboard" });
// GOOD: Label-basedawait page.getByLabel("Email").fill("[email protected]");
// OK: Test ID when no accessible selector existsawait expect(page.getByTestId("balance")).toHaveText("$1,234");
// BAD: CSS selectorsawait page.locator(".btn-primary").click();

// GOOD: Role-based (preferred)await page.getByRole("button", { name: "Submit" }).click();await page.getByRole("heading", { name: "Dashboard" });
// GOOD: Label-basedawait page.getByLabel("Email").fill("[email protected]");
// OK: Test ID when no accessible selector existsawait expect(page.getByTestId("balance")).toHaveText("$1,234");
// BAD: CSS selectorsawait page.locator(".btn-primary").click();

Unit Tests (MEDIUM)

unit-test-structure - @rules/unit-test-structure.md

Unit tests for pure functions only. Co-locate with source files.

typescript

// app/utils/format.test.tsimport { describe, test, expect } from "vitest";import { formatCurrency } from "./format";
describe("formatCurrency", () => {  test("formats positive amounts", () => {    expect(formatCurrency(1234.5)).toBe("$1,234.50");  });
  test("handles zero", () => {    expect(formatCurrency(0)).toBe("$0.00");  });});

// app/utils/format.test.tsimport { describe, test, expect } from "vitest";import { formatCurrency } from "./format";
describe("formatCurrency", () => {  test("formats positive amounts", () => {    expect(formatCurrency(1234.5)).toBe("$1,234.50");  });
  test("handles zero", () => {    expect(formatCurrency(0)).toBe("$0.00");  });});

Key Files

e2e/tests/ - E2E tests (Playwright)
e2e/tests/utils.ts - E2E test utilities
vitest.config.ts - Unit test configuration
vitest.setup.ts - Global test setup with MSW
app/utils/test-utils.ts - Unit test utilities

Source and attribution

Source:sergiodxa/agent-skillsinskills/frontend-testing-best-practicesat commit40e21b4

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Frontend Testing Best Practices

Testing Best Practices

Core Philosophy

When to Apply

Rules Summary

Testing Strategy (CRITICAL)

prefer-e2e-tests - @rules/prefer-e2e-tests.md

avoid-component-tests - @rules/avoid-component-tests.md

minimize-mocking - @rules/minimize-mocking.md

E2E Tests (HIGH)

e2e-test-structure - @rules/e2e-test-structure.md

e2e-selectors - @rules/e2e-selectors.md

Unit Tests (MEDIUM)

unit-test-structure - @rules/unit-test-structure.md

Key Files

Source and attribution

More from sergiodxa/agent-skills

Frontend React Best Practices

Frontend Tailwind Best Practices

Frontend Accessibility Best Practices

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices