Pastāstiet mums par savu pieredzi testēšanā…

Projektos es izmantoju vairākus testēšanas veidus, lai nodrošinātu frontenda kvalitāti:

Vienības testēšana: Ar Jest un React Testing Library, lai izolētu un pārbaudītu atsevišķas komponentes, funkcijas un moduļus. Tas palīdz ātri identificēt loģikas kļūdas mazās, neatkarīgās koda daļās.

// Vienības testa piemērs Button komponentam ar Jest un React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('attēlo pogu ar pareizu tekstu', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Integrācijas testēšana: Lai pārbaudītu mijiedarbību starp vairākiem komponentiem vai moduļiem. Tas palīdz pārliecināties, ka dažādas sistēmas daļas darbojas pareizi kopā. Arī šim izmantoju React Testing Library.

// Integrācijas testa piemērs formas un sūtīšanas pogas testam
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('sūtot formu, izsauc onSubmit ar pareiziem datiem', () => {
  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-testēšana: Dažos projektos izmantoju Cypress vai Playwright, lai testētu lietotāja scenārijus no sākuma līdz beigām reālā pārlūkprogrammā. Tas palīdz pārbaudīt, vai lietojumprogramma kopumā darbojas tā, kā paredzēts galalietotājam.

// E2E testa piemērs Cypress
// cypress/integration/todo.spec.js
describe('Todo lietotne', () => {
  it('jāpieņem jauns uzdevums', () => {
    cy.visit('/'); // Apmeklēt lietojumprogrammas lapu

    cy.get('.new-todo').type('Buy milk{enter}'); // Ievadīt tekstu un nospiest Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Pārbaudīt elementu skaitu
      .first()
      .should('have.text', 'Buy milk'); // Pārbaudīt pirmā elementa tekstu
  });
});

Skrīnšotu (Snapshot) testēšana: Ar Jest, lai fiksētu komponentes struktūru un atklātu nejaušas izmaiņas marķējumā (piemēram, pēc refaktorēšanas).

// Snapshot testa piemērs Card komponentam ar Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card attēlo pareizi', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Salīdzināšana ar saglabāto snapshot
});

Es uzskatu, ka testēšana ir svarīga izstrādes procesa daļa, jo tā palīdz uzturēt koda kvalitāti, atvieglo refaktorēšanu un samazina kļūdu rašanos ražošanā. Praktizēju testu rakstīšanu paralēli jauna funkcionalitātes izstrādei vai pirms kļūdu labojumiem (TDD pieeja, ja tas ir piemērojams).

Pastāstiet mums par savu pieredzi testēšanā projektos.