Тестирование компонентов 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


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