Test Driven Development mit Vitest: Warum ihr eure Tests zuerst schreiben solltet

Tests schreiben ist wie Zähneputzen – jeder weiß, dass es wichtig ist, aber die wenigsten machen es richtig. Bei Never Code Alone setzen wir seit Jahren auf Test Driven Development (TDD) und haben dabei eine Menge gelernt. Mit Vitest haben wir endlich ein Testing-Framework gefunden, das uns die Arbeit nicht nur erleichtert, sondern sogar Spaß macht.

Was macht Vitest so besonders?

Vitest ist der spirituelle Nachfolger von Jest, aber für die moderne Vite-Welt optimiert. Die Integration in Vite-Projekte funktioniert nahtlos, und die Performance ist beeindruckend. Aber das ist noch nicht alles.

Blitzschnelle Tests durch intelligentes Caching

Einer der größten Vorteile von Vitest ist die Geschwindigkeit. Durch die enge Integration mit Vite nutzt Vitest dessen Transform-Pipeline und Module-Graph. Das bedeutet: Eure Tests laufen so schnell, dass ihr kaum Zeit habt, zum Kaffeeautomaten zu gehen.

// vitest.config.js
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    coverage: {
      reporter: ['text', 'json', 'html']
    }
  }
})

TDD in der Praxis: Ein Beispiel aus unserem Alltag

Lasst uns gemeinsam durch ein praktisches Beispiel gehen. Wir bauen eine Funktion zur Validierung von E-Mail-Adressen – ein Klassiker, den ihr garantiert in jedem Projekt braucht.

Schritt 1: Der erste Test

import { describe, it, expect } from 'vitest'
import { validateEmail } from './emailValidator'

describe('validateEmail', () => {
  it('should return true for valid email addresses', () => {
    expect(validateEmail('team@nevercodealone.de')).toBe(true)
  })
})

Der Test schlägt fehl – perfekt! Das ist genau, was wir wollen.

Schritt 2: Die minimale Implementierung

export function validateEmail(email) {
  const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/
  return emailRegex.test(email)
}

Schritt 3: Weitere Tests hinzufügen

it('should return false for invalid email addresses', () => {
  expect(validateEmail('not-an-email')).toBe(false)
  expect(validateEmail('@invalid.com')).toBe(false)
  expect(validateEmail('test@')).toBe(false)
})

it('should handle edge cases', () => {
  expect(validateEmail('')).toBe(false)
  expect(validateEmail(null)).toBe(false)
  expect(validateEmail(undefined)).toBe(false)
})

Vitest Features, die euren Workflow verbessern

Watch Mode für kontinuierliches Feedback

npm run test:watch

Vitest beobachtet eure Dateien und führt nur die betroffenen Tests erneut aus. Das spart Zeit und Nerven.

Snapshot Testing leicht gemacht

it('should render user profile correctly', () => {
  const profile = renderUserProfile({ name: 'Max', role: 'Developer' })
  expect(profile).toMatchSnapshot()
})

Code Coverage ohne Kopfschmerzen

Vitest nutzt c8 unter der Haube, was bedeutet, dass ihr ohne zusätzliche Konfiguration aussagekräftige Coverage-Reports bekommt:

npm run test:coverage

Best Practices aus unserer Erfahrung

1. Arrangiere, Handle, Behaupte

Strukturiert eure Tests nach dem AAA-Pattern:

it('should calculate correct total price', () => {
  // Arrange
  const items = [
    { price: 10, quantity: 2 },
    { price: 5, quantity: 3 }
  ]

  // Act
  const total = calculateTotal(items)

  // Assert
  expect(total).toBe(35)
})

2. Beschreibende Test-Namen

Eure Test-Namen sollten wie eine Spezifikation lesbar sein:

describe('ShoppingCart', () => {
  it('should add items to cart when add button is clicked', () => {
    // Test implementation
  })

  it('should update total price when quantity changes', () => {
    // Test implementation
  })
})

3. Mock mit Bedacht

Vitest macht Mocking einfach, aber übertreibt es nicht:

import { vi } from 'vitest'

const mockFetch = vi.fn()
global.fetch = mockFetch

mockFetch.mockResolvedValueOnce({
  ok: true,
  json: async () => ({ data: 'test' })
})

Integration in eure CI/CD Pipeline

Bei Never Code Alone läuft kein Code in Production, der nicht getestet wurde. Hier unsere GitHub Actions Configuration:

name: Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run test:coverage
      - uses: codecov/codecov-action@v3

Warum TDD mit Vitest euer Game Changer wird

Nach Jahren der Erfahrung können wir euch versichern: TDD ist keine zusätzliche Arbeit – es ist eine Investition in eure Zukunft. Mit Vitest habt ihr ein Tool, das euch dabei optimal unterstützt:

Schnellere Entwicklung: Bugs werden früher gefunden
Bessere Architektur: TDD zwingt euch zu sauberem, testbarem Code
Mehr Vertrauen: Refactoring wird zum Kinderspiel
Dokumentation inklusive: Tests zeigen, wie euer Code funktioniert

Unser Angebot für euch

Ihr wollt TDD in eurem Team einführen oder eure Testing-Strategie verbessern? Wir bei Never Code Alone haben schon dutzende Teams dabei unterstützt, ihre Code-Qualität auf das nächste Level zu heben.

Meldet euch bei uns:

Email: roland@nevercodealone.de
LinkedIn: Never Code Alone
Oder bucht direkt einen kostenlosen Beratungstermin auf unserer Website

Gemeinsam machen wir aus euren Tests eine Erfolgsgeschichte. Denn bei uns gilt: Never Test Alone!

PS: Übrigens, dieser Blog Post wurde auch mit TDD geschrieben. Erst haben wir definiert, was wir vermitteln wollen, dann haben wir es umgesetzt. Funktioniert nicht nur bei Code! 😉

Software-Qualität Team