## **利用Jest測試React組件**
> Jest 是一個由 facebook 維護的測試框架，在本文中，我們將利用 Jest 來測試 React 組件。我們將首先了解如何在純 JavaScript 函數上使用 Jest，然后再了解它提供的一些開箱即用的特性，這些特性旨在使測試 React 應用程序變得更容易。
注意，Jest 并不是專門針對 React 的測試框架，你可以使用它來測試任何 JavaScript 應用程序。然而，它提供的一些特性對于測試用戶界面非常方便，這就是它非常適合 React 的原因。
## **示例程序**
在可以進行測試前，我們需要一個應用程序，在此以一個待辦事項列表為例，大家可以從 Github 中克隆該應用：testing-react-with-jest。
示例項目利用 webpack 進行構建，
應用程序的入口點是 `src/index.js`，它將 `<App>` 組件呈現到 HTML 中：
```js
import React from 'react'
import { render } from 'react-dom'
import App from './App.jsx'
render(
<App />,
document.getElementById('root')
)
```
應用程序中組件樹層級結構如下：
應用中使用到的初始狀態數據及業務邏輯在 `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 年首次發布，雖然它最初引起了很多人的興趣，但該項目一度處于休眠狀態。然而，Facebook 投入了大量精力來改進 Jest，隨后發布了一些更新的版本，與最初的開源版本相比，Jest 的唯一相似之處是名稱和徽標，其他一切都已更改和重寫。
## **安裝與配置Jest**
首先，我們需要安裝 Jest，由于我們也在使用 Babel，所以一并安裝相關的模塊，使 Jest 和 Babel 開箱即用：
```js
$ npm install jest babel-jest --save-dev
# 或
$ yarn add jest babel-jest --dev
```
在項目根目錄下創建 `__tests__` 目錄，Jest 希望在一個`__tests__` 目錄中找到我們的測試，這已經成為 JavaScript 社區的流行約定，當然，如果你對創建 `__tests__` 目錄統一管理不感冒，Jest 也支持查找任意的 `*.test.js` 或 `*.spec.js` 文件。
下面我們來測試我們的狀態函數。
繼續創建 `__tests__/state/index.test.js`，在正式測試之前，我們先看是否能夠正常進行測試：
```js
describe('數字加減算術運算', () => {
test('3加2減5等于0', () => {
expect(3 + 2 - 5).toBe(0)
})
})
```
在 `package.json` 文件中添加 `npm scripts` 任務：
```js
{
"scripts": {
"test": "jest"
}
}
```
然后在命令行中執行測試任務：
```js
$ npm test
```
運行結果：
在 Jest 中，我們可以根據需要使用 `describe` 和 `test` 嵌套測試，`describe` 創建一個將幾個相關測試組合在一起的塊，`test` 是運行測試的方法。在此測試中，使用了 `expect` 和 `toBe` 來檢測兩個值是否完全相同。相關 API 使用我們可以在 Jest 官方 API 文檔 中進行查閱，本文中我們也可以來了解一些 Jest 的斷言。
## **測試業務邏輯**
我們已經通過一個示例看到了 Jest 在測試中的工作，下面我們來測試狀態邏輯中的一個函數 `removeTodoItem`：
```js
export const removeTodoItem = (todos, id) => todos.filter(todo => todo.id !== id)
```
`removeTodoItem` 接收要刪除待辦事項的當前狀態與待刪除待辦事項的 id。
利用 `describe` 與 `test` 編寫該測試：
```js
describe('待辦事項操作測試', () => {
test('刪除待辦事項', () => {
})
})
```
可能大家也會看到其它文檔中使用 `it` 來代替 `test`，其實 `it` 是作為 `test` 的別名使用的，二者是相同的作用。
下面開始編寫斷言，首先，可以創建一個初始狀態 `todos` 數組，然后將它傳遞給 `removeTodoItem`，再傳遞我們想要刪除的新的待辦事項 id，`removeTodoItem` 會返回完成后的狀態，可以如下定義：
```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` 一般用于原始類型的值的比較，例如字符串、數字等類型，`toEqual` 通常在數組和對象上使用。
在命令行中執行 `npm test`：
可以看到測試通過。
## **測試React組件**
不建議在 React 組件上編寫太多的測試，任何你想測試的內容，比如業務邏輯，還是建議從組件中獨立出來放在單獨的函數中，就像上邊測試狀態函數一樣。但有時測試一些 React 交互是很有必要的，如要確保用戶在單擊某個按鈕時使用正確的參數去調用特定函數。
*如果利用 Create React App 來創建項目，從 3.3 以后的版本中已自帶官方推薦的 testing-library，本文暫不討論 testing-library。*
## **安裝與配置Enzyme**
為了編寫我們的測試，先安裝 Enzyme，這是一個由 Airbnb 編寫的包裝庫，它使得測試 React 組件變得更容易。同時，我們還要為我們使用的 React 不同版本安裝適配器，本例中使用 React v17.x，目前還沒有官方適配器可用，但也有社區版本：
```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 進行少量相關配置，在項目根目錄下創建 `setup-enzyme.js` 文件：
```js
import { configure } from 'enzyme'
import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
configure({ adapter: new Adapter() })
```
然后在項目根目錄下創建 `jest.config.js` 文件：
```js
module.exports = {
setupFilesAfterEnv: [
'./setup-enzyme.js'
],
testEnvironment: 'jsdom'
}
```
這告訴 Jest 在執行任何測試之前，為我們運行 `setup-tests.js` 文件，由于測試的是 Web 應用程序，所以使用瀏覽器類似的環境 jsdom 來代替。
## **編寫組件渲染測試**
接下來我們就可以編寫測試了，我們來測試 `TodoItem` 組件是否能夠在段落中渲染待辦事項文本。
創建 `__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 環境中運行測試，也可以編寫需要的 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` 來創建 `TodoItem`，然后調用 `wrapper.find()` 傳遞一個 CSS 選擇器來查找節點，由于示例的 DOM 很簡單，所以直接使用 `p` 元素選擇器查找，這和使用 `jQuery` 類似。最后，可以斷言段落中的文本內容應該是“復習 React Hooks 使用”。
可以看到測試通過。
## **編寫交互測試**
下面我們來測試當點擊待辦事項列表項中的段落時，修改待辦事項的完成狀態。
Jest 中提供了 **`spy`** (間諜)的開箱即用的功能，一個 `spy` 是一個函數，你不用關心它的實現，只需關心它的調用時間與調用方式，當我們要監視函數時可以考慮使用它。
要修改待辦事項的完成狀態，需要傳遞 `toggle` 屬性，它是一個函數，我們現在來測試當用戶點擊時，該函數被使用正確的參數進行調用。
首先使用 `jest.fn()` 創建一個 `spy`：
```js
const toggle = jest.fn()
```
這為我們提供了一個可以監視并確保它被正確調用的函數。
接下來渲染 `TodoItem` 組件：
```js
const toggle = jest.fn()
const wrapper = mount(
<TodoItem todo={todo} toggle={toggle} />
)
```
然后查找 DOM 節點并模擬用戶觸發點擊事件：
```js
const p = wrapper.find('p')
p.simulate('click')
```
`simulate()` 用于模擬用戶事件。
剩下的就是斷言 `spy` 函數被正確調用，整個測試應該如下：
```js
test('點擊修改待辦事項狀態', () => {
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 作為參數進行調用，可以用 `expect(toggle).toBeCalledWith(2)` 來斷言。這樣，我們的測試就完成了：
測試通過。
## **總結**
Jest 被大量的使用，已成為 JavaScript 開發人員最愛的測試框架之一，相信它會變得更好。在測試方面，它擁有速度快、API 簡單、易配置、IDE 整合、多項目并行等優勢，相信隨著大家的使用，你一定會愛上它的。
文章示例 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前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。
京公網安備 11010802030320號