Testowanie aplikacji React 2024

Co to jest Vitest i dlaczego zastępuje Jest w projektach Vite?

Vitest: test runner stworzony przez Evan You (twórca Vite, 2022). Zaprojektowany jako drop-in replacement dla Jest w projektach Vite/esbuild. Dlaczego Vitest zamiast Jest: Jest używa Babel do transformacji — wolny. Vitest używa esbuild — 10-100x szybszy cold start. Vite config sharing — nie potrzebujesz osobnej konfiguracji dla testów. Natywny ESM support (Jest ma problemy z ESM). TypeScript out-of-the-box bez konfiguracji. Vitest API: kompatybilny z Jest (describe, test, it, expect, vi. beforeEach, afterEach, beforeAll, afterAll). vi.fn() — mock functions (jak jest.fn()). vi.mock() — module mocking. vi.spyOn() — spy na metodach. vi.useFakeTimers() — fake timers. Vitest features: Concurrent tests domyślnie. Watch mode HMR (instant test updates). UI mode (vitest --ui) — przeglądarka z wynikami. Coverage (v8 lub istanbul): vitest run --coverage. In-source testing — testy w tym samym pliku co kod. Snapshot testing. Vitest config (vitest.config.ts): environment: 'jsdom' lub 'happy-dom' (szybszy) dla DOM testów. setupFiles, globals, alias. React Testing Library: @testing-library/react — renderowanie komponentów. @testing-library/user-event — symulacja interakcji użytkownika. Queries: getByRole, findByText, queryByLabelText. Vitest + React: screen.getByText, fireEvent, userEvent.click, waitFor.

Playwright — end-to-end testing, co to jest i jak działa?

Playwright: end-to-end testing framework (Microsoft, 2020). Chromium, Firefox i WebKit (Safari) — jeden API. Zaprojektowany do zastąpienia Selenium i Puppeteer. Zalety Playwright: Auto-wait: czeka na elementy automatycznie (bez sleep()). Multiple browsers w jednym teście. Network interception (mockowanie API). Mobile emulation. Screenshot i video recording. Playwright API: const {chromium} = require('playwright'). browser = await chromium.launch(). page = await browser.newPage(). await page.goto('https://example.com'). await page.click('text=Login'). await page.fill('#email', 'user@test.pl'). await expect(page).toHaveURL('/dashboard'). Playwright Test (wbudowany test runner): test('should login', async ({page}) => {...}). Fixtures: {page, browser, context, request}. expect(page).toHaveTitle(). expect(page.locator('h1')).toBeVisible(). Locators: page.getByRole('button', {name: 'Submit'}). page.getByText('Witaj'). page.getByLabel('Email'). page.getByPlaceholder('Wpisz email'). page.getByTestId('submit-btn'). Test Isolation: każdy test dostaje nową przeglądarke (context). Czysty state. Playwright Config: playwright.config.ts. projects: chromium, firefox, webkit. baseURL. retries: 2. workers: 4.

Playwright vs Cypress — kiedy co wybrać do E2E testów?

Cypress: najpopularniejszy E2E framework (2014). JavaScript/TypeScript. Chrome-family browser (nie Firefox, nie Safari natywnie w open source). Zalety Cypress: Time-travel debugging (snapshots per step). Automatic waiting. Network stubbing (cy.intercept). Excellent DX, świetna dokumentacja. Cypress Dashboard (paid). Wady Cypress: Brak multi-tab support. Brak Firefox/WebKit w open source. Iframe support ograniczony. Nie działa z WebKit (Safari) bez Cypress Cloud. Playwright: Multi-browser (Chrome, Firefox, WebKit). Multi-tab/Multi-window. Testy równoległe out-of-the-box. Szybszy dla dużych suites (parallel). API request testing (APIRequestContext). Network mocking. Accessibility testing (axe). Playwright vs Cypress: Playwright — multi-browser, parallel, MS support, open source (Apache 2). Cypress — lepszy DX dla małych projektów, time-travel, Dashboard. Playwright dla: duże aplikacje z multi-browser wymaganiem. Safari testing krytyczne. Parallel execution ważne. Cypress dla: szybki start, mały zespół, Chrome-only ok. Playwright Codegen: npx playwright codegen https://example.com. Nagrywanie akcji -> generowanie kodu. Playwright Inspector: debugging tool. Playwright Trace Viewer: timeline z screenshots.

Testing pyramid — unit, integration i E2E testy, jak zbalansować?

Testing Pyramid (Mike Cohn): Unit tests (dół) — szybkie, wiele, tanie. Integration tests (środek) — wolniejsze, mniej. E2E tests (góra) — wolne, nieliczne, drogie. Unit tests: pojedyncze funkcje/komponenty. Vitest + React Testing Library. Szybkie (milisekundy). Brak zewnętrznych zależności. Mockowanie dependencji. Integration tests: kilka modułów razem. API routes z bazą danych. MSW (Mock Service Worker) dla HTTP. Supertest dla Express/Fastify. E2E tests: pełna aplikacja w przeglądarce. Playwright lub Cypress. Prawdziwe serwery lub staging. Wolne (sekundy/minuty). Modern Testing Trophy (Kent C. Dodds): Static analysis (ESLint, TypeScript) — najtańsze. Unit tests. Integration tests (więcej niż unit). E2E tests (mniej niż integration). Rekomendacja: 70% integration, 20% unit, 10% E2E. MSW (Mock Service Worker): mockowanie HTTP na poziomie Service Worker. Działa w przeglądarce i Node.js. Realistyczne mocks — nie mockujesz modułu ale HTTP layer. setupServer dla Node.js. setupWorker dla przeglądarki. Vitest UI: localhost:51204 (domyślny). Graficzny view testów. Re-run per test. Coverage visualization. Test ID attributes: data-testid='...' — dobra praktyka dla E2E. getByTestId — Playwright i Testing Library.

Storybook — co to jest i jak wspiera testowanie komponentów?

Storybook: narzędzie do izolowanego developmentu komponentów UI. Component Driven Development (CDD). Każdy komponent w izolacji — bez kontekstu aplikacji. Stories: warianty komponentu (różne props, states). Storybook 7/8: CSF 3 (Component Story Format). const meta = {component: Button, args: {label: 'Kliknij'}}. export const Primary = {args: {variant: 'primary'}}. export const Disabled = {args: {disabled: true}}. Storybook addons: @storybook/addon-interactions — interaktywne testy w stories. @storybook/addon-a11y — accessibility testing. @storybook/addon-docs — dokumentacja z stories. @storybook/test — vitest/jest w stories. Chromatic: visual regression testing (od twórców Storybook). Screenshot porównanie per komponent. Review UI changes w PR. Automatyczne detekcja zmian wizualnych. Alternatywa: Percy, Applitools Eyes. Storybook Play functions: play: async ({canvasElement}) => {await userEvent.click(canvas.getByRole('button')). await expect(canvas.getByText('Kliknięty')).toBeInTheDocument()}. Portable Stories: import story do Vitest testu. Spójność Storybook i unit tests. Storybook + Next.js: @storybook/nextjs. Automatic mock dla next/image, next/link, next/router. Nowe projekty: Vite + Vitest + Playwright + Storybook to solidny testing stack 2024.

Wyślij zapytanie