## **利用Jest測試React組件**

> Jest 是一個(gè)由 facebook 維護(hù)的測試框架，在本文中，我們將利用 Jest 來測試 React 組件。我們將首先了解如何在純 JavaScript 函數(shù)上使用 Jest，然后再了解它提供的一些開箱即用的特性，這些特性旨在使測試 React 應(yīng)用程序變得更容易。

注意，Jest 并不是專門針對(duì) React 的測試框架，你可以使用它來測試任何 JavaScript 應(yīng)用程序。然而，它提供的一些特性對(duì)于測試用戶界面非常方便，這就是它非常適合 React 的原因。

## **示例程序**

在可以進(jìn)行測試前，我們需要一個(gè)應(yīng)用程序，在此以一個(gè)待辦事項(xiàng)列表為例，大家可以從 Github 中克隆該應(yīng)用：testing-react-with-jest。

示例項(xiàng)目利用 webpack 進(jìn)行構(gòu)建，

應(yīng)用程序的入口點(diǎn)是 `src/index.js`，它將 `<App>` 組件呈現(xiàn)到 HTML 中：

```js
import React from 'react'
import { render } from 'react-dom'
import App from './App.jsx'

render(
  <App />,
  document.getElementById('root')
)
```

應(yīng)用程序中組件樹層級(jí)結(jié)構(gòu)如下：

應(yīng)用中使用到的初始狀態(tài)數(shù)據(jù)及業(yè)務(wù)邏輯在 `src/state/index.js` 中：

```js
export const initialTodos = [ ... ]

export const addTodoItem = (todos, todo) => { ... }

export const toggleTodoItem = (todos, id) => { ... }

export const removeTodoItem = (todos, id) => { ... }
```

UI 界面效果：

## **Jest使用**

Jest 于 2014 年首次發(fā)布，雖然它最初引起了很多人的興趣，但該項(xiàng)目一度處于休眠狀態(tài)。然而，F(xiàn)acebook 投入了大量精力來改進(jìn) Jest，隨后發(fā)布了一些更新的版本，與最初的開源版本相比，Jest 的唯一相似之處是名稱和徽標(biāo)，其他一切都已更改和重寫。

## **安裝與配置Jest**

首先，我們需要安裝 Jest，由于我們也在使用 Babel，所以一并安裝相關(guān)的模塊，使 Jest 和 Babel 開箱即用：

```js
$ npm install jest babel-jest --save-dev
# 或
$ yarn add jest babel-jest --dev
```

在項(xiàng)目根目錄下創(chuàng)建 `__tests__` 目錄，Jest 希望在一個(gè)`__tests__` 目錄中找到我們的測試，這已經(jīng)成為 JavaScript 社區(qū)的流行約定，當(dāng)然，如果你對(duì)創(chuàng)建 `__tests__` 目錄統(tǒng)一管理不感冒，Jest 也支持查找任意的 `*.test.js` 或 `*.spec.js` 文件。

下面我們來測試我們的狀態(tài)函數(shù)。

繼續(xù)創(chuàng)建 `__tests__/state/index.test.js`，在正式測試之前，我們先看是否能夠正常進(jìn)行測試：

```js
describe('數(shù)字加減算術(shù)運(yùn)算', () => {
  test('3加2減5等于0', () => {
    expect(3 + 2 - 5).toBe(0)
  })
})
```

在 `package.json` 文件中添加 `npm scripts` 任務(wù)：

```js
{
  "scripts": {
    "test": "jest"
  }
}
```

然后在命令行中執(zhí)行測試任務(wù)：

```js
$ npm test
```

運(yùn)行結(jié)果：

在 Jest 中，我們可以根據(jù)需要使用 `describe` 和 `test` 嵌套測試，`describe` 創(chuàng)建一個(gè)將幾個(gè)相關(guān)測試組合在一起的塊，`test` 是運(yùn)行測試的方法。在此測試中，使用了 `expect` 和 `toBe` 來檢測兩個(gè)值是否完全相同。相關(guān) API 使用我們可以在 Jest 官方 API 文檔 中進(jìn)行查閱，本文中我們也可以來了解一些 Jest 的斷言。

## **測試業(yè)務(wù)邏輯**

我們已經(jīng)通過一個(gè)示例看到了 Jest 在測試中的工作，下面我們來測試狀態(tài)邏輯中的一個(gè)函數(shù) `removeTodoItem`：

```js
export const removeTodoItem = (todos, id) => todos.filter(todo => todo.id !== id)
```

`removeTodoItem` 接收要?jiǎng)h除待辦事項(xiàng)的當(dāng)前狀態(tài)與待刪除待辦事項(xiàng)的 id。

