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

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

示例程序

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

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

應用程序的入口點是 src/index.js，它將 <App> 組件呈現到 HTML 中：

import React from 'react'

import { render } from 'react-dom'

import App from './App.jsx'

render(

<App />,

document.getElementById('root')

)

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

應用中使用到的初始狀態數據及業務邏輯在 src/state/index.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 開箱即用：

$ 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，在正式測試之前，我們先看是否能夠正常進行測試：

describe('數字加減算術運算', () => {

test('3加2減5等于0', () => {

expect(3 + 2 - 5).toBe(0)

})

})

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

{

"scripts": {

"test": "jest"

}

}

然后在命令行中執行測試任務：

$ npm test

運行結果：

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

測試業務邏輯

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

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

removeTodoItem 接收要刪除待辦事項的當前狀態與待刪除待辦事項的 id。

利用 describe 與 test 編寫該測試：

describe('待辦事項操作測試', () => {

test('刪除待辦事項', () => {

})

})

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

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

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，目前還沒有官方適配器可用，但也有社區版本：

$ 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 文件：

import { configure } from 'enzyme'

import Adapter from '@wojtekmaj/enzyme-adapter-react-17'

configure({ adapter: new Adapter() })

然后在項目根目錄下創建 jest.config.js 文件：

module.exports = {

setupFilesAfterEnv: [

'./setup-enzyme.js'

],

testEnvironment: 'jsdom'

}

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

編寫組件渲染測試

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

創建 __tests__/components/TodoItem.test.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，這樣就不必每次都啟動瀏覽器來測試了。

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

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：

const toggle = jest.fn()

這為我們提供了一個可以監視并確保它被正確調用的函數。

接下來渲染 TodoItem 組件：

const toggle = jest.fn()

const wrapper = mount(

<TodoItem todo={todo} toggle={toggle} />

)

然后查找 DOM 節點并模擬用戶觸發點擊事件：

const p = wrapper.find('p')

p.simulate('click')

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

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

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 整合、多項目并行等優勢，相信隨著大家的使用，你一定會愛上它的。

上一篇

千鋒長沙前端培訓分享之JavaScript中Slice的用例

下一篇

千鋒長沙前端培訓分享之3種Javascript圖片預加載的方法詳解