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

單元測試框架

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

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

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

function helloWorld() { 
  return 'Hello world!'; 
} 

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

describe('Hello world', () => { ① 
  it('says hello', () => { ② 
      expect(helloWorld())③.toEqual('Hello world!'); ④ 
  }); 
}); 

說明：

describe(string, function) 
it(string, function) 

安裝和拆卸

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

這些活動稱為“設置和拆卸”（用于清理），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 。

{ 
  ..., 
  "script": { 
      "test": "jest" // or "jasmine" 
    } 
} 

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

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

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

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

mkdir kwuo 
cd kwuo 
npm init -y 

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

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

mkdir lib 

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

mkdir bin 

首先創建CLI文件。

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

#!/usr/bin/env node 
 
process.title = 'kwuo' 
require('../lib/cli/cli') 

我們將hashbang設置為指向 /usr/bin/env node，這樣就可以在不使用node命令的情況下運行該文件。

我們將process的標題設置為“kwuo”，并要求文件“lib/cli/cli”，這樣就會調用文件cli.js，從而啟動整個測試過程。

現在，我們創建“lib/cli/cli.js”并填充它。

mkdir lib/cli 
touch lib/cli/cli.js 

該文件將搜索測試文件夾，在“test”文件夾中獲取所有測試文件，然后運行測試文件。

在實現“lib/cli/cli.js”之前，我們需要設置全局變量。

測試文件中使用了describe，beforeEach，beforeEach，afterAll，beforeAll函數：

describe('Hello world', () => {  
  it('says hello', () => {  
    expect(helloWorld()).toEqual('Hello world!'); 
  }); 
}); 

但是在測試文件中都沒有定義。沒有ReferenceError的情況下文件和函數如何運行？因為測試框架在運行測試文件之前，會先實現這些函數，并將其設置為globals，所以測試文件調用測試框架已經設置好的函數不會出錯。而且，這使測試框架能夠收集測試結果并顯示失敗或通過的結果。

讓我們在lib文件夾中創建一個 index.js 文件：

touch lib/index.js 

在這里，我們將設置全局變量并實現 describe ， it ， expectEach ， beforeEach ， afterAll ， beforeAll 函數。

// lib/index.js 
 
const chalk = require('chalk') 
const log = console.log 
var beforeEachs = [] 
var afterEachs = [] 
var afterAlls = [] 
var beforeAlls = [] 
var Totaltests = 0 
var passedTests = 0 
var failedTests = 0 
var stats = [] 
var currDesc = { 
  it: [] 
} 
 
var currIt = {} 
 
function beforeEach(fn) { 
  beforeEachs.push(fn) 
} 
 
function afterEach(fn) { 
  afterEachs.push(fn) 
} 
 
function beforeAll(fn) { 
  beforeAlls.push(fn) 
} 
 
function afterAll(fn) { 
  afterAlls.push(fn) 
} 
 
function expect(value) { 
  return { 
 
    // Match or Asserts that expected and actual objects are same. 
    toBe: function(expected) { 
      if (value === expected) { 
        currIt.expects.push({ name: `expect ${value} toBe ${expected}`, status: true }) 
        passedTests++ 
      } else { 
        currIt.expects.push({ name: `expect ${value} toBe ${expected}`, status: false }) 
        failedTests++ 
      } 
    }, 
 
    // Match the expected and actual result of the test. 
    toEqual: function(expected) { 
      if (value == expected) { 
        currIt.expects.push({ name: `expect ${value} toEqual ${expected}`, status: true }) 
        passedTests++ 
      } else { 
        currIt.expects.push({ name: `expect ${value} toEqual ${expected}`, status: false }) 
        failedTests++ 
      } 
    } 
  } 
} 
 
function it(desc, fn) { 
  Totaltests++ 
  if (beforeEachs) { 
    for (var index = 0; index < beforeEachs.length; index++) { 
      beforeEachs[index].apply(this) 
    } 
  } 
  //var f = stats[stats.length - 1] 
  currIt = { 
    name: desc, 
    expects: [] 
  } 
  //f.push(desc) 
  fn.apply(this) 
  for (var index = 0; index < afterEachs.length; index++) { 
    afterEachs[index].apply(this) 
  } 
  currDesc.it.push(currIt) 
} 
 
function describe(desc, fn) { 
  currDesc = { 
    it: [] 
  } 
  for (var index = 0; index < beforeAlls.length; index++) { 
    beforeAlls[index].apply(this) 
  } 
  currDesc.name = desc 
  fn.apply(this) 
  for (var index = 0; index < afterAlls.length; index++) { 
    afterAlls[index].apply(this) 
  } 
  stats.push(currDesc) 
} 
 
exports.showTestsResults = function showTestsResults() { 
    console.log(`Total Test: ${Totaltests}     
Test Suites: passed, total 
Tests: ${passedTests} passed, ${Totaltests} total 
`) 
  const logTitle = failedTests > 0 ? chalk.bgRed : chalk.bgGreen 
  log(logTitle('Test Suites')) 
  for (var index = 0; index < stats.length; index++) { 
    var e = stats[index]; 
    const descName = e.name 
    const its = e.it 
    log(descName) 
    for (var i = 0; i < its.length; i++) { 
      var _e = its[i]; 
      log(`   ${_e.name}`) 
      for (var ii = 0; ii < _e.expects.length; ii++) { 
        const expect = _e.expects[ii] 
        log(`      ${expect.status === true ? chalk.green('√') : chalk.red('X') } ${expect.name}`) 
      } 
    } 
    log() 
  } 
} 
 
