Kiểm tra các thành phần React

Kiểm tra thành phần React đầu tiên của bạn bằng cách sử dụng Jest vàreact-testing-library

Cách dễ nhất để bắt đầu với việc kiểm tra các thành phần React là thực hiện kiểm tra ảnh chụp nhanh, một kỹ thuật kiểm tra cho phép bạn kiểm tra các thành phần một cách riêng biệt.

Nếu bạn đã quen thuộc với phần mềm kiểm thử, nó cũng giống như kiểm thử đơn vị bạn làm cho các lớp: bạn kiểm tra chức năng của từng thành phần.

Tôi giả sử bạn đã tạo một ứng dụng React vớicreate-react-app, đã đi kèm vớiJestđã cài đặt, gói thử nghiệm chúng tôi sẽ cần.

Hãy bắt đầu với một bài kiểm tra đơn giản. CodeSandbox là một môi trường tuyệt vời để thử điều này. Bắt đầu với hộp cát React và tạoApp.jsthành phần trong mộtcomponentsvà thêm mộtApp.test.jstập tin.

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> ) }

Thử nghiệm đầu tiên của chúng tôi là ngớ ngẩn:

test('First test', () => {
  expect(true).toBeTruthy()
})

Khi CodeSandbox phát hiện các tệp kiểm tra, nó sẽ tự động chạy chúng cho bạn và bạn có thể nhấp vào nút Kiểm tra ở cuối chế độ xem để hiển thị kết quả kiểm tra của mình:

Một tệp thử nghiệm có thể chứa nhiều thử nghiệm:

Bây giờ hãy làm điều gì đó hữu ích hơn một chút, để thực sự kiểm tra một thành phần React. Hiện tại chúng tôi chỉ có Ứng dụng, ứng dụng này không thực sự hữu ích, vì vậy trước tiên hãy thiết lập môi trường với một ứng dụng nhỏ với nhiều chức năng hơn: ứng dụng bộ đếm mà chúng tôi đã xây dựng trước đây. Nếu bạn bỏ qua nó, bạn có thể quay lại và đọc cách chúng tôi xây dựng nó, nhưng để tham khảo dễ dàng hơn, tôi thêm lại nó ở đây.

Nó chỉ là 2 thành phần: Ứng dụng và Nút. TạoApp.jstập tin:

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.jstập tin:

import React from 'react'

const Button = ({ increment, onClickFunction }) => { const handleClick = () => { onClickFunction(increment) } return <button onClick={handleClick}>+{increment}</button> }

export default Button

Chúng tôi sẽ sử dụngreact-testing-library, đây là một trợ giúp tuyệt vời vì nó cho phép chúng tôi kiểm tra đầu ra của mọi thành phần và áp dụng các sự kiện trên chúng. Bạn có thể đọc thêm về nó trênhttps://github.com/kentcdodds/react-testing-libraryhoặc bằng cách xemVideo này.

Hãy kiểm tra thành phần Nút đầu tiên.

Chúng tôi bắt đầu bằng cách nhậprenderfireEventtừreact-testing-library, hai người trợ giúp. Đầu tiên cho phép chúng tôi kết xuất JSX. Thứ hai cho phép chúng tôi phát ra các sự kiện trên một thành phần.

Tạo mộtButton.test.jsvà đặt nó trong cùng một thư mục vớiButton.js.

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import Button from './Button'

Các nút được sử dụng trong ứng dụng để chấp nhận một sự kiện nhấp chuột và sau đó chúng gọi một hàm được chuyển đếnonClickFunctionchỗ dựa. Chúng tôi thêm mộtcountvà chúng tôi tạo một hàm làm tăng nó:

let count

const incrementCount = increment => { count += increment }

Bây giờ chuyển sang các bài kiểm tra thực tế. Đầu tiên, chúng tôi khởi tạo số đếm thành 0 và chúng tôi kết xuất+1 Buttonthành phần đi qua một1đếnincrementvà của chúng tôiincrementCountchức năngonClickFunction.

Sau đó, chúng tôi nhận được nội dung của con đầu tiên của thành phần và chúng tôi kiểm tra kết quả đầu ra của nó+1.

Sau đó, chúng tôi tiếp tục nhấp vào nút và kiểm tra xem số lượng có từ 0 đến 1 không:

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)
})

Tương tự, chúng tôi kiểm tra nút +100, lần này kiểm tra đầu ra là+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)
})

Hãy kiểm tra thành phần Ứng dụng ngay bây giờ. Nó hiển thị 4 nút và kết quả trong trang. Chúng tôi có thể kiểm tra từng nút và xem liệu kết quả có tăng lên khi chúng tôi nhấp vào chúng, nhấp nhiều lần hay không:

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’) })

Kiểm tra mã hoạt động trên CodeSandbox này:https://codesandbox.io/s/pprl4y0wq

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: