... > React > Тестирование компонентов с...

Тестирование компонентов с Jest и React Testing Library

НАВИГАЦИЯ ПО СТРАНИЦЕ

Установка зависимостей Настройка Jest Написание базовых тестов Запуск тестов Результаты тестов

Для начала тестирования компонентов с использованием Jest и React Testing Library необходимо настроить и установить Jest. Вот шаги для установки и конфигурации, а также написания базовых тестов для компонентов:

Установка зависимостей:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

Настройка Jest:

Добавьте или обновите ваш файл package.json, чтобы указать Jest как ваш тестовый фреймворк:

"scripts": {
  "test": "jest"
},
"jest": {
  "preset": "@testing-library/react"
}

Написание базовых тестов:

Допустим, у вас есть простой компонент Button, который отображает кнопку с заданным текстом. Вот пример компонента и его теста:

// Button.js
import React from 'react';

const Button = ({ onClick, text }) => {
  return <button onClick={onClick}>{text}</button>;
};

export default Button;
// Button.test.js
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Button from './Button';

test('renders button with provided text', () => {
  const buttonText = 'Click me';
  const { getByText } = render(<Button onClick={() => {}} text={buttonText} />);
  expect(getByText(buttonText)).toBeInTheDocument();
});

test('calls onClick handler when button is clicked', () => {
  const onClickMock = jest.fn();
  const buttonText = 'Click me';
  const { getByText } = render(<Button onClick={onClickMock} text={buttonText} />);
  const button = getByText(buttonText);
  fireEvent.click(button);
  expect(onClickMock).toHaveBeenCalledTimes(1);
});

Запуск тестов:

Вы можете запустить тесты с помощью команды npm test. Jest автоматически найдет и выполнит все файлы с расширением .test.js или .spec.js.

Результаты тестов:

Jest и React Testing Library будут выполнять ваш код и проверять ожидаемые результаты. В случае успешного выполнения тестов вы увидите сообщение о пройденных тестах, а в противном случае - сообщения об ошибках и ожидаемых значениях.

Написание базовых тестов помогает обеспечить качество вашего кода и предотвратить возможные ошибки при разработке веб-приложений на React.

homedigitalschool.ru

Полезные ссылки:

zaka-zaka

Покупай игры выгодно

РЕКЛАМА, ООО «ГЕЙБСТОР» ИНН: 7842136365

zaochnik

Срочная помощь в написании всех видов работ

РЕКЛАМА, ООО «ЗАОЧНИК.КОМ.» ИНН: 7710949967

skyeng

Лучшие из курсов английского в Skyeng

РЕКЛАМА, ОАНО ДПО «СКАЕНГ» ИНН: 9709022748