前端自動化測試實踐01—持續集成之jest自動化測試環境搭建
文章目錄
Write By CS逍遙劍仙
我的主頁: www.csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: [email protected]
本節代碼地址 https://github.com/csxiaoyaojianxian/JavaScriptStudy 下的自動化測試目錄
1. 概念
1.1 持續集成&持續交付&持續部署
在互聯網時代軟件從開發到上線，後續迭代更新，已經形成了一套近乎標準的流程，其中最重要的流程就是持續集成(Continuous integration，簡稱CI)。"持續"的核心思想在於：在事先難以完全瞭解完整正確的需求時，乾脆把大項目分割成小塊完成，並加快交付的速度和頻率，使其儘早在下個環節得到驗證，若發現問題能夠儘早返工。
對於持續集成、持續交付和持續部署三個從敏捷思想中提出的概念，此處舉個在知乎上看到的很形象例子：裝修廚房，鋪地磚時邊角地磚要切割大小，如果一次全切割完再鋪上去，發現尺寸有誤時的浪費和返工成本就大了，不如切一塊鋪一塊，這就是持續集成；裝修廚房有很多部分，每個部分都有檢測手段，如地磚鋪完了要測試漏水與否，線路鋪完了要通電測試電路通順，水管裝好了也要測試冷水熱水，如果等全部裝完了再測，出現問題可能會互相影響，比如電路不行可能要把地磚給挖開，如果每完成一部分就測試，這是持續部署；全部裝修完了等待驗收，客戶發現地磚顏色不合意，水池太小，竈臺位置不對，返工嗎？所以不如每完成一部分就試用驗收，這就是持續交付。這三個概念強調在軟件開發過程中，通過技術手段自動化這三個工作，加快交付速度。
具體來說，持續集成是一種軟件開發實踐，強調開發人員在提交新代碼後立刻進行構建、自動化測試等，頻繁自動將代碼集成到主幹和生產環境，降低一次性集成過多代碼帶來的風險。
持續交付在持續集成的基礎上，將集成後的代碼部署到更貼近真實運行環境的"類生產環境"中。比如把完成單元測試的代碼部署包含完整功能的預發佈環境中運行更多更完整的集成測試，甚至是人工測試，通過後繼續手動部署到生產環境中。
持續部署則是在持續交付的基礎上，把部署到生產環境的過程自動化。
1.2 持續集成 & 前端自動化測試
持續集成是互聯網軟件開發上線流程中的核心一環，在1.1節介紹中也不難看出，自動化測試是持續集成得以實現的核心步驟，缺乏了自動化測試，持續集成自然無從談起。
在日常的開發中，前端錯綜複雜的變化引發的bug往往令開發者頭疼，或多或少經歷過 修完東牆西牆倒 的經歷，此時前端自動化測試就顯得非常重要。前端的自動化測試無非也是編寫測試用例，在持續集成時執行跑通全部測試用例。如果是一個短平快的小項目，引入前端自動化測試，編寫測試用例，無疑只會增加開發成本，然而當項目擴大、迭代頻繁、邏輯複雜、需求反覆變更的情況下，迴歸測試的成本是鉅額的，自動化測試的優勢就能體現出來。
自動化測試的收益 = 迭代次數 * 全手動執行成本 - 首次自動化成本 - 維護次數 * 維護成本
儘早引入前端自動化測試不僅能夠減少項目 bug 出現概率(尤其是迴歸測試中的 bug)，還能更好地進行代碼組織，增強項目的可維護性，尤其對於工程質量較差的項目，收益是巨大的；如果將其應用於持續集成中，commit 觸發自動執行測試腳本，還能大幅提升團隊的開發效率。
1.2 分類
前端自動化測試可以按照開發模式分兩類：TDD (Test-Driven Development) 測試驅動開發、BDD (Behavior Driven Development) 行爲驅動開發。TDD 顧名思義，開發者根據需求先編寫測試用例，再逐步開發，最終滿足全部測試用例的需求。剛開始的時候，只有測試用例，未進行功能開發，執行測試用例，滿屏是紅色的測試用例不通過提示，隨着測試用例被滿足變綠，最終全部變綠，功能開發完成，因此前端自動化測試也被叫做 Red-Green Development。測試還可以按照用例粒度分爲 單元測試 (Unit Test)、集成測試 (Integration Test)、端到端測試 (End to End Test)。
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
