1 什么是 Jest?

Jest是 Facebook 的一套開源的 JavaScript 測試框架， 它自動集成了斷言、JSDom、覆蓋率報告等開發者所需要的所有測試工具，是一款幾乎零配置的測試框架。并且它對同樣是 Facebook 的開源前端框架 React 的測試十分友好。

2 安裝Jest

2.1 初始化package.json

在shell中輸入以下命令，初始化前端項目并生成package.json：

npm init -y

2.2 安裝Jest及相關依賴

在shell中輸入以下命令，安裝測試所需要的依賴：

npm install -D jest babel-jest babel-core babel-preset-env regenerator-runtime

babel-jest、 babel-core、 regenerator-runtime、babel-preset-env這幾個依賴是為了讓我們可以使用ES6的語法特性進行單元測試，ES6提供的 import 來導入模塊的方式，Jest本身是不支持的。

2.3 添加.babelrc文件

在項目的根目錄下添加.babelrc文件，并在文件復制如下內容:

{"presets": ["env"] }

2.4 修改package.json中的test腳本

打開package.json文件，將script下的test的值修改為jest：

"scripts": {"test": "jest" }

3. 編寫你的第一個Jest測試

創建src和test目錄及相關文件

• 在項目根目錄下創建src目錄，并在src目錄下添加functions.js文件
• 在項目根目錄下創建test目錄，并在test目錄下創建functions.test.js文件

Jest會自動找到項目中所有使用.spec.js或.test.js文件命名的測試文件并執行，通常我們在編寫測試文件時遵循的命名規范：測試文件的文件名 = 被測試模塊名 + .test.js，例如被測試模塊為functions.js，那么對應的測試文件命名為functions.test.js。

在src/functions.js中創建被測試的模塊

export default {sum(a, b) {return a + b;} }

在test/functions.test.js文件中創建測試用例

import functions from '../src/functions';test('sum(2 + 2) 等于 4', () => {expect(functions.sum(2, 2)).toBe(4); })

運行npm run test, Jest會在shell中打印出以下消息：

PASS test/functions.test.js√ sum(2 + 2) 等于 4 (7ms)Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 4.8s

4.常用的幾個Jest斷言

上面測試用例中的expect(functions.sum(2, 2)).toBe(4)為一句斷言，Jest為我們提供了expect函數用來包裝被測試的方法并返回一個對象，該對象中包含一系列的匹配器來讓我們更方便的進行斷言，上面的toBe函數即為一個匹配器。我們來介紹幾種常用的Jest斷言，其中會涉及多個匹配器。

.not

//functions.test.js import functions from '../src/functions'test('sum(2, 2) 不等于 5', () => {expect(functions.sum(2, 2)).not.toBe(5); })

.not修飾符允許你測試結果不等于某個值的情況，這和英語的語法幾乎完全一樣，很好理解。

.toEqual()

// functions.js export default {getAuthor() {return {name: 'LITANGHUI',age: 24,}} } // functions.test.js import functions from '../src/functions';test('getAuthor()返回的對象深度相等', () => {expect(functions.getAuthor()).toEqual(functions.getAuthor()); })test('getAuthor()返回的對象內存地址不同', () => {expect(functions.getAuthor()).not.toBe(functions.getAuthor()); })

.toEqual匹配器會遞歸的檢查對象所有屬性和屬性值是否相等，所以如果要進行應用類型的比較時，請使用.toEqual匹配器而不是.toBe。

.toHaveLength

// functions.js export default {getIntArray(num) {if (!Number.isInteger(num)) {throw Error('"getIntArray"只接受整數類型的參數');}let result = [];for (let i = 0, len = num; i < len; i++) {result.push(i);}return result;} } // functions.test.js import functions from '../src/functions';test('getIntArray(3)返回的數組長度應該為3', () => {expect(functions.getIntArray(3)).toHaveLength(3); })

.toHaveLength可以很方便的用來測試字符串和數組類型的長度是否滿足預期。

.toThrow

// functions.test.js import functions from '../src/functions';test('getIntArray(3.3)應該拋出錯誤', () => {function getIntArrayWrapFn() {functions.getIntArray(3.3);}expect(getIntArrayWrapFn).toThrow('"getIntArray"只接受整數類型的參數'); })

.toThorw可能夠讓我們測試被測試方法是否按照預期拋出異常，但是在使用時需要注意的是：我們必須使用一個函數將將被測試的函數做一個包裝，正如上面getIntArrayWrapFn所做的那樣，否則會因為函數拋出導致該斷言失敗。

.toMatch

// functions.test.js import functions from '../src/functions';test('getAuthor().name應該包含"li"這個姓氏', () => {expect(functions.getAuthor().name).toMatch(/li/i); })

.toMatch傳入一個正則表達式，它允許我們用來進行字符串類型的正則匹配。

5 測試異步函數

安裝axios
這里我們使用最常用的http請求庫axios來進行請求處理

npm install axios

編寫http請求函數
我們將請求http://jsonplaceholder.typicode.com/users/1，這是由JSONPlaceholder提供的mock請求地址

// functions.js import axios from 'axios';export default {fetchUser() {return axios.get('http://jsonplaceholder.typicode.com/users/1').then(res => res.data).catch(error => console.log(error));} } // functions.test.js import functions from '../src/functions';test('fetchUser() 可以請求到一個含有name屬性值為Leanne Graham的對象', () => {expect.assertions(1);return functions.fetchUser().then(data => {expect(data.name).toBe('Leanne Graham');}); })

上面我們調用了expect.assertions(1)，它能確保在異步的測試用例中，有一個斷言會在回調函數中被執行。這在進行異步代碼的測試中十分有效。

使用async和await精簡異步代碼

test('fetchUser() 可以請求到一個用戶名字為Leanne Graham', async () => {expect.assertions(1);const data = await functions.fetchUser();expect(data.name).toBe('Leanne Graham') })

當然我們既然安裝了Babel，為何不使用async和await的語法來精簡我們的異步測試代碼呢? 但是別忘記都需要調用expect.assertions方法

參考資料

【1】 Jest官方文檔(https://jestjs.io/zh-Hans/)
【2】 Jest Crash Course - Unit Testing in JavaScript(https://www.youtube.com/watch...

總結

以上是生活随笔為你收集整理的使用Jest测试JavaScript (入门篇)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。