Loyihalarda test qilish bo'yicha tajribangiz haqida…

Loyihalarimda men sifatini ta'minlash uchun turli xil test turlaridan foydalandim:

Birlik testlari: Jest va React Testing Library yordamida alohida komponentlar, funksiyalar va modullarni izolyatsiya qilish va tekshirish. Bu kichik, mustaqil kod qismlarida mantiqiy xatolarni tezda aniqlashga yordam beradi.

// Jest va React Testing Library bilan Button komponentining birlik testi misoli
import { render, screen } from '@testing-library/react';
import Button from './Button';

test('to‘g‘ri matn bilan tugmani chizadi', () => {
  render(<Button>Click Me</Button>);
  const buttonElement = screen.getByText(/Click Me/i);
  expect(buttonElement).toBeInTheDocument();
});

Integratsion testlar: Bir nechta komponentlar yoki modullar o‘rtasidagi o‘zaro ta'sirni tekshirish uchun. Bu tizimning turli qismlari to‘g‘ri birga ishlashini ta'minlashga yordam beradi. Buning uchun React Testing Library’dan ham foydalandim.

// Form va yuborish tugmasi uchun integratsion test misoli
import { render, screen, fireEvent } from '@testing-library/react';
import Form from './Form';

test('forma yuborilganda onSubmit to‘g‘ri ma’lumotlar bilan chaqiriladi', () => {
  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-testlar: Ba'zi loyihalarda Cypress yoki Playwright yordamida brauzerda foydalanuvchi ssenariylarini boshidan oxirigacha test qilganman. Bu, ilovaning umuman qanday ishlashini tekshirishga yordam beradi.

// Cypress bilan E2E test misoli
// cypress/integration/todo.spec.js
describe('Todo ilovasi', () => {
  it('yangi todo elementini qo‘shishi kerak', () => {
    cy.visit('/'); // Ilova sahifasiga o'tish

    cy.get('.new-todo').type('Buy milk{enter}'); // Matn yozish va Enter bosish

    cy.get('.todo-list li')
      .should('have.length', 1) // Elementlar sonini tekshirish
      .first()
      .should('have.text', 'Buy milk'); // Birinchi element matnini tekshirish
  });
});

Snapshot testlar: Jest yordamida komponentning tuzilishini yozib olish va markupdagi kutilmagan o‘zgarishlarni aniqlash (masalan, refaktoringdan so‘ng).

// Card komponenti uchun snapshot test misoli
import renderer from 'react-test-renderer';
import Card from './Card';

test('Card to‘g‘ri render qilinadi', () => {
  const tree = renderer
    .create(<Card title="Test Title">Test Content</Card>)
    .toJSON();
  expect(tree).toMatchSnapshot(); // Saqlangan snapshot bilan taqqoslash
});

Testlar ishlab chiqish jarayonining muhim qismi deb hisoblayman, chunki ular kod sifatini saqlashga, refaktoringni osonlashtirishga va ishlab chiqarishda xatoliklar ehtimolini kamaytirishga yordam beradi. Yangi funksiyalarni ishlab chiqishda yoki xatolarni tuzatishdan oldin test yozaman (TDD yondashuvi, imkon boricha).

Loyihalarda test qilish bo'yicha tajribangiz haqida gapiring.