Жоболордо тестирүү боюнча тажрыйбаңыз жөнүндө айтып…

Менин долбоорлорумда сапаттуу фронтендти камсыз кылуу үчүн бир нече тест түрлөрүн колдонуп келем:

Бірдик тесттер: 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('форманы жөнөтүү onSubmitти туура маалыматтар менен чакырат', () => {
  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 колдонуп, колдонуучу сценарийлерин баштан аягына чейин чын браузерде тестирлөө. Бул колдонмо жалпы туура иштешин текшерүүгө жардам берет.

// Cypress менен E2E тесттин мисалы
// 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 менен компоненттин түзүлүшүн белгилөө жана күтүүсүз өзгөрүүлөрдү аныктоо (мисалы, рефакторингден кийин).

// Card компоненти үчүн SnapShot тест
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 ыкмасы, колдонулса).

Жоболордо тестирүү боюнча тажрыйбаңыз жөнүндө айтып бериңиз.