前端單元測試之小試牛刀

   兩年前觀摩大神短短几十行代碼代替了本來幾百行的冗餘代碼，驚訝的心情到如今記憶猶新，大神說是由於使用了單元測試。我當時真是弱的很，看了半天也沒有看懂大神的代碼，更遑論理解單元測試的應用，內心暗暗地對單元測試產生了一些想法，後經週轉一直沒有機會實施。如今，終於有點點空檔，找到相關教程，躍躍欲試。

  個人參考文檔詳見https://www.w3ctech.com/topic/2172。

  首先須要安裝相關依賴：

• NodeJS - 正常前端項目應該都有用到，因此你們應該都有
• Jest - 是我學習的教程裏使用的單元測試庫

  以上依賴安裝流程你們自行百度。

  在確保node版本 》= 6.x以後新建一個測試項目目錄，好比my-first-test-projsect。接着初始化該項目：npm init --yes，最後安裝Jest。

  準備工做作好了，能夠開始編寫本身的第一個單元測試了。

  定義一個簡單的函數做爲要測試的代碼

  教程中定義的sum.js以下：

module.export = function sum (a, b) {
    return a + b;
}

但是我實際操做測試時報錯TypeError: sum is not a function，改成以下則能正確測試，這又是另一個值得思考的問題了，有興趣能夠自行查閱相關緣由，相信做者是筆誤。

module.exports = function sum (a, b) {
    return a + b;
}

編寫測試文件

如今要進入正題了，準備編寫測試Spec文件。一般寫在要測試的代碼文件旁，如sum.spec.js。

（Jest和其餘測試框架將測試組織到測試用例中，爲了簡單管理和記錄，每一個測試用例包含多個單獨的測試）。

sum.spec.js編寫以下：

const sum = require('./sum.js');
describe('sum suite', function() {
  test('should add 2 positive numbers together and return the result', function() {
    expect(sum(1, 2)).toBe(3);
  })
})

第一行const sum = require('./sum.js');很好理解，就是引入了sum.js。後面的語句相對生澀，找幾個不太懂的詞語好比describe/test/expect/toBe。

Jest做爲全局變量，提供了 describe 、test 、 expect 和一些其餘函數，所以你無需導入他們

describe即定義了測試單元，test(...)便是咱們添加的第一個單元測試。

expect(sum(1,2)).toBe(3)是單元測試的構建塊，被稱爲「斷言（assertion）」

toBe 被稱做爲「匹配器（matcher）」。在 Jest 裏有不少的匹配器，每個匹配器都有助於驗證一個特定的方面：好比測試對象是否相等等。

運行單元測試

更改package.json裏面的內容，從而使用npm腳本運行測試

"scripts": {
    "test": "jest"
 }

運行 npm run test，你將會看到成功的輸出。第一個單元測試就OK啦