Papaskinkite apie savo patirtį testuojant…

Mano projektuose naudojau kelis testavimo tipus, siekiant užtikrinti frontend kokybę:

Vienetinis testavimas: Naudojant Jest ir React Testing Library, siekiant izoliuoti ir patikrinti atskirus komponentus, funkcijas ir modulius. Tai padeda greitai aptikti loginės klaidas mažose, nepriklausomose kodo dalyse.

// Pavyzdys vieneto testo Button komponentui su Jest ir React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('teisingai rodo mygtuką su teisingu tekstu', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Integruotas testavimas: Patikrinant kelių komponentų ar modulių sąveiką. Tai užtikrina, kad skirtingos sistemos dalys veikia teisingai kartu. Taip pat naudoju React Testing Library.

// Pavyzdys formos ir siuntimo mygtuko integruoto testo
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('formos siuntimas iškviečia onSubmit su teisingais duomenimis', () => {
  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 testavimas: Kai kuriuose projektuose naudoju Cypress arba Playwright, kad patikrinti naudotojo scenarijus nuo pradžios iki pabaigos realioje naršyklėje. Tai padeda įsitikinti, kad visa programa veikia taip, kaip tikėtasi, galutiniam vartotojui.

// Cypress pavyzdys E2E teste
// cypress/integration/todo.spec.js
aprašymas('Todo programa', () => {
  it('turėtų pridėti naują užduotį', () => {
    cy.visit('/'); // Perėjimas į programos puslapį

    cy.get('.new-todo').type('Buy milk{enter}'); // Teksto įvedimas ir Enter paspaudimas

    cy.get('.todo-list li')
      .should('have.length', 1) // Elementų skaičiaus patikrinimas
      .first()
      .should('have.text', 'Buy milk'); // Pirmojo elemento teksto patikrinimas
  });
});

Snapshot testavimas: Naudojant Jest, fiksuojama komponento struktūra ir aptinkamos netyčinės pakeitimai (pavyzdžiui, po refaktoringo).

// Snapshot testas Card komponentui su Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card teisingai atvaizduojamas', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Palyginimas su išsaugotu snapshot
});

Mano nuomone, testavimas yra svarbi proceso dalis, nes jis padeda išlaikyti kodo kokybę, palengvina refaktoringą ir sumažina klaidų tikimybę gamybos aplinkoje. Aš dažnai rašau testus kartu su naujų funkcijų kūrimu arba prieš klaidų taisymą (TDD požiūris, kur tai taikoma).

Papaskinkite apie savo patirtį testuojant projektuose.