0Pricing
Frontend Academy · Lekcja

Konfiguracja Jest i podstawowe testy

Proszę zainstalować Jest, pisać testy describe/it/expect, używać matcherów takich jak toBe i toEqual oraz uruchamiać testy w trybie watch podczas tworzenia aplikacji.

Konfiguracja Jest i podstawowe testy to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dlaczego testować kod frontendowy?

Testy wykrywają regresje podczas modyfikowania kodu. Dokumentują oczekiwane zachowanie. Dają pewność podczas refaktoryzacji. Bez testów każda zmiana jest ryzykiem, że coś innego przestało działać.

Instalowanie Jest

W projekcie Vite + React należy użyć Vitest (natywnego dla Vite narzędzia do uruchamiania testów zgodnego z Jest). W innych konfiguracjach należy zainstalować Jest wraz z babel-jest lub ts-jest dla TypeScript.

# Vitest (preferred for Vite projects):
npm install -D vitest

# Or Jest with TypeScript:
npm install -D jest @types/jest ts-jest

Nazewnictwo plików testów

Pliki testów należy umieszczać obok kodu źródłowego: Button.test.ts, utils.spec.ts. Można też użyć folderu __tests__/. Jest wyszukuje pliki pasujące do wzorca *.test.* lub *.spec.*.

describe, it, expect

Testy należy porządkować za pomocą bloków describe (grup) oraz funkcji it/test (pojedynczych testów). Do sprawdzania asercji służy expect.

import { add, formatCurrency } from './utils';

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

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

describe('Currency formatting', () => {
  it('formats USD', () => {
    expect(formatCurrency(1234.5, 'USD')).toBe('$1,234.50');
  });
});

Często używane matchery

Jest udostępnia wiele matcherów: toBe (ścisła równość), toEqual (głęboka równość), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow, toBeGreaterThan.

expect([1,2,3]).toHaveLength(3);
expect({ a: 1, b: 2 }).toEqual({ a: 1, b: 2 });
expect('hello world').toContain('world');
expect(() => { throw new Error('boom'); }).toThrow('boom');
expect(null).toBeNull();
expect(true).toBeTruthy();

Testowanie kodu asynchronicznego

W testach należy zwrócić promise albo użyć async/await. Jest zaczeka na rozstrzygnięcie promise'a, zanim uzna test za zakończony.

it('fetches user data', async () => {
  const user = await fetchUser(1);
  expect(user.name).toBe('Alice');
});

// Or with resolves/rejects matchers:
it('resolves with user', () => {
  return expect(fetchUser(1)).resolves.toMatchObject({ name: 'Alice' });
});

beforeEach i afterEach

Przed każdym testem i po każdym teście należy wykonywać przygotowanie oraz czyszczenie, aby zachować niezależność testów.

describe('User service', () => {
  beforeEach(() => {
    db.seed();
  });
  afterEach(() => {
    db.clear();
  });
  it('creates a user', async () => {
    const user = await userService.create({ name: 'Alice' });
    expect(user.id).toBeDefined();
  });
});

Uruchamianie testów

npm test uruchamia wszystkie testy. npm test -- --watch (Jest) lub vitest w trybie watch ponownie uruchamia testy po zmianie pliku. Interfejs Vitest (vitest --ui) udostępnia uruchamianie testów w przeglądarce.

Pokrycie testami

jest --coverage (lub vitest run --coverage) generuje raport pokrycia pokazujący, które wiersze kodu są testowane. Częstym celem zespołów jest pokrycie na poziomie co najmniej 70%. Pokrycie 100% nie oznacza braku błędów.

Pisanie kodu łatwego do testowania

Czyste funkcje (bez efektów ubocznych) można łatwo testować. Funkcje powinny być małe i skoncentrowane na jednym zadaniu. Zależności należy wstrzykiwać zamiast importować je bezpośrednio — ułatwia to podstawianie atrap testowych.

Izolacja testów

Każdy test powinien być całkowicie niezależny. Testy zależne od efektów ubocznych innych testów są kruche. Należy unikać współdzielonego, zmiennego stanu między testami. Wszystkie mocki należy resetować w afterEach.

Szybkie sprawdzenie

Który matcher Jest sprawdza głęboką równość dwóch obiektów?

Podsumowanie: podstawy Jest

describe grupuje testy. it/test definiuje pojedyncze testy. expect wraz z matcherami sprawdza rezultaty. toBe służy do prymitywów. toEqual służy do obiektów i tablic. Testy asynchroniczne należy pisać z async/await lub zwracać w nich promise. beforeEach/afterEach służą do izolacji. Raporty pokrycia pokazują, które wiersze kodu są testowane. Czyste funkcje najłatwiej testować.

Często zadawane pytania

Czy lekcja „Konfiguracja Jest i podstawowe testy” jest bezpłatna?

Tak — pełny tekst „Konfiguracja Jest i podstawowe testy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Konfiguracja Jest i podstawowe testy”?

Proszę zainstalować Jest, pisać testy describe/it/expect, używać matcherów takich jak toBe i toEqual oraz uruchamiać testy w trybie watch podczas tworzenia aplikacji. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Konfiguracja Jest i podstawowe testy”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Konfiguracja Jest i podstawowe testy
  2. @testing-library/react: render i userEvent
  3. @testing-library/vue: montowanie komponentów
  4. Mockowanie modułów i wywołań API
← Powrót do Frontend Academy