global.describe = describe 
global.it = it 
global.expect = expect 
global.afterEach = afterEach 
global.beforeEach = beforeEach 
global.beforeAll = beforeAll 
global.afterAll = afterAll 

在開始的時候，我們需要使用chalk庫，因為我們要用它來把失敗的測試寫成紅色，把通過的測試寫成綠色。我們將 console.log 縮短為 log。

接下來，我們設置beforeEachs，afterEachs，afterAlls，beforeAlls的數組。beforeEachs將保存在它所附加的 it 函數開始時調用的函數；afterEachs將在它所附加的 it 函數的末尾調用；beforeEachs和afterEachs分別在 describe 函數的開始和結尾處調用。

我們設置了 Totaltests 來保存運行的測試數量， passTests 保存已通過的測試數， failedTests 保存失敗的測試數。

stats 收集每個describe函數的stats， curDesc 指定當前運行的describe函數來幫助收集測試數據， currIt 保留當前正在執行的 it 函數，以幫助收集測試數據。

我們設置了beforeEach、afterEach、beforeAll和afterAll函數，它們將函數參數推入相應的數組，afterAll推入afterAlls數組，beforeEach推入beforeEachs數組，等等。

接下來是expect函數，此函數進行測試：

expect(56).toBe(56) // 經過測試56預期會是56 
expect(func()).toEqual("nnamdi") // 該函數將返回一個等于“nnamdi”的字符串 

expect 函數接受一個要測試的參數，并返回一個包含匹配器函數的對象。在這里，它返回一個具有 toBe 和 toEqual 函數的對象，它們具有期望參數，用于與expect函數提供的value參數匹配。 toBe 使用 === 將value參數與期望參數匹配， toEqual 使用 == 測試期望值。如果測試通過或失敗，則這些函數將遞增 passedTests 和 failedTests 變量，并且還將統計信息記錄在currIt變量中。

我們目前只有兩個matcher函數，還有很多：

• toThrow
• toBeNull
• toBeFalsy
• etc

你可以搜索它們并實現它們。

接下來，我們有 it 函數， desc 參數保存測試的描述名稱，而 fn 保存函數。它先對beforeEachs進行fun，設置統計，調用 fn 函數，再調用afterEachs。

describe 函數的作用和 it 一樣，但在開始和結束時調用 beforeAlls 和 afterAlls 。

showTestsResults 函數通過 stats 數組進行解析，并在終端上打印通過和失敗的測試。

我們實現了這里的所有函數，并將它們都設置為全局對象，這樣才使得測試文件調用它們時不會出錯。

回到“lib/cli/cli.js”：

// lib/cli/cli.js 
const path = require('path') 
const fs = require('fs') 
const { showTestsResults } = require('./../') 

首先，它從“lib/index”導入函數 showTestsResult ，該函數將在終端顯示運行測試文件的結果。另外，導入此文件將設置全局變量。

讓我們繼續：

run 函數是這里的主要函數，這里調用它，可以引導整個過程。它搜索 test 文件夾 searchTestFolder ，然后在數組 getTestFiles 中獲取測試文件，它循環遍歷測試文件數組并運行它們 runTestFiles 。

• searchTestFolder ：使用 fs＃existSync 方法檢查項目中是否存在“test/”文件夾。
• getTestFiles ：此函數使用 fs#readdirSync 方法讀取“test”文件夾的內容并返回它們。
• runTestFiles ：它接受數組中的文件，使用 forEach 方法循環遍歷它們，并使用 require方法運行每個文件。

kwuo文件夾結構如下所示：

測試我們的框架

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

我們創建一個Node項目：

mkdir examples 
mkdir examples/math 
cd examples/math 
npm init -y 

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

mkdir src 
touch src/add.js src/sub.js 

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

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

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

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

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

// test/sub.spec.js 
const sub = require('../src/sub') 
describe("Subtract numbers", () => { 
  it("should subtract 1 from 2", () => { 
    expect(sub(2, 1)).toEqual(1) 
  }) 
   
  it("should subtract 2 from 3", () => { 
    expect(sub(3, 2)).toEqual(1) 
  }) 
}) 
 
// test/add.spec.js 
const add = require('../src/add') 
describe("Add numbers", () => { 
  it("should add 1 to 2", () => { 
    expect(add(1, 2)).toEqual(3) 
  }) 
   
  it("should add 2 to 3", () => { 
    expect(add(2, 3)).toEqual(5) 
  }) 
}) 
describe('Concat Strings', () => { 
  let expected; 
  beforeEach(() => { 
    expected = "Hello"; 
  }); 
   
  afterEach(() => { 
    expected = ""; 
  }); 
   
  it('add Hello + World', () => { 
    expect(add("Hello", "World")) 
      .toEqual(expected); 
  }); 
}); 

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

{ 
  "name": "math", 
  "version": "1.0.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "test": "kwuo" 
  }, 
  "keywords": [], 
  "author": "Chidume Nnamdi <kurtwanger40@gmail.com>", 
  "license": "ISC" 
} 

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

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

// test/add.spec.js 
... 
describe('Concat Strings', () => { 
  let expected; 
  beforeEach(() => { 
    expected = "Hello"; 
  }); 
   
  afterEach(() => { 
    expected = ""; 
  }); 
   
  it('add Hello + World', () => { 
    expect(add("Hello", "")) 
      .toEqual(expected); 
  }); 
}); 

 

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

代碼在Github上

Github倉庫地址： philipszdavido/kwuoKwuo

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

cd IN_YOUR_NODE_PROJECT 
npm install kwuo -D 

將package.json中的“test”更改為此：

{ 
  ... 
  "scripts": { 
    "test": "kwuo" 
    ... 
  } 
} 

總結

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

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