Протестируйте свой первый компонент React с помощью Jest иreact-testing-library
Самый простой способ начать тестирование компонентов React - это выполнить тестирование моментальных снимков, метод тестирования, который позволяет тестировать компоненты изолированно.
Если вы знакомы с программным обеспечением для тестирования, это похоже на модульное тестирование, которое вы проводите для классов: вы проверяете функциональность каждого компонента.
Я предполагаю, что вы создали приложение React сcreate-react-app
, который уже идет сШуткаустановлен, тестовый пакет, который нам понадобится.
Начнем с простого теста. CodeSandbox - отличная среда, чтобы попробовать это. Начните с песочницы React и создайтеApp.js
компонент вcomponents
папку и добавьтеApp.test.js
файл.
import React from 'react'
export default function App() {
return (
<div className=“App”>
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
)
}
Наш первый тест тупой:
test('First test', () => {
expect(true).toBeTruthy()
})
Когда CodeSandbox обнаруживает тестовые файлы, он автоматически запускает их за вас, и вы можете нажать кнопку «Тесты» в нижней части представления, чтобы отобразить результаты теста:
Тестовый файл может содержать несколько тестов:
Давайте сделаем что-нибудь более полезное, чтобы протестировать компонент React. Сейчас у нас есть только приложение, которое не делает ничего действительно полезного, поэтому давайте сначала настроим среду с помощью небольшого приложения с большей функциональностью: приложения счетчика, которое мы создали ранее. Если вы его пропустили, вы можете вернуться и прочитать, как мы его построили, но для удобства я добавляю его сюда снова.
Это всего лишь 2 компонента: приложение и кнопка. СоздатьApp.js
файл:
import React, { useState } from 'react'
import Button from './Button'
const App = () => {
const [count, setCount] = useState(0)
const incrementCount = increment => {
setCount(count + increment)
}
return (
<div>
<Button increment={1} onClickFunction={incrementCount} />
<Button increment={10} onClickFunction={incrementCount} />
<Button increment={100} onClickFunction={incrementCount} />
<Button increment={1000} onClickFunction={incrementCount} />
<span>{count}</span>
</div>
)
}
export default App
иButton.js
файл:
import React from 'react'
const Button = ({ increment, onClickFunction }) => {
const handleClick = () => {
onClickFunction(increment)
}
return <button onClick={handleClick}>+{increment}</button>
}
export default Button
Мы собираемся использоватьreact-testing-library
, что очень помогает, поскольку позволяет нам проверять выходные данные каждого компонента и применять к ним события. Вы можете прочитать об этом подробнее наhttps://github.com/kentcdodds/react-testing-libraryили наблюдаяэто видео.
Давайте сначала протестируем компонент Button.
Начнем с импортаrender
иfireEvent
изreact-testing-library
, два помощника. Первый позволяет нам рендерить JSX. Второй позволяет нам генерировать события в компоненте.
СоздатьButton.test.js
и поместите его в ту же папку, что иButton.js
.
import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import Button from './Button'
Кнопки используются в приложении для принятия события щелчка, а затем они вызывают функцию, переданную вonClickFunction
опора Мы добавляемcount
переменная, и мы создаем функцию, которая увеличивает ее:
let count
const incrementCount = increment => {
count += increment
}
Теперь перейдем к реальным испытаниям. Сначала мы инициализируем count равным 0, а затем визуализируем+1
Button
компонент, передающий1
кincrement
и нашincrementCount
функция дляonClickFunction
.
Затем мы получаем содержимое первого дочернего элемента компонента и проверяем его выходы.+1
.
Затем мы переходим к нажатию на кнопку и проверяем, что счетчик перешел от 0 до 1:
test('+1 Button works', () => {
count = 0
const { container } = render(
<Button increment={1} onClickFunction={incrementCount} />
)
const button = container.firstChild
expect(button.textContent).toBe('+1')
expect(count).toBe(0)
fireEvent.click(button)
expect(count).toBe(1)
})
Точно так же мы тестируем кнопку +100, на этот раз проверяем вывод+100
and the button click increments the count of 100.
test('+100 Button works', () => {
count = 0
const { container } = render(
<Button increment={100} onClickFunction={incrementCount} />
)
const button = container.firstChild
expect(button.textContent).toBe('+100')
expect(count).toBe(0)
fireEvent.click(button)
expect(count).toBe(100)
})
Давайте теперь протестируем компонент приложения. Он показывает 4 кнопки и результат на странице. Мы можем проверить каждую кнопку и увидеть, увеличивается ли результат, когда мы нажимаем на них, также нажимая несколько раз:
import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import App from './App'
test(‘App works’, () => {
const { container } = render(<App />)
console.log(container)
const buttons = container.querySelectorAll(‘button’)
expect(buttons[0].textContent).toBe(’+1’)
expect(buttons[1].textContent).toBe(’+10’)
expect(buttons[2].textContent).toBe(’+100’)
expect(buttons[3].textContent).toBe(’+1000’)
const result = container.querySelector(‘span’)
expect(result.textContent).toBe(‘0’)
fireEvent.click(buttons[0])
expect(result.textContent).toBe(‘1’)
fireEvent.click(buttons[1])
expect(result.textContent).toBe(‘11’)
fireEvent.click(buttons[2])
expect(result.textContent).toBe(‘111’)
fireEvent.click(buttons[3])
expect(result.textContent).toBe(‘1111’)
fireEvent.click(buttons[2])
expect(result.textContent).toBe(‘1211’)
fireEvent.click(buttons[1])
expect(result.textContent).toBe(‘1221’)
fireEvent.click(buttons[0])
expect(result.textContent).toBe(‘1222’)
})
Проверьте код, работающий в этом CodeSandbox:https://codesandbox.io/s/pprl4y0wq
Скачать мою бесплатнуюСправочник по React
Больше руководств по реакции:
- Пример простого приложения React: получение информации о пользователях GitHub через API
- Создайте простой счетчик с помощью React
- Настройка VS Code для разработки на React
- Как передать реквизиты дочернему компоненту через React Router
- Создайте приложение с Electron и React
- Учебник: создание электронной таблицы с помощью React
- Дорожная карта для изучения React
- Узнайте, как использовать Redux
- Начало работы с JSX
- Стилизованные компоненты
- Введение в Redux Saga
- Введение в React Router
- Введение в React
- Компоненты React
- Виртуальный DOM
- Реагировать на события
- Состояние реакции
- React Props
- Фрагмент реакции
- API контекста React
- React PropTypes
- Концепции React: декларативный
- Реагировать: как показать другой компонент при нажатии
- Как зацикливаться внутри React JSX
- Props vs State в React
- Что лучше: jQuery или React?
- Сколько JavaScript вам нужно знать, чтобы использовать React?
- Введение в Гэтсби
- Как сослаться на элемент DOM в React
- Однонаправленный поток данных в React
- Реагировать на компоненты более высокого порядка
- Реагировать на события жизненного цикла
- Концепция React: неизменность
- Концепция React: чистота
- Введение в React Hooks
- Введение в приложение create-react-app
- Концепция React: композиция
- React: презентационные и контейнерные компоненты
- Разделение кода в React
- Рендеринг на стороне сервера с помощью React
- Как установить React
- CSS в React
- Использование SASS в React
- Обработка форм в React
- React StrictMode
- Реагировать на порталы
- React Render Props
- Тестирование компонентов React
- Как передать параметр обработчикам событий в React
- Как обрабатывать ошибки в React
- Как вернуть несколько элементов в JSX
- Условный рендеринг в React
- React, как передать props дочерним компонентам
- Как получить значение элемента ввода в React
- Как использовать хук useState React
- Как использовать хук useCallback React
- Как использовать хук useEffect React
- Как использовать хук useMemo React
- Как использовать хук useRef React
- Как использовать хук useContext React
- Как использовать хук useReducer React
- Как подключить приложение React к бэкэнду в том же источнике
- Учебное пособие по маршрутизатору Reach Router
- Как использовать инструменты разработчика React
- Как научиться React
- Как отлаживать приложение React
- Как отрендерить HTML в React
- Как исправить ошибку `dangerousSetInnerHTML` не соответствовало в React
- Как я исправил проблему с состоянием формы входа в React и автозаполнением браузера
- Как настроить HTTPS в приложении React на локальном хосте
- Как исправить ошибку "не удается обновить компонент при рендеринге другого компонента" в React
- Могу ли я использовать перехватчики React внутри условного оператора?
- Использование useState с объектом: как обновить
- Как перемещать блоки кода с помощью React и Tailwind
- React, сфокусируйте элемент в React при добавлении в DOM
- Реагировать, редактировать текст по двойному щелчку