系列教程:
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本身的其他很多特性,我們將在后續系列教程中一一闡述,敬請期待。