利用 `describe` 與 `test` 編寫該測試：

```js
describe('待辦事項(xiàng)操作測試', () => {
  test('刪除待辦事項(xiàng)', () => {
   
  })
})
```

可能大家也會(huì)看到其它文檔中使用 `it` 來代替 `test`，其實(shí) `it` 是作為 `test` 的別名使用的，二者是相同的作用。

下面開始編寫斷言，首先，可以創(chuàng)建一個(gè)初始狀態(tài) `todos` 數(shù)組，然后將它傳遞給 `removeTodoItem`，再傳遞我們想要?jiǎng)h除的新的待辦事項(xiàng) id，`removeTodoItem` 會(huì)返回完成后的狀態(tài)，可以如下定義：

```js
describe('待辦事項(xiàng)操作測試', () => {
  test('刪除待辦事項(xiàng)', () => {
    const todos = [
      {id: 1, title: '復(fù)習(xí) React 基礎(chǔ)知識(shí)', completed: true},
      {id: 2, title: '復(fù)習(xí) React Hooks 使用', completed: false}
    ]
    const finishedTodos = removeTodoItem(todos, 1)

    expect(finishedTodos).toEqual([{id: 2, title: '復(fù)習(xí) React Hooks 使用', completed: false}])
  })
})
```

在這里我們使用 `toEqual` 來做出斷言，它對(duì)引用類型的對(duì)象將進(jìn)行“深”比較是否相等。`toBe` 一般用于原始類型的值的比較，例如字符串、數(shù)字等類型，`toEqual` 通常在數(shù)組和對(duì)象上使用。

在命令行中執(zhí)行 `npm test`：

可以看到測試通過。

## **測試React組件**

不建議在 React 組件上編寫太多的測試，任何你想測試的內(nèi)容，比如業(yè)務(wù)邏輯，還是建議從組件中獨(dú)立出來放在單獨(dú)的函數(shù)中，就像上邊測試狀態(tài)函數(shù)一樣。但有時(shí)測試一些 React 交互是很有必要的，如要確保用戶在單擊某個(gè)按鈕時(shí)使用正確的參數(shù)去調(diào)用特定函數(shù)。

*如果利用 Create React App 來創(chuàng)建項(xiàng)目，從 3.3 以后的版本中已自帶官方推薦的 testing-library，本文暫不討論 testing-library。*

## **安裝與配置Enzyme**

為了編寫我們的測試，先安裝 Enzyme，這是一個(gè)由 Airbnb 編寫的包裝庫，它使得測試 React 組件變得更容易。同時(shí)，我們還要為我們使用的 React 不同版本安裝適配器，本例中使用 React v17.x，目前還沒有官方適配器可用，但也有社區(qū)版本：

```js
$ npm install --save-dev enzyme @wojtekmaj/enzyme-adapter-react-17
# 或
$ yarn add --dev enzyme @wojtekmaj/enzyme-adapter-react-17
```

對(duì)于 React v16.x，可以使用 `enzyme-adapter-react-16`。

接著對(duì) Enzyme 進(jìn)行少量相關(guān)配置，在項(xiàng)目根目錄下創(chuàng)建 `setup-enzyme.js` 文件：

```js
import { configure } from 'enzyme'
import Adapter from '@wojtekmaj/enzyme-adapter-react-17'

configure({ adapter: new Adapter() })
```

然后在項(xiàng)目根目錄下創(chuàng)建 `jest.config.js` 文件：

```js
module.exports = {
  setupFilesAfterEnv: [
    './setup-enzyme.js'
  ],
  testEnvironment: 'jsdom'
}
```

這告訴 Jest 在執(zhí)行任何測試之前，為我們運(yùn)行 `setup-tests.js` 文件，由于測試的是 Web 應(yīng)用程序，所以使用瀏覽器類似的環(huán)境 jsdom 來代替。

## **編寫組件渲染測試**

接下來我們就可以編寫測試了，我們來測試 `TodoItem` 組件是否能夠在段落中渲染待辦事項(xiàng)文本。

創(chuàng)建 `__tests__/components/TodoItem.test.js`：

```js
import React from 'react'
import { mount } from 'enzyme'
import TodoItem from '../../src/components/TodoItem.jsx'

describe('待辦事項(xiàng)-列表項(xiàng)組件', () => {
  test('渲染待辦事項(xiàng)列表項(xiàng)', () => {
   
  })
})
```

