前端自動化測試框架 Jest

目前業界裏比較主流的前端自動化框架有： Jasmine, Mocha, Jest.

Jest 在性能、功能、易用性綜合來說是比較好的。

正在看的 vue-loader 源碼也使用 Jest 框架進行測試。就先來學習一下Jest 的使用吧！

使用Jest ，我們先來創建一個項目。（新建一個目錄，進入 並使用 npm init -y 初始化項目）

先來安裝Jest 到項目 (使用版本24.8.0)

npm install [email protected] --save-dev

然後我們在項目中加入之前寫的 math.js 文件，作爲我們要測試的代碼。

function add (a, b) {
    return a + b
}

function minus (a, b) {
    return a-b
}

function multi (a, b) {
    return a * b
}

module.exports = {
    add,
    minus,
    multi
}

然後在項目中加入math.test.js ，這裏我們就使用Jest 來寫測試代碼，Jest 中提供了test 與 expect 函數。

const mathUtil = require('./math.js')
const { add, minus, multi } = mathUtil

test('測試加法', () => {
    expect(add(1,9)).toBe(10)
})

test('測試減法', () => {
    expect(minus(9,1)).toBe(8)
})

test('測試乘法', () => {
    expect(multi(9,2)).toBe(18)
})

好，下面我們去配置運行這個測試腳本。

在package.json 中增加一個script 配置，如下。

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

 jest 命令，實際上會去尋找目錄中以 'test.js' 結尾，並運行這些文件（使用的jest默認配置）。

如下