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

Протестируйте свой первый компонент 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


Больше руководств по реакции:


Tech Wiki Online!