從 `enzyme` 中導(dǎo)入 `mount`，用于渲染組件，這樣就可以檢查輸出并對(duì)其進(jìn)行斷言測試了。即使我們?cè)?Node 環(huán)境中運(yùn)行測試，也可以編寫需要的 DOM 并進(jìn)行測試，因?yàn)?Jest 中允許你使用 `jsdom` 庫操作 DOM，這樣就不必每次都啟動(dòng)瀏覽器來測試了。

接下來我們完成測試編寫，整個(gè)測試如下：

```js
import React from 'react'
import { mount } from 'enzyme'
import TodoItem from '../../src/components/TodoItem.jsx'

describe('待辦事項(xiàng)-列表項(xiàng)組件', () => {
  test('渲染待辦事項(xiàng)列表項(xiàng)', () => {
    const todo = {id: 2, title: '復(fù)習(xí) React Hooks 使用', completed: false}
    const wrapper = mount(
      <TodoItem todo={todo} />
    )
    const p = wrapper.find('p')
    expect(p.text()).toBe('復(fù)習(xí) React Hooks 使用')
  })
})
```

簡單說明一下，我們可以使用 `mount` 來創(chuàng)建 `TodoItem`，然后調(diào)用 `wrapper.find()` 傳遞一個(gè) CSS 選擇器來查找節(jié)點(diǎn)，由于示例的 DOM 很簡單，所以直接使用 `p` 元素選擇器查找，這和使用 `jQuery` 類似。最后，可以斷言段落中的文本內(nèi)容應(yīng)該是“復(fù)習(xí) React Hooks 使用”。

可以看到測試通過。

## **編寫交互測試**

下面我們來測試當(dāng)點(diǎn)擊待辦事項(xiàng)列表項(xiàng)中的段落時(shí)，修改待辦事項(xiàng)的完成狀態(tài)。

Jest 中提供了 **`spy`** (間諜)的開箱即用的功能，一個(gè) `spy` 是一個(gè)函數(shù)，你不用關(guān)心它的實(shí)現(xiàn)，只需關(guān)心它的調(diào)用時(shí)間與調(diào)用方式，當(dāng)我們要監(jiān)視函數(shù)時(shí)可以考慮使用它。

要修改待辦事項(xiàng)的完成狀態(tài)，需要傳遞 `toggle` 屬性，它是一個(gè)函數(shù)，我們現(xiàn)在來測試當(dāng)用戶點(diǎn)擊時(shí)，該函數(shù)被使用正確的參數(shù)進(jìn)行調(diào)用。

首先使用 `jest.fn()` 創(chuàng)建一個(gè) `spy`：

```js
const toggle = jest.fn()
```

這為我們提供了一個(gè)可以監(jiān)視并確保它被正確調(diào)用的函數(shù)。

接下來渲染 `TodoItem` 組件：

```js
const toggle = jest.fn()
const wrapper = mount(
  <TodoItem todo={todo} toggle={toggle} />
)
```

然后查找 DOM 節(jié)點(diǎn)并模擬用戶觸發(fā)點(diǎn)擊事件：

```js
const p = wrapper.find('p')
p.simulate('click')
```

`simulate()` 用于模擬用戶事件。

剩下的就是斷言 `spy` 函數(shù)被正確調(diào)用，整個(gè)測試應(yīng)該如下：

```js
test('點(diǎn)擊修改待辦事項(xiàng)狀態(tài)', () => {
  const toggle = jest.fn()
  const todo = {id: 2, title: '復(fù)習(xí) React Hooks 使用', completed: false}
  const wrapper = mount(
    <TodoItem todo={todo} toggle={toggle} />
  )
  const p = wrapper.find('p')
  p.simulate('click')
  expect(toggle).toBeCalledWith(2)
})
```

我們期望使用待辦事項(xiàng)的 id 作為參數(shù)進(jìn)行調(diào)用，可以用 `expect(toggle).toBeCalledWith(2)` 來斷言。這樣，我們的測試就完成了：

測試通過。

## **總結(jié)**

Jest 被大量的使用，已成為 JavaScript 開發(fā)人員最愛的測試框架之一，相信它會(huì)變得更好。在測試方面，它擁有速度快、API 簡單、易配置、IDE 整合、多項(xiàng)目并行等優(yōu)勢，相信隨著大家的使用，你一定會(huì)愛上它的。

文章示例 Github 倉庫：[https://github.com/itrainhub/testing-react-with-jest](https://link.zhihu.com/?target=https%3A//github.com/itrainhub/testing-react-with-jest)

**- End -**

更多關(guān)于“web前端培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn)，課程大綱更科學(xué)更專業(yè)，有針對(duì)零基礎(chǔ)的就業(yè)班，有針對(duì)想提升技術(shù)的提升班，高品質(zhì)課程助理你實(shí)現(xiàn)夢想。