пользовательские тесты для базовой версии App.jsx

App.test.jsx

import { render, screen, fireEvent } from '@testing-library/react' // импорт функций для рендеринга компонентов и взаимодействия с DOM
import App from './App' // импорт компоненты App, которую будем тестировать

describe('App component', () => { // группа тестов для компонента App
    it('renders Vite and React logos', () => { // тест: проверяет, что логотипы Vite и React отображаются
        render(<App />) // рендерим компонент App в виртуальный DOM
        expect(screen.getByAltText('Vite logo')).toBeInTheDocument() // ожидаем, что изображение с alt "Vite logo" присутствует в документе
        expect(screen.getByAltText('React logo')).toBeInTheDocument() // ожидаем, что изображение с alt "React logo" присутствует в документе
    })

    it('renders the main title', () => { // тест: проверяет, что отображается заголовок "Vite + React"
        render(<App />) // рендерим компонент App
        expect(screen.getByText(/Vite \+ React/i)).toBeInTheDocument() // ожидаем, что текст "Vite + React" есть на странице
    })

    it('renders initial counter value', () => { // тест: проверяет начальное значение счётчика
        render(<App />) // рендерим компонент App
        expect(screen.getByRole('button', { name: /count is 0/i })).toBeInTheDocument() // ожидаем, что кнопка со значением "count is 0" отображается
    })

    it('increments counter on click', () => { // тест: проверяет, что счётчик увеличивается при клике
        render(<App />) // рендерим компонент App
        const button = screen.getByRole('button', { name: /count is 0/i }) // получаем кнопку со значением "count is 0"
        fireEvent.click(button) // симулируем клик по кнопке
        expect(button).toHaveTextContent('count is 1') // ожидаем, что текст кнопки изменится на "count is 1"
        fireEvent.click(button) // кликаем ещё раз
        expect(button).toHaveTextContent('count is 2') // ожидаем, что теперь текст кнопки "count is 2"
    })
})