之前在網(wǎng)上看了很多關(guān)于jest的文章络拌，看的雨里霧里俭驮，看不懂，于是自己搜集了一些文章，結(jié)合了自己的理解混萝，寫(xiě)了這篇文章遗遵，除了能記錄下自己的學(xué)習(xí)過(guò)程，也希望能幫助一些需要的人逸嘀。

首先先從jest單元測(cè)試入門(mén)開(kāi)始說(shuō)起车要。

一、Jest是什么

Jest 是用來(lái)創(chuàng)建崭倘、執(zhí)行和構(gòu)建測(cè)試用例的一個(gè) JavaScript 測(cè)試庫(kù)翼岁。你可以在任何項(xiàng)目中以 npm 包的形式，安裝并使用它司光。Jest 是當(dāng)前最受歡迎的測(cè)試執(zhí)行器琅坡，并且是在創(chuàng)建 React App 時(shí)的默認(rèn)選項(xiàng)。

二残家、測(cè)試流程

一個(gè)典型的測(cè)試流程如下：

1. 引入要測(cè)試的函數(shù)

2. 給函數(shù)一個(gè)輸入

3. 定義預(yù)期輸出

4. 檢查函數(shù)是否返回了預(yù)期的輸出結(jié)果

所以我們要做的就是：輸入 —— 預(yù)期輸出 —— 驗(yàn)證結(jié)果

三袱衷、Jest起步

3.1 安裝

在桌面上新建一個(gè)文件夾

完成上面兩步之后卖氨，生成的文件夾中包含node_modules文件夾正塌，package.json文件道媚，yarn.lock文件。

打開(kāi)?package.json回窘，將執(zhí)行 Jest 的命令命名為“test”：

根目錄下新建?src文件夾诺擅，文件夾下面新建filterByTerm.js文件，里面的內(nèi)容如下：

然后在根目錄下新建?tests文件夾,
接下來(lái)在?tests?文件夾中創(chuàng)建一個(gè)文件?filterByTerm.spec.js啡直。你可能存在疑問(wèn)掀虎，為什么文件名中包含一個(gè)“.spec”？這其實(shí)是從 Ruby 借鑒而來(lái)的一種約定付枫，用于將文件標(biāo)記為特定功能的規(guī)范。

現(xiàn)在可以準(zhǔn)備寫(xiě)測(cè)試了驰怎。記住阐滩，測(cè)試是關(guān)于輸入、函數(shù)和預(yù)期結(jié)果的事情县忌。

首先掂榔，我們定義一個(gè)簡(jiǎn)單的輸入——一個(gè)包含對(duì)象成員的數(shù)組input = [ { id: 1, url:"https://www.url1.dev"}, { id: 2, url:"https://www.url2.dev"}, { id: 3, url:"https://www.link3.dev"} ];

再來(lái)定義我們的預(yù)期結(jié)果。比如症杏，我們的搜索項(xiàng)是“l(fā)ink”装获，期望的結(jié)果是一個(gè)僅包含一個(gè)對(duì)象成員的數(shù)組：output = [{ id: 3, url: "https://www.link3.dev" }];

現(xiàn)在可以寫(xiě)實(shí)際測(cè)試代碼了。我們要用到 Jest 的?expect?函數(shù)和?匹配器（matcher）?來(lái)檢查我們假想的（當(dāng)前是）函數(shù)調(diào)用時(shí)是否返回預(yù)期結(jié)果厉颤。

在 Jest 測(cè)試中穴豫，我們把測(cè)試函數(shù)包裝在?expect?里面，并且搭配?匹配器?（用來(lái)檢查輸入的 Jest 函數(shù)）一起使用，來(lái)完成測(cè)試精肃。下面列出了完整測(cè)試代碼：

現(xiàn)在秤涩，運(yùn)行一波測(cè)試：

看到?jīng)]，通過(guò)了司抱！

很棒筐眷。但是完了嗎？還沒(méi)习柠。怎樣讓函數(shù)再次調(diào)用失敗呢匀谣？接下里，我們用大寫(xiě)的搜索項(xiàng)調(diào)用下函數(shù)：

執(zhí)行測(cè)試……嗯资溃，失敗了武翎。來(lái)吧，我們?cè)賮?lái)修復(fù)下肉拓。

