Types of frontend testing

What is Testing?

Testing is process of checking code and interfaces for correctness, stability and compliance with requirements. It allows identifying bugs before they reach user and ensures quality of product.

Tests in frontend help:

Check component and function logic
Track UI regressions
Check interaction between components
Ensure application works as expected in different scenarios

Testing Types

Unit Testing (Unit Testing)

Unit tests check individual units of code in isolation — functions, hooks or components. These are fastest and cheapest tests to execute.

Used for:

Checking pure functions
Testing components without complex dependencies
Checking state and props

🛠 Tools: Jest, Vitest, Testing Library

tsx

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

Snapshot Testing (Snapshots)

Snapshots are UI component snapshots in serialized form. On first run "reference" is saved, then compared with result of subsequent renders.

Help:

Track unwanted layout changes
Maintain visual display stability of components

⚠️ Shouldn't be used for all components — snapshots can easily "get dirty".

tsx

import { render } from "@testing-library/react";
import Button from "./Button";

test("button matches snapshot", () => {
  const { asFragment } = render(<Button label="Click" />);
  expect(asFragment()).toMatchSnapshot();
});

Integration Testing (Integration)

Integration tests check interaction of several components or layers of application (e.g., UI + business logic).

Checks:

Form and API work
Correct data exchange between components
Work with context and global state

🛠 Tools: React Testing Library, MSW (for mocks)

tsx

// Example: entering text in field and submitting form
fireEvent.change(screen.getByLabelText("Name"), {
  target: { value: "Ivan" }
});
fireEvent.click(screen.getByText("Submit"));
expect(mockSubmit).toHaveBeenCalledWith("Ivan");

End-to-End Testing (E2E)

E2E (end to end) simulates real user behavior, going through entire UI and backend. This is highest level of testing.

Checks:

How entire interface works in browser
Navigation, clicks, transitions, redirects
Real interaction with server or mocks

Tools: Cypress, Playwright

// Cypress
cy.visit("/login");
cy.get("input[name=email]").type("user@example.com");
cy.get("input[name=password]").type("123456");
cy.get("button[type=submit]").click();
cy.contains("Welcome!");

How to Choose Test Type?

Task	Recommended Test
Checking function or hook logic	Unit
Checking component interaction	Integration
Checking appearance	Snapshot (wisely)
Checking user behavior	E2E

Content

What is Testing?Testing TypesHow to Choose Test Type?

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems