jest-vue前端自動化測試實踐01—概念&環境搭建

2019 年 11 月 1 日
筆記

jest-vue前端自動化測試實踐01—概念&環境搭建

toc

Write By CS逍遙劍仙我的主頁: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: [email protected]本節程式碼地址 https://github.com/csxiaoyaojianxian/JavaScriptStudy 下的自動化測試目錄

1. 概念

1.1 前端自動化測試的意義

在日常的開發中，前端錯綜複雜的變化引發的bug往往令開發者頭疼，或多或少經歷過 修完東牆西牆倒 的經歷，此時前端自動化測試就顯得非常重要。前端的自動化測試無非也是編寫測試用例，在開發過程中和版本打包發布時執行跑通全部測試用例。如果是一個短平快的小項目，引入前端自動化測試，編寫測試用例，無疑只會增加開發成本，然而當項目擴大、迭代頻繁、邏輯複雜、需求反覆變更的情況下，回歸測試的成本是巨額的，自動化測試的優勢就能體現出來。

自動化測試的收益 = 迭代次數 * 全手動執行成本 - 首次自動化成本 - 維護次數 * 維護成本

儘早引入前端自動化測試不僅能夠減少項目 bug 出現概率(尤其是回歸測試中的 bug)，還能更好地進行程式碼組織，增強項目的可維護性，尤其對於工程品質較差的項目，收益是巨大的。

1.2 分類

前端自動化測試分兩類：TDD (Test-Driven Development) 測試驅動開發 和 BDD (Behavior Driven Development) 行為驅動開發。TDD 顧名思義，開發者根據需求先編寫測試用例，再逐步開發，最終滿足全部測試用例的需求。剛開始的時候，只有測試用例，未進行功能開發，執行測試用例，滿屏是紅色的測試用例不通過提示，隨著測試用例被滿足變綠，最終全部變綠，功能開發完成，因此前端自動化測試也被叫做 Red-Green Development。

1.2.1 TDD (Test-Driven Development) 測試驅動開發

TDD 先寫測試再寫程式碼，單位是模組，多用於 單元測試
重點在測試程式碼，屬於 白盒測試
測試內容是模組，速度快，但是忽略模組間依賴，安全感低

TDD 有以下優勢：

長期減少回歸BUG
程式碼品質會更好（組織、可維護性）
測試覆蓋率高

1.2.2 BDD (Behavior Driven Development) 行為驅動開發

BDD 先寫程式碼再寫測試，測試單位是功能，多用於 集成測試
重點在測試 UI（DOM）功能，屬於 黑盒測試
測試內容是整套操作流程，速度慢，往往需要多個模組配合，安全感高

1.3 工具選擇

前端近幾年湧現出很多優秀的測試工具：

karma – Google Angular團隊開發的測試運行平台，配置簡單靈活，能夠很方便在多個真實瀏覽器中運行測試
mocha – 很優秀的測試框架，有完善的生態系統，簡單的測試組織方式，不對斷言庫和工具做任何限制，非常靈活
jest – facebook出品的大而全的測試框架，React官方推薦的單元測試框架，配置簡單運行速度快

還有很多其他的前端測試框架，但大同小異，無非是對斷言和測試樁等工具的集成度不同，論成熟度首推 mocha，論效率首推 jest。

jest是 Facebook 開源的 JavaScript 測試框架，它自動集成了斷言、JsDom、覆蓋率報告等開發者所需要的所有測試工具，是一款幾乎零配置的測試框架，而且速度很快，此處選擇 jest 作為測試工具。

2. jest 環境搭建

2.1 jest 安裝

jest 需要自動運行測試腳本，node 環境是必不可少的，如果從頭搭建，首先得初始化項目 package.json 並安裝 jest：

$ npm init  $ npm install jest -D

jest 默認不支援 es6，需要使用 babel 來支援 es6，安裝 babel：

$ npm install @babel/core @babel/preset-env -D

配置 babel，修改 .babelrc 文件

{      "presets": [          ["@babel/preset-env", {              "targets": {                  "node": "current"              }          }]      ]  }

2.2 jest 初始化

安裝完 jest 以後，初始化 jest 並根據需要修改根目錄下生成的配置文件 jest.config.js

$ npx jest --init

修改 package.json 中的 scripts，添加執行指令

(1) 普通執行測試，即 $ npx jest

{  	"test": "jest"  }

(2) 生成覆蓋率報告，即 $ npx jest —coverage

{  	"coverage": "jest --coverage"  }

(3) 持續監聽變化，默認 o 模式

{  	"test": "jest --watch"  }

(4) 持續監聽所有文件變化

{  	"test": "jest --watchAll"  }

2.3 編寫測試用例

先寫一個功能模組 init.js

function add (a, b) { return a + b; }  function minus (a, b) { return a - b; }  function multi (a, b) { return a * b; }  module.exports = { add, minus, multi }

編寫對應測試用例文件 init.test.js

const math = require('./init.js');  const {add, minus, multi} = math;  // 斷言  test('測試加法 3 + 7', () => { expect(add(3, 7)).toBe(10); })  test('測試減法 3 - 3', () => { expect(minus(3, 3)).toBe(0); })  test('測試乘法 3 * 3', () => { expect(multi(3, 3)).toBe(9); })

執行測試，並在控制台觀察結果

$ npm run test  $ npm run coverage

3. vue-cli 中使用 jest

現實項目中，往往不會從零搭建 jest 項目，更多的情況是，需要在一個腳手架已經搭建好的項目中引入自動化測試，此處在 vue-cli 基礎上修改 jest 配置，安裝好 jest 後需要修改項目根目錄下的配置文件 jest.config.js，重點關注 testMatch 和 testPathIgnorePatterns 兩個屬性，testMatch 指定了匹配的測試用例文件的路徑，而 testPathIgnorePatterns 則可以忽略指定文件，因此使用兩個屬性可以精確匹配到項目中所有的測試用例。

module.exports = {    ...    testMatch: [      '**/__tests__/**/*.(js|jsx|ts|tsx)'    ],    testPathIgnorePatterns: [      '.eslintrc.js'    ],    testURL: 'http://localhost/'  }

最後還需要在 package.json 中添加測試指令

{  	"test:unit": "vue-cli-service test:unit --watch"  }

執行對應指令即可在項目中執行測試

$ npm run test:unit