Расскажите о вашем опыте работы с тестированием в проектах.

В проектах я применял несколько типов тестирования для обеспечения качества фронтенда:

1. Unit-тестирование: С использованием Jest и React Testing Library для изоляции и проверки отдельных компонентов, функций и модулей. Это помогает быстро выявлять логические ошибки в небольших, независимых частях кода.

   // Пример Unit-теста компонента Button с Jest и React Testing Library
   import { render, screen } from '@testing-library/react';
   import Button from './Button';
   
   test('renders button with correct text', () => {
     render(<Button>Click Me</Button>);
     const buttonElement = screen.getByText(/Click Me/i);
     expect(buttonElement).toBeInTheDocument();
   });
   

2. Интеграционное тестирование: Для проверки взаимодействия между несколькими компонентами или модулями. Это помогает убедиться, что различные части системы работают корректно вместе. Также использовал React Testing Library для этого.

   // Пример интеграционного теста формы и кнопки submit
   import { render, screen, fireEvent } from '@testing-library/react';
   import Form from './Form';
   
   test('submitting form calls onSubmit with correct data', () => {
     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' });
   });
   

3. E2E-тестирование: В некоторых проектах применял Cypress или Playwright для тестирования пользовательских сценариев от начала до конца в реальном браузере. Это помогает проверить, что приложение в целом работает так, как ожидается для конечного пользователя.

   // Пример E2E теста в Cypress
   // cypress/integration/todo.spec.js
   describe('Todo App', () => {
     it('should add a new todo item', () => {
       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'); // Проверка текста первого элемента
     });
   });
   

4. Скриншотное (Snapshot) тестирование: С Jest для фиксации структуры компонента и выявления непреднамеренных изменений в разметке (например, после рефакторинга).

   // Пример Snapshot теста компонента Card с Jest
   import renderer from 'react-test-renderer';
   import Card from './Card';
   
   test('Card renders correctly', () => {
     const tree = renderer
       .create(<Card title="Test Title">Test Content</Card>)
       .toJSON();
     expect(tree).toMatchSnapshot(); // Сравнение с сохраненным snapshot'ом
   });
   

Я считаю тестирование важной частью процесса разработки, так как оно помогает поддерживать качество кода, облегчает рефакторинг и снижает вероятность появления ошибок в продакшене. Практикую написание тестов параллельно с написанием нового функционала или перед исправлением багов (TDD-подход, где это применимо).