Vertel ons over uw ervaring met testen in projecten…

In mijn projecten heb ik verschillende soorten tests gebruikt om de kwaliteit van de frontend te waarborgen:

Unit-tests: Met Jest en React Testing Library om afzonderlijke componenten, functies en modules te isoleren en te controleren. Dit helpt om snel logische fouten te detecteren in kleine, onafhankelijke delen van de code.

// Voorbeeld van een unit-test van een Button-component met Jest en React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('rendert de knop met de juiste tekst', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Integratietests: Om de interactie tussen meerdere componenten of modules te controleren. Dit helpt om te verzekeren dat verschillende delen van het systeem correct samenwerken. Ik heb hiervoor ook React Testing Library gebruikt.

// Voorbeeld van een integratietest van een formulier en een verzendknop
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('indien formulier wordt verzonden, wordt onSubmit aangeroepen met de juiste gegevens', () => {
  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-testen: In sommige projecten heb ik Cypress of Playwright gebruikt om gebruikersscenario's van begin tot eind in een echte browser te testen. Dit helpt te controleren of de applicatie in zijn geheel werkt zoals verwacht voor de eindgebruiker.

// Voorbeeld van een E2E-test met Cypress
// cypress/integration/todo.spec.js
describe('Todo App', () => {
  it('moet een nieuw todo-item toevoegen', () => {
    cy.visit('/'); // Ga naar de applicatiepagina

    cy.get('.new-todo').type('Buy milk{enter}'); // Typ tekst en druk op Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Controleer het aantal items
      .first()
      .should('have.text', 'Buy milk'); // Controleer de tekst van het eerste item
  });
});

Snapshot testing: Met Jest om de structuur van het component vast te leggen en onbedoelde wijzigingen in de markup te detecteren (bijvoorbeeld na refactoring).

// Voorbeeld van een snapshot-test van een Card-component met Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card wordt correct gerenderd', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Vergelijk met opgeslagen snapshot
});

Ik beschouw tests als een belangrijk onderdeel van het ontwikkelproces, omdat ze helpen de codekwaliteit te behouden, refactoring te vergemakkelijken en de kans op fouten in productie te verminderen. Ik schrijf tests parallel aan het ontwikkelen van nieuwe functionaliteiten of vóór het oplossen van bugs (TDD-aanpak, waar van toepassing).

Vertel ons over uw ervaring met testen in projecten.