Erzählen Sie uns von Ihrer Erfahrung mit Tests in…

In meinen Projekten habe ich verschiedene Arten von Tests eingesetzt, um die Qualität des Frontends sicherzustellen:

Unit-Tests: Mit Jest und React Testing Library, um einzelne Komponenten, Funktionen und Module zu isolieren und zu überprüfen. Dies hilft, logische Fehler schnell in kleinen, unabhängigen Code-Teilen zu erkennen.

// Beispiel für einen Unit-Test einer Button-Komponente mit Jest und React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('rendert den Button mit dem richtigen Text', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Integrationstests: Zur Überprüfung der Interaktion zwischen mehreren Komponenten oder Modulen. Dies stellt sicher, dass die verschiedenen Teile des Systems korrekt zusammenarbeiten. Ich habe dafür ebenfalls React Testing Library verwendet.

// Beispiel für einen Integrationstest eines Formulars und eines Submit-Buttons
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('Beim Absenden des Formulars wird onSubmit mit den korrekten Daten aufgerufen', () => {
  const mockSubmit = jest.fn();
  render(<Form onSubmit={mockSubmit} />);

  const input = screen.getByLabelText(/Username:/i);
  const submitButton = screen.getByRole('button', { name: /Submit/i });

  fireEvent.change(input, { target: { value: 'testuser' } });
  fireEvent.click(submitButton);

  expect(mockSubmit).toHaveBeenCalledWith({ username: 'testuser' });
});

E2E-Tests: In einigen Projekten habe ich Cypress oder Playwright verwendet, um End-to-End-Szenarien in einem echten Browser zu testen. Das hilft, zu überprüfen, ob die Anwendung insgesamt wie erwartet funktioniert.

// Beispiel für einen E2E-Test mit Cypress
// cypress/integration/todo.spec.js
describe('Todo App', () => {
  it('soll ein neues Todo-Item hinzufügen', () => {
    cy.visit('/'); // Navigieren zur Anwendungsseite

    cy.get('.new-todo').type('Buy milk{enter}'); // Text eingeben und Enter drücken

    cy.get('.todo-list li')
      .should('have.length', 1) // Anzahl der Elemente prüfen
      .first()
      .should('have.text', 'Buy milk'); // Text des ersten Elements prüfen
  });
});

Snapshot-Tests: Mit Jest, um die Struktur des Components zu erfassen und unbeabsichtigte Änderungen im Markup zu erkennen (z.B. nach Refactoring).

// Beispiel für einen Snapshot-Test eines Card-Komponenten mit Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card rendert korrekt', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Vergleich mit gespeicherter Snapshot
});

Ich halte Tests für einen wichtigen Teil des Entwicklungsprozesses, da sie helfen, die Codequalität zu erhalten, Refactoring zu erleichtern und die Wahrscheinlichkeit von Fehlern in der Produktion zu verringern. Ich schreibe Tests parallel zur Entwicklung neuer Funktionen oder vor der Behebung von Bugs (TDD-Ansatz, wo anwendbar).

Erzählen Sie uns von Ihrer Erfahrung mit Tests in Projekten.