測試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組件。現在我們只有App,它並沒有做任何真正有用的事情,因此讓我們首先使用一個具有更多功能的小應用程序來設置環境:我們之前構建的計數器應用程序。如果您跳過它,則可以返回並閱讀我們如何構建它,但是為了便於參考,我再次在此處添加它。

它只有2個組件:App和Button。創建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組件。

我們從導入開始renderfireEventreact-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組件通過1increment和我們的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)
})

現在讓我們測試App組件。它在頁面中顯示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

免費下載我的反應手冊


更多反應教程: