通過構建自己的JavaScript測試框架來了解JS測試

測試（單元或集成）是編程中非常重要的一部分。在當今的軟體開發中，單元/功能測試已成為軟體開發的組成部分。隨著Nodejs的出現，我們已經看到了許多超級JS測試框架的發布：Jasmine，Jest等。

單元測試框架

這有時也稱為隔離測試，它是測試獨立的小段代碼的實踐。如果你的測試使用某些外部資源（例如網絡或資料庫），則不是單元測試。

單元測試框架試圖以人類可讀的格式描述測試，以便非技術人員可以理解所測試的內容。然而，即使你是技術人員，BDD格式的閱讀測試也會使你更容易理解所發生的事情。

例如，如果我們要測試此功能：

function Helloworld() { return &39;;}

我們會像這樣寫一個jasmine測試規範：

describe(&39;, () => { ① it(&39;, () => { ② expect(helloWorld())③.toEqual(&39;); ④ });});

說明：

• ① describe(string, function) 函數定義了我們所謂的測試套件，它是各個測試規範的集合。
• ② it(string, function) 函數定義了一個單獨的測試規範，其中包含一個或多個測試期望。
• ③ 預計(實際)表達式就是我們所說的一個期望。它與匹配器一起描述應用程式中預期的行為片段。
• ④ matcher（預期）表達式就是我們所說的Matcher。如果傳入的期望值與傳遞給Expect函數的實際值不符，則將布爾值與規範進行布爾比較。

安裝和拆卸

有時候為了測試一個功能，我們需要進行一些設置，也許是創建一些測試對象。另外，完成測試後，我們可能需要執行一些清理活動，也許我們需要從硬碟驅動器中刪除一些文件。

這些活動稱為「設置和拆卸」（用於清理），Jasmine有一些功能可用來簡化此工作：

• beforeAll 這個函數在describe測試套件中的所有規範運行之前被調用一次。
• afterAll 在測試套件中的所有規範完成後，該函數將被調用一次。
• beforeEach 這個函數在每個測試規範之前被調用，it 函數已經運行。
• afterEach 在運行每個測試規範之後調用此函數。

在Node中的使用

在Node項目中，我們在與 src 文件夾相同目錄的 test 文件夾中定義單元測試文件：

node_prj src/ one.js two.js test/ one.spec.js two.spec.js package.json

該測試包含規格文件，這些規格文件是src文件夾中文件的單元測試，package.json 在 script 部分進行了 test。

{ ..., &34;: { &34;: &34; // or &34; }}

如果 npm run test 在命令行上運行，則jest測試框架將運行 test 文件夾中的所有規範文件，並在命令行上顯示結果。

現在，我們知道了期望和構建的內容，我們繼續創建自己的測試框架。我們的這個框架將基於Node，也就是說，它將在Node上運行測試，稍後將添加對瀏覽器的支持。

我們的測試框架將包含一個CLI部分，該部分將從命令行運行。第二部分將是測試框架的原始碼，它將位於lib文件夾中，這是框架的核心。

首先，我們首先創建一個Node項目。

mkdir kwuocd kwuonpm init -y

安裝chalk依賴項，我們將需要它來為測試結果上色：npm i chalk。

創建一個lib文件夾，其中將存放我們的文件。

mkdir lib

我們創建一個bin文件夾是因為我們的框架將用作Node CLI工具。

mkdir bin

首先創建CLI文件。

在bin文件夾中創建kwuo文件，並添加以下內容：

39;kwuo&39;../lib/cli/cli&39;Hello world&39;says hello&39;Hello world!&39;chalk&39;Test Suites&39;√&39;X&34;nnamdi&39;path&39;fs&39;./../&readdirSync 方法讀取「test」文件夾的內容並返回它們。

runTestFiles：它接受數組中的文件，使用 forEach 方法循環遍歷它們，並使用 require 方法運行每個文件。

kwuo文件夾結構如下所示：

測試我們的框架

我們已經完成了我們的測試框架，讓我們通過一個真實的Node項目對其進行測試。

我們創建一個Node項目：

mkdir examplesmkdir examples/mathcd examples/mathnpm init -y

創建一個src文件夾並添加add.js和sub.js

mkdir srctouch src/add.js src/sub.js

add.js和sub.js將包含以下內容：

// src/add.jsfunction add(a, b) { return a+b}module.exports = add// src/sub.jsfunction sub(a, b) { return a-b}module.exports = sub

我們創建一個測試文件夾和測試文件：

mkdir testtouch test/add.spec.js test/sub.spec.js

規範文件將分別測試add.js和sub.js中的add和sub函數

// test/sub.spec.jsconst sub = require(&39;)describe(&34;, () => { it(&34;, () => { expect(sub(2, 1)).toEqual(1) }) it(&34;, () => { expect(sub(3, 2)).toEqual(1) })})// test/add.spec.jsconst add = require(&39;)describe(&34;, () => { it(&34;, () => { expect(add(1, 2)).toEqual(3) }) it(&34;, () => { expect(add(2, 3)).toEqual(5) })})describe(&39;, () => { let expected; beforeEach(() => { expected = &34;; }); afterEach(() => { expected = &34;; }); it(&39;, () => { expect(add(&34;, &34;)) .toEqual(expected); });});

現在，我們將在package.json的「script」部分中運行「test」以運行我們的測試框架：

{ &34;: &34;, &34;: &34;, &34;: &34;, &34;: &34;, &34;: { &34;: &34; }, &34;: [], &34;: &34;, &34;: &34;}

我們在命令行上運行 npm run test，結果將是這樣的：

看，它給我們展示了統計數據，通過測試的總數，以及帶有「失敗」或「通過」標記的測試套件列表。看到通過的測試期望「add Hello + World」，它將返回「HelloWorld」，但我們期望返回「Hello」。如果我們糾正它並重新運行測試，所有測試都將通過。

// test/add.spec.js...describe(&39;, () => { let expected; beforeEach(() => { expected = &34;; }); afterEach(() => { expected = &34;; }); it(&39;, () => { expect(add(&34;, &34;)) .toEqual(expected); });});

看，我們的測試框架像Jest和Jasmine一樣工作。它僅在Node上運行，在下一篇文章中，我們將使其在瀏覽器上運行。

代碼在Github上

Github倉庫地址：philipszdavido/kwuoKwuo

你可以使用來自NPM的框架：

cd IN_YOUR_NODE_PROJECTnpm install kwuo -D

將package.json中的「test」更改為此：

{ ... &34;: { &34;: &34; ... }}

總結

我們建立了我們的測試框架，在這個過程中，我們學會了如何使用全局來設置函數和屬性在運行時任何地方可見。

我們看到了如何在項目中使用 describe、it、expect 和各種匹配函數來運行測試。下一次，你使用Jest或Jasmine，你會更有信心，因為現在你知道它們是如何工作的。

---

最近整理了一份優質視頻教程資源，想要的可以關注我然後私信「666」即可免費領取哦！如果文章對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。