Meséljen a projektum tesztelési tapasztalatairól…

Projektjeimben többféle tesztelési típust alkalmaztam a frontend minőségének biztosítása érdekében:

Egységtesztelés: Jest és React Testing Library segítségével az egyes komponensek, funkciók és modulok izolálására és ellenőrzésére. Ez segít gyorsan felismerni a logikai hibákat kis, független kódrészekben.

// Egységteszt példa a Button komponenshez Jest és React Testing Library segítségével
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('helyesen jeleníti meg a gombot', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Integrációs tesztelés: Több komponens vagy modul közötti interakciók ellenőrzésére. Ez biztosítja, hogy a rendszer különböző részei helyesen működnek együtt. Szintén a React Testing Library-t használtam ehhez.

// Integrációs teszt példa egy űrlap és a submit gomb esetében
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('az űrlap elküldése a helyes adatokkal hívja az onSubmit-et', () => {
  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 tesztelés: Néhány projektben Cypress vagy Playwright segítségével teszteltem a felhasználói forgatókönyveket a kezdettől a végéig valóban a böngészőben. Ez segít ellenőrizni, hogy az alkalmazás összességében úgy működik, ahogy várható a végfelhasználó számára.

// E2E teszt példa Cypress-sel
// cypress/integration/todo.spec.js
describe('Todo alkalmazás', () => {
  it('új teendőt ad hozzá', () => {
    cy.visit('/'); // Az alkalmazás oldalára lépés

    cy.get('.new-todo').type('Buy milk{enter}'); // Szöveg beírása és Enter lenyomása

    cy.get('.todo-list li')
      .should('have.length', 1) // Elem számának ellenőrzése
      .first()
      .should('have.text', 'Buy milk'); // Az első elem szövegének ellenőrzése
  });
});

Snapshot tesztelés: Jest segítségével a komponens szerkezetének rögzítésére és az esetleges nem szándékos változások felismerésére (pl. refaktorálás után).

// Snapshot teszt példa a Card komponenshez Jest-tel
import renderer from 'react-test-renderer';
import Card from './Card';

test('A Card helyesen jelenik meg', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Összehasonlítás a korábban mentett snapshot-tal
});

Úgy vélem, a tesztelés fontos része a fejlesztési folyamatnak, mivel segít fenntartani a kód minőségét, megkönnyíti a refaktorálást és csökkenti a hibák előfordulásának valószínűségét a gyártásban. Gyakran írom a teszteket az új funkciók fejlesztése közben vagy hibák javítása előtt (TDD megközelítés, ahol alkalmazható).

Meséljen a projektum tesztelési tapasztalatairól.