Types of Frontend 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

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

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".

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

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

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)

// 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");