Layihələrdə testlərlə bağlı təcrübənizdən danışın…

Layihələrimdə, ön tərəfin keyfiyyətini təmin etmək üçün müxtəlif test növlərindən istifadə etmişəm:

Vahid testlər: Jest və React Testing Library ilə komponentləri, funksiyaları və modulları izolyasiya etmək və yoxlamaq üçün. Bu, kiçik və müstəqil kod hissələrində məntiqi səhvləri tez tapmağa kömək edir.

// Jest və React Testing Library ilə Button komponentinin nümunə vahid testi
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('düyməni düzgün mətnlə göstərir', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

İnteqrasiya testləri: Bir neçə komponent və ya modul arasındakı qarşılıqlı əlaqəni yoxlamaq üçün. Bu, sistemin müxtəlif hissələrinin düzgün işlədiyindən əmin olmağa kömək edir. Mən bunun üçün React Testing Library-dən də istifadə etmişəm.

// Form və göndərmə düyməsinin inteqrasiya testi nümunəsi
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('form göndərildikdə, onSubmit düzgün məlumatlarla çağırılır', () => {
  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 testləri: Bəzi layihələrdə Cypress və ya Playwright istifadə edərək istifadəçi ssenarilərini başlanğıcdan sona qədər real brauzerdə test etmişəm. Bu, tətbiqin ümumi işləməsini yoxlamağa kömək edir.

// Cypress ilə E2E test nümunəsi
// cypress/integration/todo.spec.js
describe('Todo tətbiqi', () => {
  it('yeni bir todo elementi əlavə etməlidir', () => {
    cy.visit('/'); // Tətbiq səhifəsinə keçid

    cy.get('.new-todo').type('Buy milk{enter}'); // Mətn daxil et və Enter bas

    cy.get('.todo-list li')
      .should('have.length', 1) // Elementlərin sayını yoxla
      .first()
      .should('have.text', 'Buy milk'); // Birinci elementin mətnini yoxla
  });
});

Snapshot testi: Jest ilə komponentin strukturunu tutmaq və markupda qeyri-aimtimal dəyişiklikləri aşkar etmək (məsələn, refaktoringdən sonra).

// Card komponenti üçün snapshot testi nümunəsi
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card düzgün şəkildə render olunur', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Saxlanılan snapshot ilə müqayisə
});

Testlərin inkişaf prosesində vacib bir hissə olduğunu düşünürəm, çünki onlar kodun keyfiyyətini qorumağa, refaktoringi asanlaşdırmağa və istehsalda səhvlərin yaranma ehtimalını azaltmağa kömək edir. Mən yeni funksionallıqların inkişafı ilə və ya səhvlərin düzəldilməsi üçün testlər yazıram (TDD yanaşması, tətbiq olunduğu halda).

Layihələrdə testlərlə bağlı təcrübənizdən danışın.