0Pricing
Frontend Academy · Lektion

Jest einrichten und grundlegende Tests

Installieren Sie Jest, schreiben Sie describe/it/expect-Tests, verwenden Sie Matcher wie toBe und toEqual und führen Sie Tests während der Entwicklung im Watch-Modus aus.

Jest einrichten und grundlegende Tests ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Frontend-Code testen?

Tests erkennen Regressionen, wenn Sie Code ändern. Sie dokumentieren das erwartete Verhalten. Sie geben Ihnen Sicherheit beim Refactoring. Ohne Tests ist jede Änderung ein Glücksspiel, bei dem unklar ist, ob etwas anderes kaputtgegangen ist.

Jest installieren

Verwenden Sie für ein Vite- + React-Projekt Vitest (einen Vite-nativen, Jest-kompatiblen Test-Runner). Für andere Setups installieren Sie Jest mit babel-jest oder ts-jest für TypeScript.

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

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

Benennung von Testdateien

Platzieren Sie Testdateien neben dem Quellcode: Button.test.ts, utils.spec.ts. Alternativ können Sie einen __tests__/-Ordner verwenden. Jest findet Dateien, die auf *.test.* oder *.spec.* passen.

describe, it, expect

Strukturieren Sie Tests mit describe-Blöcken (Gruppen) und it/test-Funktionen (einzelne Tests). Führen Sie mit expect Assertions durch.

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');
  });
});

Häufige Matcher

Jest stellt viele Matcher bereit: toBe (strikte Gleichheit), toEqual (tiefe Gleichheit), toContain, toHaveLength, toBeNull, toBeTruthy, toBeFalsy, toThrow und 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();

Asynchronen Code testen

Geben Sie in Tests das Promise zurück oder verwenden Sie async/await. Jest wartet, bis das Promise aufgelöst wurde, bevor der Test als abgeschlossen gilt.

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 und afterEach

Führen Sie vor bzw. nach jedem Test Setup- und Aufräumarbeiten aus, damit die Tests voneinander isoliert bleiben.

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();
  });
});

Tests ausführen

npm test führt alle Tests aus. npm test -- --watch (Jest) oder vitest im Watch-Modus führt Tests bei jeder Dateiänderung erneut aus. Die Vitest-Benutzeroberfläche (vitest --ui) stellt einen browserbasierten Test-Runner bereit.

Testabdeckung

jest --coverage (oder vitest run --coverage) erstellt einen Coverage-Bericht, der zeigt, welche Zeilen getestet werden. Eine Abdeckung von 70 % oder mehr ist ein häufiges Teamziel. 100 % Abdeckung bedeutet nicht, dass der Code fehlerfrei ist.

Testbaren Code schreiben

Reine Funktionen (ohne Seiteneffekte) lassen sich besonders einfach testen. Halten Sie Funktionen klein und fokussiert. Injizieren Sie Abhängigkeiten, statt sie direkt zu importieren – dadurch lassen sich Test-Doubles einfach einsetzen.

Testisolation

Jeder Test sollte vollständig unabhängig sein. Tests, die von den Seiteneffekten anderer Tests abhängen, sind fragil. Vermeiden Sie gemeinsam genutzten veränderlichen Zustand zwischen Tests. Setzen Sie alle Mocks in afterEach zurück.

Schnelltest

Welcher Jest-Matcher prüft die tiefe Gleichheit zweier Objekte?

Zusammenfassung: Jest-Grundlagen

describe gruppiert Tests. it/test definiert einzelne Tests. expect und Matcher prüfen Ergebnisse. toBe eignet sich für primitive Werte. toEqual eignet sich für Objekte/Arrays. Asynchrone Tests verwenden async/await oder geben das Promise zurück. beforeEach/afterEach sorgen für Isolation. Coverage-Berichte zeigen, welche Zeilen getestet werden. Reine Funktionen lassen sich am einfachsten testen.

Häufig gestellte Fragen

Ist die Lektion „Jest einrichten und grundlegende Tests“ kostenlos?

Ja — der vollständige Text von „Jest einrichten und grundlegende Tests“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Jest einrichten und grundlegende Tests“?

Installieren Sie Jest, schreiben Sie describe/it/expect-Tests, verwenden Sie Matcher wie toBe und toEqual und führen Sie Tests während der Entwicklung im Watch-Modus aus. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Jest einrichten und grundlegende Tests“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Jest einrichten und grundlegende Tests
  2. @testing-library/react: render, userEvent
  3. @testing-library/vue: Komponenten mounten
  4. Module und API-Aufrufe mocken
← Zurück zu Frontend Academy