使用 React Testing Library 和 Jest 完成單元測試

`；

如果，你在

App。js

中做出更改，測試將失敗，因為快照將不再匹配。更新快照可以按

u

，或者將對應快照檔案刪除即可。

2。測試DOM元素

要測試DOM元素，首先必須檢視

TestElements。js

檔案。

TestElements。js

import React from ‘react’

const TestElements = （） => {

const ［counter， setCounter］ = React。useState（0）

return （

<>

{ counter }

setCounter（counter + 1）}> Up

setCounter（counter - 1）}>Down

）

}

export default TestElements

在這裡，您唯一需要保留的是

data-testid

。它將用於從測試檔案中選擇這些元素。現在，讓我們完成單元測試：

測試計數器是否為0，以及按鈕的禁用狀態：

TestElements。test。js

import React from ‘react’；

import “@testing-library/jest-dom/extend-expect”；

import { render， cleanup } from ‘@testing-library/react’；

import TestElements from ‘。。/components/TestElements’

afterEach（cleanup）；

it（‘should equal to 0’， （） => {

const { getByTestId } = render（）；

expect（getByTestId（‘counter’））。toHaveTextContent（0）

}）；

it（‘should be enabled’， （） => {

const { getByTestId } = render（）；

expect（getByTestId（‘button-up’））。not。toHaveAttribute（‘disabled’）

}）；

it（‘should be disabled’， （） => {

const { getByTestId } = render（）；

expect（getByTestId（‘button-down’））。toBeDisabled（）

}）；

正如您所看到的，語法與前面的測試非常相似。唯一的區別是，我們使用

getByTestId

選擇必要的元素（根據

data-testid

）並檢查是否通過了測試。換句話說，我們檢查

{ counter }

中的文字內容是否等於0。

這裡，像往常一樣，我們使用

getByTestId

選擇元素和檢查第一個測試如果按鈕禁用屬性。對於第二個，如果按鈕是否被禁用。

如果您儲存檔案或在終端紗線測試中再次執行，測試將透過。

3。測試事件

在編寫單元測試之前，讓我們首先看下

TestEvents。js

是什麼樣子的。

import React from ‘react’

const TestEvents = （） => {

const ［counter， setCounter］ = React。useState（0）

return （

<>

{ counter }

setCounter（counter + 1）}> Up

setCounter（counter - 1）}>Down

）

}

export default TestEvents

現在，讓我們編寫測試。

當我們點選按鈕時，測試計數器的增減是否正確：

import React from ‘react’；

import “@testing-library/jest-dom/extend-expect”；

import { render， cleanup， fireEvent } from ‘@testing-library/react’；

import TestEvents from ‘。。/components/TestEvents’

afterEach（cleanup）；

it（‘increments counter’， （） => {

const { getByTestId } = render（）；

fireEvent。click（getByTestId（‘button-up’））

expect（getByTestId（‘counter’））。toHaveTextContent（‘1’）

}）；

it（‘decrements counter’， （） => {

const { getByTestId } = render（）；

fireEvent。click（getByTestId（‘button-down’））

expect（getByTestId（‘counter’））。toHaveTextContent（‘-1’）

}）；

可以看到，除了預期的文字內容之外，這兩個測試非常相似。

第一個測試使用

fireEvent。click（）

觸發一個

click

事件，檢查單擊按鈕時計數器是否增加到1。

第二個檢查當點選按鈕時計數器是否減為-1。

fireEvent

有幾個可以用來測試事件的方法，因此您可以自由地深入文件瞭解更多資訊。

現在我們已經知道了如何測試事件，接下來我們將在下一節中學習如何處理非同步操作。

4。 測試非同步操作

非同步操作是需要時間才能完成的操作。它可以是HTTP請求、計時器等等。

現在，讓我們檢查

TestAsync。js

檔案。

import React from ‘react’

const TestAsync = （） => {

const ［counter， setCounter］ = React。useState（0）

const delayCount = （） => （

setTimeout（（） => {

setCounter（counter + 1）

}， 500）

）

return （

<>

{ counter }

Up

setCounter（counter - 1）}>Down

）

}

export default TestAsync

這裡，我們使用

setTimeout（）

將遞增事件延遲0。5秒。

測試計數器在0。5秒後判斷是否增加：

TestAsync。test。js

import React from ‘react’；

import “@testing-library/jest-dom/extend-expect”；

import { render， cleanup， fireEvent， waitForElement } from ‘@testing-library/react’；

import TestAsync from ‘。。/components/TestAsync’

afterEach（cleanup）；

it（‘increments counter after 0。5s’， async （） => {

const { getByTestId， getByText } = render（）；

fireEvent。click（getByTestId（‘button-up’））

const counter = await waitForElement（（） => getByText（‘1’））

expect（counter）。toHaveTextContent（‘1’）

}）；

要測試遞增事件，我們首先必須使用

async/await

來處理操作，因為如前所述，完成它需要時間。

接下來，我們使用一個新的助手方法

getByText（）

。這類似於

getByTestId（）

。

getByText（）

選擇文字內容，而不是id。

現在，在單擊按鈕之後，我們等待

waitForElement（（） => getByText（‘1’）

來增加計數器。一旦計數器增加到1，我們現在可以移動到條件並檢查計數器是否等於1。

也就是說，現在讓我們轉向更復雜的測試用例。

你準備好了嗎？

5。測試 React Redux

讓我們檢查一下

TestRedux。js

是什麼樣子的。

TestRedux。js

import React from ‘react’

import { connect } from ‘react-redux’

const TestRedux = （{counter， dispatch}） => {

const increment = （） => dispatch（{ type： ‘INCREMENT’ }）

const decrement = （） => dispatch（{ type： ‘DECREMENT’ }）

return （

<>

{ counter }

Up

Down

）

}

export default connect（state => （{ counter： state。count }））（TestRedux）

store/reducer。js

export const initialState = {

count： 0，

}

export function reducer（state = initialState， action） {

switch （action。type） {

case ‘INCREMENT’：

return {

count： state。count + 1，

}

case ‘DECREMENT’：

return {

count： state。count - 1，

}

default：

return state

}

}

正如您所看到的，沒有什麼特別的。

它只是一個由

React Redux

處理的基本計數器元件。

現在，讓我們來編寫單元測試。

測試初始狀態是否為0：

import React from ‘react’

import “@testing-library/jest-dom/extend-expect”；

import { createStore } from ‘redux’

import { Provider } from ‘react-redux’

import { render， cleanup， fireEvent } from ‘@testing-library/react’；

import { initialState， reducer } from ‘。。/store/reducer’

import TestRedux from ‘。。/components/TestRedux’

const renderWithRedux = （

component，

{ initialState， store = createStore（reducer， initialState） } = {}

） => {

return {

。。。render（{component}），

store，

}

}

afterEach（cleanup）；

it（‘checks initial state is equal to 0’， （） => {

const { getByTestId } = renderWithRedux（）

expect（getByTestId（‘counter’））。toHaveTextContent（‘0’）

}）

it（‘increments the counter through redux’， （） => {

const { getByTestId } = renderWithRedux（，

{initialState： {count： 5}

}）

fireEvent。click（getByTestId（‘button-up’））

expect（getByTestId（‘counter’））。toHaveTextContent（‘6’）

}）

it（‘decrements the counter through redux’， （） => {

const { getByTestId} = renderWithRedux（， {

initialState： { count： 100 }，

}）

fireEvent。click（getByTestId（‘button-down’））

expect（getByTestId（‘counter’））。toHaveTextContent（‘99’）

}）

我們需要匯入一些東西來測試

React Redux

。這裡，我們建立了自己的助手函式

renderWithRedux（）

來呈現元件，因為它將被多次使用。

renderWithRedux（）

作為引數接收要呈現的元件、初始狀態和儲存。如果沒有儲存，它將建立一個新的儲存，如果它沒有接收初始狀態或儲存，它將返回一個空物件。

接下來，我們使用

render（）

來呈現元件並將儲存傳遞給提供者。

也就是說，我們現在可以將元件

TestRedux

傳遞給

renderWithRedux（）

來測試計數器是否等於0。

測試計數器的增減是否正確：

為了測試遞增和遞減事件，我們將初始狀態作為第二個引數傳遞給

renderWithRedux（）

。現在，我們可以單擊按鈕並測試預期的結果是否符合條件。

現在，讓我們進入下一節並介紹 React Context。

6。 測試 React Context

讓我們檢查一下

TextContext。js

是什麼樣子的。

import React from “react”

export const CounterContext = React。createContext（）

const CounterProvider = （） => {

const ［counter， setCounter］ = React。useState（0）

const increment = （） => setCounter（counter + 1）

const decrement = （） => setCounter（counter - 1）

return （

）

}

export const Counter = （） => {

const { counter， increment， decrement } = React。useContext（CounterContext）

return （

<>

{ counter }

Up

Down

）

}

export default CounterProvider

現在，透過 React Context 管理計數器狀態。讓我們編寫單元測試來檢查它是否按預期執行。

測試初始狀態是否為0：

TextContext。test。js

import React from ‘react’

import “@testing-library/jest-dom/extend-expect”；

import { render， cleanup， fireEvent } from ‘@testing-library/react’

import CounterProvider， { CounterContext， Counter } from ‘。。/components/TestContext’

const renderWithContext = （

component） => {

return {

。。。render（

{component}

）

}

}

afterEach（cleanup）；

it（‘checks if initial state is equal to 0’， （） => {

const { getByTestId } = renderWithContext（）

expect（getByTestId（‘counter’））。toHaveTextContent（‘0’）

}）

it（‘increments the counter’， （） => {

const { getByTestId } = renderWithContext（）

fireEvent。click（getByTestId（‘button-up’））

expect（getByTestId（‘counter’））。toHaveTextContent（‘1’）

}）

it（‘decrements the counter’， （） => {

const { getByTestId} = renderWithContext（）

fireEvent。click（getByTestId（‘button-down’））

expect（getByTestId（‘counter’））。toHaveTextContent（‘-1’）

}）

與前面的React Redux部分一樣，這裡我們使用相同的方法，建立一個助手函式

renderWithContext（）

來呈現元件。但是這一次，它只接收作為引數的元件。為了建立新的上下文，我們將

CounterContext

傳遞給 Provider。

現在，我們可以測試計數器最初是否等於0。

那麼，計數器的增減是否正確呢？

正如您所看到的，這裡我們觸發一個

click

事件來測試計數器是否正確地增加到1並減少到-1。

也就是說，我們現在可以進入下一節並介紹React Router。

7。 測試 React Router

讓我們檢查一下

TestRouter。js

是什麼樣子的。

TestRouter。js

import React from ‘react’

import { Link， Route， Switch， useParams } from ‘react-router-dom’

const About = （） =>

About page

const Home = （） =>

Home page

const Contact = （） => {

const { name } = useParams（）

return

{name}

}

const TestRouter = （） => {

const name = ‘John Doe’

return （

<>

）

}

export default TestRouter

這裡，將測試路由對應的頁面資訊是否正確。

TestRouter。test。js

import React from ‘react’

import “@testing-library/jest-dom/extend-expect”；

import { Router } from ‘react-router-dom’

import { render， fireEvent } from ‘@testing-library/react’

import { createMemoryHistory } from ‘history’

import TestRouter from ‘。。/components/TestRouter’

const renderWithRouter = （component） => {

const history = createMemoryHistory（）

return {

。。。render （

{component}

）

}

}

it（‘should render the home page’， （） => {

const { container， getByTestId } = renderWithRouter（）

const navbar = getByTestId（‘navbar’）

const link = getByTestId（‘home-link’）

expect（container。innerHTML）。toMatch（‘Home page’）

expect（navbar）。toContainElement（link）

}）

it（‘should navigate to the about page’， （）=> {

const { container， getByTestId } = renderWithRouter（）

fireEvent。click（getByTestId（‘about-link’））

expect（container。innerHTML）。toMatch（‘About page’）

}）

it（‘should navigate to the contact page with the params’， （）=> {

const { container， getByTestId } = renderWithRouter（）

fireEvent。click（getByTestId（‘contact-link’））

expect（container。innerHTML）。toMatch（‘John Doe’）

}）

要測試React Router，我們首先必須有一個導航歷史記錄。因此，我們使用

createMemoryHistory（）

來建立導航歷史。

接下來，我們使用助手函式

renderWithRouter（）

來呈現元件，並將歷史記錄傳遞給路由器元件。這樣，我們現在就可以測試在開始時載入的頁面是否是主頁。以及導航欄是否載入了預期的連結。

測試當我們點選連結時，它是否用引數導航到其他頁面：

現在，要檢查導航是否工作，我們必須觸發導航連結上的單擊事件。

對於第一個測試，我們檢查內容是否等於About頁面中的文字，對於第二個測試，我們測試路由引數並檢查它是否正確透過。

現在我們可以進入最後一節，學習如何測試Axios請求。

8。 測試HTTP請求

讓我們檢查一下

TestRouter。js

是什麼樣子的。

import React from ‘react’

import axios from ‘axios’

const TestAxios = （{ url }） => {

const ［data， setData］ = React。useState（）

const fetchData = async （） => {

const response = await axios。get（url）

setData（response。data。greeting）

}

return （

<>

Load Data

{

data ？

Loading。。。

}

）

}

export default TestAxios

正如您在這裡看到的，我們有一個簡單的元件，它有一個用於發出請求的按鈕。如果資料不可用，它將顯示一個載入訊息。

現在，讓我們編寫測試。

來驗證資料是否正確獲取和顯示：

TextAxios。test。js

import React from ‘react’

import “@testing-library/jest-dom/extend-expect”；

import { render， waitForElement， fireEvent } from ‘@testing-library/react’

import axiosMock from ‘axios’

import TestAxios from ‘。。/components/TestAxios’

jest。mock（‘axios’）

it（‘should display a loading text’， （） => {

const { getByTestId } = render（）

expect（getByTestId（‘loading’））。toHaveTextContent（‘Loading。。。’）

}）

it（‘should load and display the data’， async （） => {

const url = ‘/greeting’

const { getByTestId } = render（）

axiosMock。get。mockResolvedValueOnce（{

data： { greeting： ‘hello there’ }，

}）

fireEvent。click（getByTestId（‘fetch-data’））

const greetingData = await waitForElement（（） => getByTestId（‘show-data’））

expect（axiosMock。get）。toHaveBeenCalledTimes（1）

expect（axiosMock。get）。toHaveBeenCalledWith（url）

expect（greetingData）。toHaveTextContent（‘hello there’）

}）

這個測試用例有點不同，因為我們必須處理HTTP請求。為此，我們必須在

jest。mock（‘axios’）

的幫助下模擬axios請求。

現在，我們可以使用axiosMock並對其應用

get（）

方法。最後，我們將使用Jest函式

mockResolvedValueOnce（）

來傳遞模擬資料作為引數。

現在，對於第二個測試，我們可以單擊按鈕來獲取資料並使用

async/await

來解析它。現在我們要測試三件事：

如果HTTP請求已經正確完成

如果使用url完成了HTTP請求

如果獲取的資料符合期望。

對於第一個測試，我們只檢查載入訊息在沒有資料要顯示時是否顯示。

也就是說，我們現在已經完成了八個簡單的步驟來測試你的React應用程式。

更多例子請參考React Testing Library官方文件。

結語

React Testing Library

是用於測試 React 應用的一大利器。它為我們提供了訪問

jest-dom

匹配器的機會，以及最佳實踐，使得我們可以使用它來更有效地測試我們的元件。希望這篇文章是有用的，它將幫助您在未來構建更加健壯的 React 應用程式。

作者：張博軒

現在註冊滴滴雲，有機會可得30元無門檻滴滴出行券

滴滴雲採購季限時特惠，秒殺1C1G1M僅9。9元/月

滴滴雲使者專屬特惠，包年雲伺服器低至68元/年