How do Component Tests differ from Playwright end-to-end (E2E) tests?

Short answer

Component tests check an isolated UI unit in a simulated DOM environment (jsdom), while E2E tests run a real browser and test the full user journey across the server and real interface.

Explanation

RTL and Vitest are very fast, running thousands of tests in seconds to catch internal logic and edge cases. Playwright E2E tests verify the whole system, real browsers (Chromium, Firefox, WebKit), and real cookies, but run more slowly and cost more.

Code example

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

test('Full login flow', async ({ page }) => {
  await page.goto('http://localhost:3000/login');
  await page.fill('input[type="email"]', '[email protected]');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL(/.*dashboard/);
});

Common mistakes

• Testing every component detail and edge case through slow E2E tests instead of distributing coverage among Unit and Integration tests.

Follow-up questions

• What is the philosophy of React Testing Library (RTL), and how does it differ from the old Enzyme tests?

Sources

• Playwright docs — Installation
• Testing Library docs — Guiding Principles