Ispričajte nam o vašem iskustvu sa testiranjem u…

U projektima sam koristio različite tipove testiranja za osiguranje kvaliteta frontenda:

Jedinično testiranje: Uz pomoć Jest i React Testing Library za izolaciju i proveru pojedinačnih komponenti, funkcija i modula. To pomaže brzo otkrivanje logičkih grešaka u malim, nezavisnim delovima koda.

// Primer jedinog testa za Button komponentu sa Jest i React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('prikazuje dugme sa tačnim tekstom', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Integraciono testiranje: Za proveru interakcije između više komponenti ili modula. To osigurava da različiti delovi sistema pravilno sarađuju. Takođe sam koristio React Testing Library.

// Primer integracionog testa forme i dugmeta za slanje
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('slanje forme poziva onSubmit sa tačnim podacima', () => {
  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: U nekim projektima sam koristio Cypress ili Playwright za testiranje korisničkih scenarija od početka do kraja u pravom pretraživaču. To pomaže da se proveri da aplikacija u celini funkcioniše kako se očekuje za krajnjeg korisnika.

// Primer E2E testa u Cypress
// cypress/integration/todo.spec.js
opis('Todo App', () => {
  it('treba da doda novi zadatak', () => {
    cy.visit('/'); // Prelazak na stranicu aplikacije

    cy.get('.new-todo').type('Buy milk{enter}'); // Unos teksta i pritisak Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Provera broja elemenata
      .first()
      .should('have.text', 'Buy milk'); // Provera teksta prvog elementa
  });
});

Snapshot testovi: Uz Jest za beleženje strukture komponente i otkrivanje nenameranih promena u rasporedu (npr. nakon refaktorisanja).

// Snapshot test za Card komponentu sa Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card se pravilno renderuje', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Poređenje sa sačuvanim snapshot-om
});

Mislim da je testiranje važan deo procesa razvoja, jer pomaže u održavanju kvaliteta koda, olakšava refaktorisanje i smanjuje verovatnoću pojave grešaka u produkciji. Testove pišem često paralelno sa razvojem novih funkcionalnosti ili pre ispravki grešaka (TDD pristup, gde je primenjivo).

Ispričajte nam o vašem iskustvu sa testiranjem u projektima.