之前在網(wǎng)上看了很多關(guān)于jest的文章，看的雨里霧里，看不懂，于是自己搜集了一些文章，結(jié)合了自己的理解，寫了這篇文章，除了能記錄下自己的學(xué)習(xí)過程，也希望能幫助一些需要的人。
首先先從jest單元測試入門開始說起。
一、Jest是什么
Jest 是用來創(chuàng)建、執(zhí)行和構(gòu)建測試用例的一個 JavaScript 測試庫。你可以在任何項目中以 npm 包的形式，安裝并使用它。Jest 是當(dāng)前最受歡迎的測試執(zhí)行器，并且是在創(chuàng)建 React App 時的默認(rèn)選項。
二、測試流程
一個典型的測試流程如下：
1. 引入要測試的函數(shù)
2. 給函數(shù)一個輸入
3. 定義預(yù)期輸出
4. 檢查函數(shù)是否返回了預(yù)期的輸出結(jié)果
所以我們要做的就是：輸入 —— 預(yù)期輸出 —— 驗證結(jié)果
三、Jest起步
3.1 安裝
在桌面上新建一個文件夾
完成上面兩步之后，生成的文件夾中包含node_modules文件夾，package.json文件，yarn.lock文件。
打開?package.json，將執(zhí)行 Jest 的命令命名為“test”：
根目錄下新建?src文件夾，文件夾下面新建filterByTerm.js文件，里面的內(nèi)容如下：
然后在根目錄下新建?tests文件夾,
接下來在?tests?文件夾中創(chuàng)建一個文件?filterByTerm.spec.js。你可能存在疑問，為什么文件名中包含一個“.spec”？這其實是從 Ruby 借鑒而來的一種約定，用于將文件標(biāo)記為特定功能的規(guī)范。
現(xiàn)在可以準(zhǔn)備寫測試了。記住，測試是關(guān)于輸入、函數(shù)和預(yù)期結(jié)果的事情。
首先，我們定義一個簡單的輸入——一個包含對象成員的數(shù)組input = [ { id: 1, url:"https://www.url1.dev"}, { id: 2, url:"https://www.url2.dev"}, { id: 3, url:"https://www.link3.dev"} ];
再來定義我們的預(yù)期結(jié)果。比如，我們的搜索項是“l(fā)ink”，期望的結(jié)果是一個僅包含一個對象成員的數(shù)組：output = [{ id: 3, url: "https://www.link3.dev" }];
現(xiàn)在可以寫實際測試代碼了。我們要用到 Jest 的?expect?函數(shù)和?匹配器（matcher）?來檢查我們假想的（當(dāng)前是）函數(shù)調(diào)用時是否返回預(yù)期結(jié)果。
在 Jest 測試中，我們把測試函數(shù)包裝在?expect?里面，并且搭配?匹配器?（用來檢查輸入的 Jest 函數(shù)）一起使用，來完成測試。下面列出了完整測試代碼：
現(xiàn)在，運行一波測試：
看到?jīng)]，通過了！
很棒。但是完了嗎？還沒。怎樣讓函數(shù)再次調(diào)用失敗呢？接下里，我們用大寫的搜索項調(diào)用下函數(shù)：
執(zhí)行測試……嗯，失敗了。來吧，我們再來修復(fù)下。
filterByTerm?應(yīng)該也要把大寫搜索項考慮進去。也就是說，即使是搜索內(nèi)容是大寫的，也要以忽略大小寫的形式返回對應(yīng)的匹配對象。
為了通過測試，我們需要稍微調(diào)整下?match?方法的正則表達式，相較于直接使用 searchTerm，我們可以構(gòu)建一個不區(qū)分大小寫的正則表達式。也就是說，一個與字符串大小寫無關(guān)的表達式。下面是完整測試代碼：
再次運行下面的命令：
在此執(zhí)行，會看到通過了。
下一節(jié)，我們要來看下另一個重要的測試話題：代碼覆蓋率。
四、代碼覆蓋率
現(xiàn)在假設(shè)我是你們公司新來的同事。我對測試一無所知，在不清楚我們開發(fā)環(huán)境的情況下，我在這個函數(shù)里加了一個?if 語句：
我們在 filterByTerm 里加了一行新代碼，但沒有被測試。除非我告訴你“這里有個新語句需要測試”，你是不會知道要測試什么的。幾乎不可能知道我們的代碼會走的所有路徑，因此需要一種工具來幫助我們發(fā)現(xiàn)這些盲點。
這種工具稱為代碼覆蓋率,它是我們工具箱里的一個強大工具。Jest 內(nèi)置了代碼覆蓋率工具，你可以激活它
打開?package.json，將執(zhí)行 Jest 的命令命名為“test:coverage”：
執(zhí)行覆蓋率測試：
得到如下的結(jié)果：
這是對我們函數(shù)測試覆蓋率的一個很好的總結(jié)。我們看見第 2、3 行沒有覆蓋?，F(xiàn)在來測試我新添加的 if 語句，來達到 100% 的代碼覆蓋率。
到這里jest入門就介紹完了，大家最關(guān)心的應(yīng)該是jest如何在vue項目中使用，請往下看：
五、在vue 項目中的使用
首先為了演示，我會先創(chuàng)建一個新的vue項目
打開新建的這個vue項目：
運行完上面的命令之后，會發(fā)現(xiàn)根目錄下面多了tests文件夾和?jest.config.js 文件，tests文件夾下面有一個unit文件夾，里面包含了example.spec.js文件
需要先安裝和配置 vue-jest 預(yù)處理器：
然后運行下面的命令：
Mac電腦會報錯vue-cli-service: command not found?
解決辦法是可以在package.json里面添加上依賴：
然后運行下面的命令重新安裝依賴：
在生成的項目根目錄下，會有一個?jest.config.json?文件，cli自動生成所用的預(yù)設(shè)是@vue/cli-plugin-unit-jest。我們可以在這里對?jest?進行個性化的配置。以下是一個配置文檔的例子。
注意看上面的注釋，每一行的作用都已經(jīng)標(biāo)注出來。
HelloWorld.vue文件的內(nèi)容如下：
example.spec.js文件的內(nèi)容如下：
然后運行下面的命令：
得到如下結(jié)果：
附錄：
package.json文件的內(nèi)容如下：
