前端測試框架Jest系列教程 -- 簡介

系列教程：

　  1. 前端測試框架Jest系列教程 -- Matchers（匹配器）

　  2.前端測試框架Jest系列教程 -- Asynchronous(測試異步代碼)

　  3.前端測試框架Jest系列教程 -- Mock Functions（模擬器）

　  4.前端測試框架Jest系列教程 -- Global Functions（全局函數）

     5.前端測試框架Jest系列教程 -- Expect（驗證）

寫在前面：

　　隨着互聯網突飛猛進的發展，用戶對於頁面的美觀度，流暢度以及各方面的體驗有了更高的要求，咱們的網頁再也不是簡單的承載文字，圖片等簡單的信息傳遞給用戶，咱們須要的是更加美觀的頁面展現，更快的瀏覽速度，更加的豐富的用戶交互效果。好的用戶體驗必要須要優秀的前端技術支撐，這使得咱們的前端技術發生了翻天覆地的變化，前端的項目架構也愈來愈複雜，已經逐漸的演變成重量級的前端。從軟件開發的角度來講項目技術的複雜度會帶來開發，測試，交付流程等的複雜度的成倍提高，而咱們知道測試是整個軟件交付流程中很是重要的一個環節，在重前端的形勢下，前端的測試的構建也顯示尤其重要，特別是針對於先後端分離的項目來講。本次將給你們介紹一個JavaScript的測試框架：Jest。

什麼是Jest？

　　Jest是由Facebook發佈的開源的、基於Jasmine的JavaScript單元測試框架。Jest源於Facebook兩年前的構想，用於快速、可靠地測試Web聊天應用。它吸引了公司內部的興趣，Facebook的一名軟件工程師Jeff Morrison半年前又重拾這個項目，改善它的性能，並將其開源。Jest的目標是減小開始測試一個項目所要花費的時間和認知負荷，所以它提供了大部分你須要的現成工具：快速的命令行接口、Mock工具集以及它的自動模塊Mock系統。此外，若是你在尋找隔離工具例如Mock庫，大部分其它工具將讓你在測試中（甚至常常在你的主代碼中）寫一些不盡如人意的樣板代碼，以使其生效。Jest與Jasmine框架的區別是在後者之上增長了一些層。最值得注意的是，運行測試時，Jest會自動模擬依賴。Jest自動爲每一個依賴的模塊生成Mock，並默認提供這些Mock，這樣就能夠很容易地隔離模塊的依賴。

爲何選擇Jest？

　　1. Jest 能夠利用其特有的快照測試功能，經過比對 UI 代碼生成的快照文件，實現對 React 等常見框架的自動測試。此外， Jest 的測試用例是並行執行的，並且只執行發生改變的文件所對應的測試，提高了測試速度

　　2.安裝配置簡單，很是容易上手，幾乎是零配置的，經過npm 命令安裝就能夠直接運行了

　　3. Jest 內置了測試覆蓋率工具istanbul，能夠經過命令開啓或者在 package.json 文件進行更詳細的配置。運行 istanbul 除了會再終端展現測試覆蓋率狀況，還會在項目下生產一個 coverage 目錄，內附一個測試覆蓋率的報告，讓咱們能夠清晰看到分支的代碼的測試狀況。

　　4. 集成了斷言庫，不須要再引入第三方的斷言庫，而且很是完美的支持React組件化測試。

Jest到底有多簡單呢？（讓代碼說話）

新建文件夾而後經過npm 命令安裝：

npm install --save-dev jest

或者經過yarn來安裝：

yarn add --dev jest

讓咱們來測試一個簡單兩個數字相加的function吧，新建 Sum.js

function sum(a, b){
   return a + b;
}

module.exports = sum;

而後新一個Sum.test.js的文件來測試咱們的sum function：

const sum = require('./Sum.js')

test('test 1 plus 2 result', () => {
  expect(sum(1 , 2)).toBe(3);
})


test('test 2 plus 2 should equal 4', () => {
  expect(sum(2 , 2)).toBe(4);
})

而後經過命令：jest Sum.test.js 運行一下測試，結果顯示以下：

項目結構很是簡單，node_modules中放的instal jest時候所依賴的包。

須要在package.json中加入下面配置：

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

能夠看到咱們的兩個test case都已經測試經過了，而且顯示了運行時間。就是這麼簡單，一個前端測試就寫完了。Jest還有不少吸引人的地方，好比：

Jest支持Babel，咱們將很輕鬆的使用ES6的高級語法

Jest支持webpack，很是方便的使用它來管理咱們的項目

Jest支持TypeScript

。。。。。。。

寫在最後：

關於Jest自己的其餘不少特性，咱們將在後續系列教程中一一闡述，敬請期待。