Туро дар бораи таҷрибаи шумо дар санҷиш дар лоиҳаҳо…

Дар проектҳоам чанд навъ тестгузорӣ истифода кардам, то сифати фронтендро таъмин кунам:

Тестҳои воҳидӣ: Бо истифода аз Jest ва React Testing Library барои ҷудо ва санҷиши компонентҳо, функсияҳо ва модулҳо. Ин кӯмак мекунад, ки хатогиҳои логикӣ дар қисмҳои хурд ва мустақил зуд пайдо шаванд.

// Намунаи тести воҳидӣ барои компонент Button бо Jest ва React Testing Library
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('намуди дуруст бо матни дуруст', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Тестҳои интегратсионӣ: Барои санҷиши ҳамкории байни чанд компонент ё модул. Ин кӯмак мекунад, ки қисмҳои гуногуни системавӣ дуруст кор кунанд. Ман ҳам React Testing Library-ро истифода кардам.

// Намунаи тести интегратсионӣ барои форм ва тугмаи ирсол
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('ирсоли форм бо маълумоти дуруст', () => {
  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: Дар баъзе проектҳо ман Cypress ё Playwright-ро барои санҷиши сценарии корбар аз оғоз то анҷом дар браузери воқеӣ истифода кардам. Ин кӯмак мекунад, ки барнома дар маҷмӯъ дуруст кор кунад, ҳамчун корбар ниҳоӣ.

// Намунаи тести E2E бо Cypress
// cypress/integration/todo.spec.js
describe('Тасвирҳои Todo', () => {
  it('мавҷудияти навбатро илова мекунад', () => {
    cy.visit('/'); // Баъд аз саҳифаи барнома

    cy.get('.new-todo').type('Buy milk{enter}'); // Ворид кардани матн ва пахш кардани Enter

    cy.get('.todo-list li')
      .should('have.length', 1) // Санҷиши шумораи элементҳо
      .first()
      .should('have.text', 'Buy milk'); // Санҷиши матни аввалин элемент
  });
});

Тестҳои тасвирӣ (Snapshot): Бо Jest барои сабт ва муқоиса кардани сохтори компонент ва ошкор кардани тағиротҳои ниятнок дар маркёр (масалан, пас аз рефакторинг).

// Тести Snapshot барои компонент Card бо Jest
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card дуруст рендер мешавад', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Муқоиса бо snapshot-и захирашуда
});

Ман фикр мекунам, ки тестгузорӣ қисми муҳими раванд аст, зеро он кӯмак мекунад, ки сифати коди нигоҳ дошта шавад, рефакторингро осон мекунад ва хатогиҳоро дар истеҳсолот кам мекунад. Ман тестҳоро ҳамзамон бо навиштани функсияҳои нав ё пеш аз ислоҳи хатоҳо менависам (тарафаи TDD, ки дар ҷойҳо мувофиқ аст).

Туро дар бораи таҷрибаи шумо дар санҷиш дар лоиҳаҳо.