單元測試？即刻搞定！

公眾號名片
作者名片

什麼是“低程式碼”?如何實現“低程式碼”？如何在具體工作場景之中使用“低程式碼”呢？今晚19:00我們在B站“百瓶技術”向您直播“低程式碼構建平臺在百瓶的實踐”，與您不見不散！傳送門

前言

今天你胃口好嗎？

如今隨著一個專案業務不斷壯大，重構與迭代也日趨頻繁，為保證專案的穩定性與可維護性，單元測試也逐漸成為不可忽視的一環。本文將帶來單元測試的介紹，有關框架選擇，環境安裝與書寫測試用例等，內容較為簡單，極易上手。

什麼是單元測試

在計算機程式設計中，單元測試（Unit Testing）又稱為模組測試，是針對程式模組（軟體設計的最小單元）來進行正確性檢驗的測試工作。程式單元是應用的最小可測試部件。在過程化程式設計中，一個單元就是單個程式、函式、過程等；對於物件導向程式設計，最小單元就是方法，包括基類（超類）、抽象類或者派生類（子類）中的方法。

以上是來自維基百科的解釋。概括來說，單元測試是對軟體中的最小可測試單元進行檢查和驗證。而對於 JavaScript 來說，通常也是針對函式、物件和模組的測試。

為什麼要使用它

優點

放心重構：重構某處業務程式碼過程中不用擔心程式碼帶來的副作用，用例會自動幫助全面測試;
利於維護：每次迭代新功能，程式碼更新頻繁時，保證了測試的完整性（因為之前的測試用例依然存在），系統有很好的可維護性，便於多人開發;
快速熟悉程式碼：對團隊的新人來說，單元測試其實是較好的文件，每個 case 都能詳細地反映程式碼包含的具體功能和業務;
提高程式碼質量：假設一個單元測試寫得邏輯非常複雜，或者說一個函式複雜到無法寫單元測試，那就說明模組抽取有問題，可警示自己。

前端主流測試框架

框架名	簡介與優點
Jest	Facebook 釋出，API 簡單，快出覆蓋率統計結果，內建常用的測試工具，比如斷言庫，是集大成者，易上手
Mocha	誕生於 2011 年，社群活躍，靈活且擴充套件性好，但是需要額外配置（比如斷言，需要自己學習和選擇工具庫）
Karma	2012 年 Google 團隊開發，有個強大特性，可監測（Watch）檔案的變化可自動執行，顯示測試結果

斷言概念：就是判斷原始碼的實際執行結果與預期結果是否一致，若不一致即丟擲異常。

知名團隊使用 Jest 情況

團隊	百瓶	推特	臉書	愛彼迎
Logo

前端如何選擇合適的框架

專案需求

與專案、編譯器都需較好地相容
測試快速執行
清晰的錯誤報告

成本

學習成本
除錯維護成本

相比其他框架而言，Jest 比較新，本著對待技術需要有「喜新厭舊」的精神，另外結合自身需求，百瓶前端團隊使用了 Jest，結合了 Vue Test Utils 元件測試框架。功能較齊全，簡單易用。另外 Vue 官方網站對 Jest 的評價是：功能最全的測試執行器。

tips：如果寫了 Mocha 的測試用例，但想遷移至 Jest 框架中，可使用 jest-codemods 進行無縫遷移。

擼起袖子，輕鬆上手

Talk is cheap，show you the code！即刻開始搭建環境。

存在一個腳手架生成的 Vue 專案（若還未生成 Vue 專案可在建立 Vue 專案時候選擇手動配置內容，在手動配置中新增 Jest 測試框架與 Vue Test Utils 工具庫）。

Jest安裝

方法一：

首先安裝 Jest，進入專案目錄輸入命令。

npm install --save-dev jest

安裝 Jest 相關依賴。

npm install --save-dev jest babel-jest babel-core babel-preset-env regenerator-runtime

babel-jest、 babel-core、 regenerator-runtime、 babel-preset-env 安裝目的是為使用 ES6 語法進行單元測試。因為 ES6 中 import 的使用在 Jest 並不支援。

新增 .bablerc 檔案

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ],
  "env": {
    "test": {
      "presets": [
        "env"
      ]
    }
  }
}

建立 jest.conf.js 檔案，進行配置

module.exports = {
  moduleFileExtensions: [
    'js',
    'json',
    'vue',
  ],
  // 告訴 Jest 處理 `*.vue` 檔案
  moduleNameMapper: {
    // 支援原始碼中相同的`@` => `src` 別名
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  transform: {
    // 用 babel-jest 處理 js
    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
    // 用 vue-jest 處理 `*.vue` 檔案 
    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
  }
}

新增 test、script 命令，在 package.json 中新增測試單元的指令碼

{
  'script': {
    'test': 'jest'
  }
}

其中 test 的命令可以進行優化

"test": "jest --config jest.conf.js --coverage --watch"

--coverage 可以生成覆蓋率報告
--watch 實現單元測試監聽，測試用例修改時無需再進行命令列執行，可自行監聽
--config jest.conf.js 是為了解決測試 Vue 元件時候，無法找到元件模組

方法二：

使用命令列 npx jest --init 執行。

init

安裝 Vue Test Utils 與 vue-jest 前處理器。

npm install --save-dev jest @vue/test-utils

為告訴 Jest 如何處理 *.vue 元件檔案，我們需要安裝和配置 vue-jest 前處理器：

npm install --save-dev vue-jest

最簡配置如下，即可進行單元測試：

package

注意：

如果你使用了 Babel 7 或更高版本，你需要在你的 devDependencies 裡新增 babel-bridge。

npm install --save-dev babel-core@^7.0.0-bridge.0

安裝完成後，建立 test 資料夾，學習官方的 API 進行測試用例使用。

在此資料夾中建立.js並引入我們需要測試的函式add：

fun

its

執行命令npm run jest

result

至此專案中基礎的單元測試安裝與使用已經完成。

最後

值得思考的是，並不是所有的專案都值得引入測試框架，畢竟維護測試用例也是需要成本的。對於一些需求頻繁變更、複用性較低的內容而言是極為不合適。以下三種情況是較為合適的

需要長期維護的專案，因為他們需要功能的穩定性；
較為穩定的專案或者專案中較為穩定的部分；
被多次複用的地方，比如通用的元件和庫函式。

關於前端單元測試使用的簡單介紹就結束了，希望本文對你有幫助，祝你天天好胃口！