單元測試 即Unit Testing,簡稱 UT,是指對軟件中的最小可測試單元進行檢查和驗證,這是*低級別的測試活動,前端開發(fā)中單元可以是一個function也可以是一個class,也可以是一個組件。 對他們的輸出做斷言檢查,是一個白盒測試,一般由開發(fā)者進行編寫,開發(fā)者可以通過編寫執(zhí)行 UT 來判斷自己的邏輯是否正確。 集成測試 Integration Testing,其實集成測試就是根據(jù)業(yè)務(wù)功能需要把多個單元整合起來進行測試。 引用 React 官網(wǎng)上的說法:“單元測試”和“集成測試”之間的差別可能會很模糊。 如果你在測試一個表單,用例是否應(yīng)該也測試表單里的按鈕呢?一個按鈕組件又需不需要有他自己的測試套件?重構(gòu)按鈕組件是否應(yīng)該影響表單的測試用例?不同的團隊或產(chǎn)品可能會得出不同的答案。 端到端測試 end-to-end,簡稱 e2e,也被稱作功能測試(Functional Testing)或者瀏覽器測試或者冒煙測試,是指從使用者的角度出發(fā),對真實系統(tǒng)進行測試。 e2e測試本質(zhì)上是一種黑盒測試,相當(dāng)于模擬用戶訪問應(yīng)用程序,主要檢查界面或功能是否正確,自動化測試不完善的時候通常是由人工來完成這項測試工作。 界面測試 User Interface Testing,簡稱 UI 測試,與 e2e 測試存在大量重疊,通常在做 e2e 的時候就能夠覆蓋 UI 測試。 TDD Test Drive Development 即測試驅(qū)動開發(fā)。 簡單的說就是先根據(jù)需求寫測試用例,再代碼實現(xiàn),接著測試,循環(huán)此過程直到產(chǎn)品的實現(xiàn)。 可以看出來,TDD的基本思路就是通過測試來推動整個開發(fā)的進行,但測試驅(qū)動開發(fā)并不只是單純的測試工作,而是把需求分析、設(shè)計、質(zhì)量控制量化的過程。 BDD Behavior Drive Development即行為驅(qū)動開發(fā),BDD 可以看作是對 TDD 的一種補充,或者說是 TDD 的一個分支。 在 TDD 中,我們并不能完全保證根據(jù)設(shè)計所編寫的測試就是用戶所期望的功能。BDD 將這一部分簡單和自然化,用自然語言來描述,讓開發(fā)、測試、BA 以及客戶都能在這個基礎(chǔ)上達成一致。 BDD 更加依賴于需求行為和文檔來驅(qū)動開發(fā),這些文檔的描述跟測試代碼很相似。e2e 測試更多是和 BDD 的開發(fā)模式進行結(jié)合。 綜上所述,后文主要會針對單元測試和端到端測試常用的工具進行使用說明和對比。
前端測試工具有很多,可以分為幾類: 斷言庫 測試覆蓋率工具 測試框架 斷言庫 測試的時候我們需要使用斷言來判斷代碼是否到達目的,如果沒有斷言,我們的測試也將失去意義。
assert assert 是 Node.JS 內(nèi)置的斷言庫,下面是一個簡單的例子: const assert 'assert' ); assert ( 1 2 ); const 'hello world' ; assert .strictEqual( 'helloworld' (左右滑動查看完整代碼)
chai 這個斷言庫很全很強大,提供了常用的 assert、should、expect 斷言關(guān)鍵字。
https://mmbiz.qpic.cn/mmbiz_png/BuV4gXrNvFpz7OkR8H9LSKVmTx126AILrVT0x2WOyQkc5TWrb0zFicGV7mPib6ibH8X6ju4UmnPMVic52JHDPDXEfA/640?wx_fmt=png
power-assert 如果你在使用assert的話,無需使用require('power-assert')來引入power-assert,它的API與assert一樣,而且擁有強大的提示信息,如下圖所示。
(左右滑動查看完整代碼) 安裝: npmipower- assert (左右滑動查看完整代碼) 測試覆蓋率工具
Istanbul 這個軟件以土耳其*大城市伊斯坦布爾命名,因為土耳其地毯世界聞名,而地毯是用來覆蓋的。 安裝: npm install-gistanbul (左右滑動查看完整代碼) 運行: istanbul coverpath (左右滑動查看完整代碼) 測試框架 測試框架的作用是提供一些方便的語法來描述測試用例,比如可以對一組用例進預(yù)處理和后處理(beforeAll、beforeEach、afterAll、afterEach等),使用 describe函數(shù)表示一組用例,下面將會列舉一些常見的測試框架,并做簡單的分析。
Jest Jest 是Facebook出品的一個測試框架,算是一個大而全的測試框架,內(nèi)置斷言、測試覆蓋率工具、Mock工具,開箱即用,支持瀏覽器和 NodeJS,支持BDD寫法(也就是expect語法)是React官方推薦使用的測試框架。 Jest既可以用來做單元測試,也可以用來做端到端測試,在做端到端測試的時候可以使用jsdom,網(wǎng)絡(luò)請求使用本地mock數(shù)據(jù),這樣可以確保毫秒級完成單元測試,如果需要使用真實DOM,還是需要配合其它測試工具。
Mocha Macha也是一個功能豐富的JS測試框架,支持瀏覽器和 NodeJS,不過沒有內(nèi)置斷言庫、測試覆蓋率工具和Mock工具,需要和其他三方庫配合使用,比如配合chai使用 就可以支持TDD寫法(也就是assert.equal語法),當(dāng)然 BDD 寫法也是支持的。 Mocha既可以用來做單元測試,也可以用來做端到端測試,做端到端測試的時候需要配合其它測試工具。
Jasmine Jasmine 是一個BDD 測試框架,支持瀏覽器和NodeJS 、內(nèi)置斷言庫、mock 工具等,經(jīng)常配合Karam使用,但是隨著Jest這種大而全的框架的崛起,Jasmine顯得比較老派,現(xiàn)在熱度逐年下降,使用的人也越來越少。 e2e測試工具
Cypress Cypress是一個e2e測試框架,測試界面和文檔做到的一個產(chǎn)品。
PhantomJS PhantomJS,一個基于 webkit 內(nèi)核的無頭瀏覽器,沒有 UI 界面。用js代碼模擬一些web界面上的操作,用起來比較不方便,不太推薦使用。
NightmareJS NightmareJS,一個輕量級瀏覽器自動化測試庫?;贓lectron,和PhantomJS類似,但是快了大約2倍且更現(xiàn)代。 Nightmare還有個優(yōu)點——它提供了一個Chrome插件 daydream,該插件可以通過錄制屏幕,自動化生成測試代碼,不過最近一次更新是在2019年,也不太推薦使用。
Playwright Playwright為現(xiàn)代web應(yīng)用程序提供可靠的端到端測試。支持使用NodeJS、python、Java、.net四種編程語言的 API,同時支持Google Chrome和Microsoft Edge(帶有Chromium)、Apple Safari(帶有WebKit)和 Mozilla Firefox。 Playwright支持所有瀏覽器和所有平臺的無頭(無瀏覽器 UI)和有頭(帶瀏覽器 UI)模式。Headed非常適合調(diào)試,而Headless速度更快,適合CI/云執(zhí)行。
Storybook Storybook 是一個開源工具,用于獨立構(gòu)建 UI 組件和頁面,它簡化了 UI 開發(fā)、測試和文檔編制。
Selenium Selenium是e2e測試鼻祖級的框架,有多種編程語言的版本,它是基于webdriver而不是webkit內(nèi)核實現(xiàn)的,所以,Selenium的瀏覽器兼容性相對于其他瀏覽器要好很多。
Nightwatch Nightwatch原Selenium,是一個用于web網(wǎng)站或應(yīng)用的自動化測試框架,使用node.js和W3C WebDriver API。 他也是一個完整和集成的解決方案,使用 BDD 方式,用于網(wǎng)絡(luò)應(yīng)用程序和網(wǎng)站的端到端測試。它還可用于Node.js 單元和集成測試。 Nightwatch 的兼容性比較好,F(xiàn)irefox、Chrome、Safari、edge都可以測。
Protractor Protractor是一個針對Angular的e2e測試框架。 測試框架運行環(huán)境
Karam Karam官網(wǎng)介紹是一個可以在多個瀏覽器中執(zhí)行 js 代碼的簡單工具。它不是一個完整的測試框架,沒有斷言庫,只是啟動了一個 http 服務(wù)器,然后生成測試 html 文件,執(zhí)行測試用例的 js。 嚴格來講Karam其實不算是一個測試框架,而是一個運行測試框架的環(huán)境。
Puppeteer 既然是瀏覽器,那么我們手工可以在瀏覽器上做的事情Puppeteer都能勝任,另外,Puppeteer 翻譯成中文是”木偶”意思,所以聽名字就知道,操縱起來很方便。 配合headless-recorder,一個Chrome插件,可以對操作進行錄制,錄制的操作有puppeteer和playwright兩個版本。 其它測試工具
AVA AVA是Node.JS的測試工具,具有簡潔的API、詳細的錯誤輸出、支持新語法以及流程隔離。
鏈接: https://juejin.cn/post/6978852736976551950 本文為經(jīng)授權(quán)轉(zhuǎn)載,轉(zhuǎn)載文章所包含的文字來源于原作者。如因內(nèi)容或版權(quán)等問題,請聯(lián)系刪除
點擊下方 “閱讀原文” ,了解 職業(yè)新風(fēng)向~