Testing

Testing is the practice of verifying that your code works as expected. In frontend development, this ranges from testing individual functions to simulating full user interactions in a real browser.

Why Test?

• Catch bugs early: Find issues before users do.
• Refactor with confidence: Change code without fear of breaking existing features.
• Document behavior: Tests serve as living documentation of how your code should work.
• Team collaboration: Tests protect against regressions when multiple developers work on the same codebase.

Types of Tests

The Testing Pyramid

Type	What it tests	Speed	Example
Unit	A single function or component in isolation.	Fast	Does formatDate() return the correct string?
Integration	Multiple units working together.	Medium	Does clicking a button update the list component?
End-to-End (E2E)	The full application in a real browser.	Slow	Can a user sign up, log in, and create a post?

---

Unit & Integration Testing

Vitest

The modern standard for JavaScript/TypeScript testing. Built on top of Vite, it’s fast and compatible with the Jest API.

• Fast: Runs tests in parallel with native ES module support.
• Vite-Powered: Shares your Vite config — same transforms, aliases, and plugins.
• Jest-Compatible: If you know Jest, you know Vitest.

math.js

export function add(a, b) {
  return a + b;
}

// math.test.js
import { describe, it, expect } from 'vitest';
import { add } from './math.js';

describe('add', () => {
  it('adds two numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  it('handles negative numbers', () => {
    expect(add(-1, 1)).toBe(0);
  });
});

npx vitest

Jest

The long-standing standard for JavaScript testing, created by Meta. Still very widely used, especially in legacy and React projects.

• Mature: Huge ecosystem of plugins and integrations.
• Snapshot Testing: Serialize component output and compare against saved snapshots.
• Mocking: Built-in support for mocking functions, modules, and timers.

Testing Library

A family of libraries for testing UI components from the user’s perspective. Instead of testing implementation details, you test what users see and do.

• Framework-Agnostic: Available for React, Vue, Svelte, Angular, and more.
• User-Centric Queries: Select elements by role, label, or text — not by CSS class or ID.

// React + Testing Library
import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

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

---

End-to-End (E2E) Testing

E2E tests run your application in a real (or headless) browser and simulate actual user behavior.

Playwright

A modern E2E testing framework by Microsoft. Tests run across Chromium, Firefox, and WebKit.

• Cross-Browser: One test suite runs on all major browsers.
• Auto-Wait: Automatically waits for elements to be ready before interacting.
• Codegen: Record your actions in a browser and generate test code automatically.

example.spec.js

import { test, expect } from '@playwright/test';

test('homepage has correct title', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

test('user can navigate to about page', async ({ page }) => {
  await page.goto('https://example.com');
  await page.click('text=About');
  await expect(page).toHaveURL(/about/);
});

Cypress

A popular E2E testing tool with an interactive test runner that shows your tests executing in real-time.

• Time Travel: See snapshots of your app at each step of the test.
• Real-Time Reloads: Tests re-run automatically when you save.
• Developer-Friendly: Great debugging experience with detailed error messages.

Summary

Tool	Type	Best For
Vitest	Unit / Integration	New Vite-based projects, fast iteration
Jest	Unit / Integration	Established projects, React ecosystem
Testing Library	Component Testing	User-centric UI testing across frameworks
Playwright	E2E	Cross-browser, CI/CD pipelines
Cypress	E2E	Interactive development-time testing

References

• Vitest Documentation
• Jest Documentation
• Testing Library Docs
• Playwright Documentation
• Cypress Documentation