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

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

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

## **示例程序**

在可以進行測試前，我們需要一個應用程序，在此以一個待辦事項列表為例，大家可以從 Github 中克隆該應用：testing-react-with-jest。

示例項目利用 webpack 進行構建，

應用程序的入口點是 `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')
)
```

應用程序中組件樹層級結構如下：

應用中使用到的初始狀態(tài)數(shù)據及業(yè)務邏輯在 `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ā)布，雖然它最初引起了很多人的興趣，但該項目一度處于休眠狀態(tài)。然而，F(xiàn)acebook 投入了大量精力來改進 Jest，隨后發(fā)布了一些更新的版本，與最初的開源版本相比，Jest 的唯一相似之處是名稱和徽標，其他一切都已更改和重寫。

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

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

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

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

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

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

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

在 `package.json` 文件中添加 `npm scripts` 任務：

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

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

```js
$ npm test
```

運行結果：

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

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

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

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

`removeTodoItem` 接收要刪除待辦事項的當前狀態(tài)與待刪除待辦事項的 id。

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

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

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

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

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

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

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

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

可以看到測試通過。

## **測試React組件**

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

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

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

為了編寫我們的測試，先安裝 Enzyme，這是一個由 Airbnb 編寫的包裝庫，它使得測試 React 組件變得更容易。同時，我們還要為我們使用的 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
```

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

可以看到測試通過。

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

下面我們來測試當點擊待辦事項列表項中的段落時，修改待辦事項的完成狀態(tài)。

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

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

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

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

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

接下來渲染 `TodoItem` 組件：

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

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

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

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

剩下的就是斷言 `spy` 函數(shù)被正確調用，整個測試應該如下：

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

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

測試通過。

## **總結**

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

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

**- End -**

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