Opowiedz o swoim doświadczeniu w testowaniu w…

W moich projektach stosowałem różne rodzaje testów, aby zapewnić jakość frontendu:

Testy jednostkowe: Z użyciem Jest i React Testing Library do izolacji i sprawdzania poszczególnych komponentów, funkcji i modułów. Pomaga to szybko wykrywać błędy logiczne w małych, niezależnych częściach kodu.

// Przykład testu jednostkowego komponentu Button z Jest i React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('renderuje przycisk z poprawnym tekstem', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Testy integracyjne: Do sprawdzania interakcji między kilkoma komponentami lub modułami. Pomaga to upewnić się, że różne części systemu działają poprawnie razem. Również korzystałem z React Testing Library.

// Przykład testu integracyjnego formularza i przycisku submit
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('wysłanie formularza wywołuje onSubmit z poprawnymi danymi', () => {
  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' });
});

Testy E2E: W niektórych projektach używałem Cypress lub Playwright do testowania scenariuszy użytkownika od początku do końca w rzeczywistą przeglądarce. Pomaga to sprawdzić, czy aplikacja działa poprawnie jako całość.

// Przykład testu E2E w Cypress
// cypress/integration/todo.spec.js
describe('Aplikacja Todo', () => {
  it('powinna dodać nowy element todo', () => {
    cy.visit('/'); // Odwiedzenie strony aplikacji

    cy.get('.new-todo').type('Buy milk{enter}'); // Wpisanie tekstu i naciśnięcie Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Sprawdzenie liczby elementów
      .first()
      .should('have.text', 'Buy milk'); // Sprawdzenie tekstu pierwszego elementu
  });
});

Testy snapshot: Z Jest, do uchwycenia struktury komponentu i wykrywania niezamierzonych zmian w markupie (np. po refaktoryzacji).

// Przykład testu snapshot komponentu Card z Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card renderuje poprawnie', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Porównanie z zapisanym snapshotem
});

Uważam, że testy są ważną częścią procesu rozwoju, ponieważ pomagają utrzymać jakość kodu, ułatwiają refaktoryzację i zmniejszają prawdopodobieństwo wystąpienia błędów w produkcji. Piszę testy równolegle z tworzeniem nowych funkcji lub przed naprawą błędów (podejście TDD, gdy jest to możliwe).

Opowiedz o swoim doświadczeniu w testowaniu w projektach.