Povedzte nám o vašich skúsenostiach s testovaním v…

V mojih projektih sem uporabljal več vrst testiranja za zagotavljanje kakovosti frontend-a:

Enotno testiranje: Z uporabo Jest in React Testing Library za izolacijo in preverjanje posameznih komponent, funkcij in modulov. To pomaga hitro odkriti logične napake v majhnih, neodvisnih delih kode.

// Primer enotnega testa za komponento Button z Jest in React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('prikazuje gumb s pravilnim besedilom', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Integracijsko testiranje: Za preverjanje interakcije med več komponentami ali moduli. To zagotavlja, da različni deli sistema pravilno sodelujejo. Tudi uporabljal sem React Testing Library.

// Primer integracijskega testa obrazca in gumba za pošiljanje
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('pošiljanje obrazca pokliče onSubmit z pravimi podatki', () => {
  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 testiranje: V nekaterih projektih sem uporabljal Cypress ali Playwright za testiranje uporabniških scenarijev od začetka do konca v resničnem brskalniku. To pomaga preveriti, da aplikacija kot celota deluje tako, kot se pričakuje za končnega uporabnika.

// Primer E2E testa v Cypress
// cypress/integration/todo.spec.js
opis('Todo App', () => {
  it('naj doda nov opravek', () => {
    cy.visit('/'); // Prehod na stran aplikacije

    cy.get('.new-todo').type('Buy milk{enter}'); // Vnos besedila in pritisk Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Preverjanje števila elementov
      .first()
      .should('have.text', 'Buy milk'); // Preverjanje besedila prvega elementa
  });
});

Snapshot testiranje: Z Jest za beleženje strukture komponente in odkrivanje nenamernih sprememb v razporeditvi (npr. po refaktoringu).

// Snapshot test za komponento Card z Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card se pravilno renderira', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Primerjava z shranjenim snapshot-om
});

Menim, da je testiranje pomemben del razvojnega procesa, saj pomaga vzdrževati kakovost kode, olajša refaktoring in zmanjša verjetnost napak v produkciji. Teste pogosto pišem vzporedno z razvojem novih funkcij ali pred odpravo napak (pristop TDD, kjer je to primerno).

Povedzte nám o vašich skúsenostiach s testovaním v projektoch.