Povězte nám o své zkušenosti s testováním v…

V mých projektech jsem použil několik typů testování k zajištění kvality frontendu:

Jednotkové testování: Pomocí Jest a React Testing Library pro izolaci a kontrolu jednotlivých komponent, funkcí a modulů. To pomáhá rychle odhalit logické chyby v malých, nezávislých částech kódu.

// Příklad jednotkového testu komponenty Button s Jest a React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('zobrazuje tlačítko s správným textem', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Integrační testování: Pro kontrolu interakce mezi více komponentami nebo moduly. To pomáhá ujistit se, že různé části systému správně spolupracují. Také jsem použil React Testing Library.

// Příklad integračního testu formuláře a tlačítka odeslat
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('odeslání formuláře volá onSubmit se správnými daty', () => {
  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 testování: V některých projektech jsem použil Cypress nebo Playwright k testování uživatelských scénářů od začátku do konce v reálném prohlížeči. To pomáhá ověřit, že aplikace jako celek funguje tak, jak se očekává pro koncového uživatele.

// Příklad E2E testu v Cypress
// cypress/integration/todo.spec.js
popis('Todo App', () => {
  it('přidá nový úkol', () => {
    cy.visit('/'); // Přechod na stránku aplikace

    cy.get('.new-todo').type('Buy milk{enter}'); // Zadání textu a stisk Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Kontrola počtu prvků
      .first()
      .should('have.text', 'Buy milk'); // Kontrola textu prvního prvku
  });
});

Snapshot testování: Pomocí Jest zaznamenávám strukturu komponenty a odhaluji neúmyslné změny v rozložení (například po refaktoringu).

// Příklad snapshot testu komponenty Card s Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card se správně renderuje', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Porovnání se uloženým snapshotem
});

Domnívám se, že testování je důležitou součástí vývojového procesu, protože pomáhá udržovat kvalitu kódu, usnadňuje refaktoring a snižuje pravděpodobnost výskytu chyb v produkci. Testy píši často paralelně s vývojem nových funkcí nebo před opravou chyb (přístup TDD, kde je to vhodné).

Povězte nám o své zkušenosti s testováním v projektech.