filterByTerm?應(yīng)該也要把大寫(xiě)搜索項(xiàng)考慮進(jìn)去后频。也就是說(shuō)，即使是搜索內(nèi)容是大寫(xiě)的暖途，也要以忽略大小寫(xiě)的形式返回對(duì)應(yīng)的匹配對(duì)象卑惜。

為了通過(guò)測(cè)試，我們需要稍微調(diào)整下?match?方法的正則表達(dá)式驻售，相較于直接使用 searchTerm露久，我們可以構(gòu)建一個(gè)不區(qū)分大小寫(xiě)的正則表達(dá)式。也就是說(shuō)欺栗，一個(gè)與字符串大小寫(xiě)無(wú)關(guān)的表達(dá)式毫痕。下面是完整測(cè)試代碼：

再次運(yùn)行下面的命令：

在此執(zhí)行，會(huì)看到通過(guò)了迟几。

下一節(jié)消请，我們要來(lái)看下另一個(gè)重要的測(cè)試話題：代碼覆蓋率。

四类腮、代碼覆蓋率

現(xiàn)在假設(shè)我是你們公司新來(lái)的同事臊泰。我對(duì)測(cè)試一無(wú)所知，在不清楚我們開(kāi)發(fā)環(huán)境的情況下蚜枢，我在這個(gè)函數(shù)里加了一個(gè)?if 語(yǔ)句：

我們?cè)?filterByTerm 里加了一行新代碼缸逃，但沒(méi)有被測(cè)試。除非我告訴你“這里有個(gè)新語(yǔ)句需要測(cè)試”厂抽，你是不會(huì)知道要測(cè)試什么的需频。幾乎不可能知道我們的代碼會(huì)走的所有路徑，因此需要一種工具來(lái)幫助我們發(fā)現(xiàn)這些盲點(diǎn)筷凤。

這種工具稱為代碼覆蓋率,它是我們工具箱里的一個(gè)強(qiáng)大工具昭殉。Jest 內(nèi)置了代碼覆蓋率工具，你可以激活它

打開(kāi)?package.json，將執(zhí)行 Jest 的命令命名為“test:coverage”：

執(zhí)行覆蓋率測(cè)試：

得到如下的結(jié)果：

這是對(duì)我們函數(shù)測(cè)試覆蓋率的一個(gè)很好的總結(jié)饲化。我們看見(jiàn)第 2莽鸭、3 行沒(méi)有覆蓋。現(xiàn)在來(lái)測(cè)試我新添加的 if 語(yǔ)句吃靠，來(lái)達(dá)到 100% 的代碼覆蓋率硫眨。

到這里jest入門(mén)就介紹完了，大家最關(guān)心的應(yīng)該是jest如何在vue項(xiàng)目中使用巢块，請(qǐng)往下看：

五礁阁、在vue 項(xiàng)目中的使用

首先為了演示，我會(huì)先創(chuàng)建一個(gè)新的vue項(xiàng)目

打開(kāi)新建的這個(gè)vue項(xiàng)目：

運(yùn)行完上面的命令之后族奢，會(huì)發(fā)現(xiàn)根目錄下面多了tests文件夾和?jest.config.js 文件姥闭，tests文件夾下面有一個(gè)unit文件夾，里面包含了example.spec.js文件

需要先安裝和配置 vue-jest 預(yù)處理器：

然后運(yùn)行下面的命令：

Mac電腦會(huì)報(bào)錯(cuò)vue-cli-service: command not found?

解決辦法是可以在package.json里面添加上依賴：

然后運(yùn)行下面的命令重新安裝依賴：

在生成的項(xiàng)目根目錄下越走，會(huì)有一個(gè)?jest.config.json?文件棚品，cli自動(dòng)生成所用的預(yù)設(shè)是@vue/cli-plugin-unit-jest。我們可以在這里對(duì)?jest?進(jìn)行個(gè)性化的配置廊敌。以下是一個(gè)配置文檔的例子铜跑。

注意看上面的注釋，每一行的作用都已經(jīng)標(biāo)注出來(lái)骡澈。

HelloWorld.vue文件的內(nèi)容如下：

example.spec.js文件的內(nèi)容如下：

然后運(yùn)行下面的命令：

得到如下結(jié)果：

附錄：

package.json文件的內(nèi)容如下：