【自動化測試】前端測試框架 Jest

本文轉載自查看原文 2017-12-01 11:24 1592 自動化測試/ 持續集成

本文首發於：美團點評點餐，歡迎關注我們團隊

摘自：https://zhuanlan.zhihu.com/p/28247899

前端測試工具一覽

前端測試工具也和前端的框架一樣紛繁復雜，其中常見的測試工具，大致可分為測試框架、斷言庫、測試覆蓋率工具等幾類。在正式開始本文之前，我們先來大致了解下它們：

測試框架

測試框架的作用是提供一些方便的語法來描述測試用例，以及對用例進行分組。

測試框架可分為兩種： TDD （測試驅動開發）和 BDD （行為驅動開發），我理解兩者間的區別主要是一些語法上的不同，其中 BDD 提供了提供了可讀性更好的用例語法，至於詳細的區別可參見 The Difference Between TDD and BDD 一文。

常見的測試框架有 Jasmine, Mocha 以及本文要介紹的 Jest 。

斷言庫

斷言庫主要提供語義化方法，用於對參與測試的值做各種各樣的判斷。這些語義化方法會返回測試的結果，要么成功、要么失敗。常見的斷言庫有 Should.js, Chai.js 等。

測試覆蓋率工具

用於統計測試用例對代碼的測試情況，生成相應的報表，比如 istanbul 。

Jest

為什么選擇 Jest

Jest 是 Facebook 出品的一個測試框架，相對其他測試框架，其一大特點就是就是內置了常用的測試工具，比如自帶斷言、測試覆蓋率工具，實現了開箱即用。

而作為一個面向前端的測試框架， Jest 可以利用其特有的快照測試功能，通過比對 UI 代碼生成的快照文件，實現對 React 等常見框架的自動測試。

此外， Jest 的測試用例是並行執行的，而且只執行發生改變的文件所對應的測試，提升了測試速度。目前在 Github 上其 star 數已經破萬；而除了 Facebook 外，業內其他公司也開始從其它測試框架轉向 Jest ，比如 Airbnb 的嘗試，相信未來 Jest 的發展趨勢仍會比較迅猛。

安裝

Jest 可以通過 npm 或 yarn 進行安裝。以 npm 為例，既可用npm install -g jest進行全局安裝；也可以只局部安裝、並在 package.json 中指定 test 腳本：

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

Jest 的測試腳本名形如*.test.js，不論 Jest 是全局運行還是通過npm test運行，它都會執行當前目錄下所有的*.test.js 或 *.spec.js 文件、完成測試。

基本使用

用例的表示

表示測試用例是一個測試框架提供的最基本的 API ， Jest 內部使用了 Jasmine 2 來進行測試，故其用例語法與 Jasmine 相同。test()函數來描述一個測試用例，舉個簡單的例子：

// hello.js
module.exports = () => 'Hello world'

// hello.test.js
let hello = require('hello.js')

test('should get "Hello world"', () => {
    expect(hello()).toBe('Hello world') // 測試成功
// expect(hello()).toBe('Hello') // 測試失敗
})

其中toBe('Hello world')便是一句斷言（ Jest 管它叫 “matcher” ，想了解更多 matcher 請參考文檔）。寫完了用例，運行在項目目錄下執行npm test，即可看到測試結果：

若測試失敗，會標識出失敗的斷言位置，結果如下：

用例的預處理或后處理

有時我們想在測試開始之前進行下環境的檢查、或者在測試結束之后作一些清理操作，這就需要對用例進行預處理或后處理。對測試文件中所有的用例進行統一的預處理，可以使用 beforeAll() 函數；而如果想在每個用例開始前進行都預處理，則可使用 beforeEach() 函數。至於后處理，也有對應的 afterAll() 和 afterEach() 函數。

如果只是想對某幾個用例進行同樣的預處理或后處理，可以將先將這幾個用例歸為一組。使用 describe() 函數即可表示一組用例，再將上面提到的四個處理函數置於 describe() 的處理回調內，就實現了對一組用例的預處理或后處理：

describe('test testObject', () => {
    beforeAll(() => {
// 預處理操作
    })

    test('is foo', () => {
       expect(testObject.foo).toBeTruthy()
    })

    test('is not bar', () => {
        expect(testObject.bar).toBeFalsy()
    })

    afterAll(() => {
// 后處理操作
    })
})

測試異步代碼

異步代碼的測試，關鍵點在於告知測試框架測試何時完成，讓其在恰當的時機進行斷言。針對幾種常見的異步代碼形式， Jest 也提供了相應的異步測試語法。首先對於異步回調，向其傳入並執行 done 函數， Jest 會等 done 回調執行結束后，結束測試：

// asyncHello.js
module.exports = (name, cb) => setTimeout(() => cb(`Hello ${name}`), 1000)

// asyncHello.test.js
let asyncHello = require('asyncHello.js')

test('should get "Hello world"', (done) => {
    asyncHello('world', (result) => {
        expect(result).toBe('Hello world')
        done()
    })
})

此外，對於 Promise 控制的異步代碼，可以直接在 then 回調中進行斷言，只要保證在用例中返回該 Promise 對象即可：

// promiseHello.js
module.exports = (name) => {
return new Promise((resolve) => {
        setTimeout(() => resolve(`Hello ${name}`), 1000)
    })
}

// promiseHello.test.js
let promiseHello = require('promiseHello.js')

it('should get "Hello world"', () => {
    expect.assertions(1); // 確保至少有一個斷言被調用，否則測試失敗
return promiseHello('world').then((data) => {
        expect(data).toBe('Hello world')
    })
})

Jest 也支持 async/await 語法的測試，無需多余的操作，只要在 await 后進行斷言即可，和同步測試的寫法一致。

測試覆蓋率

Jest 內置了測試覆蓋率工具istanbul，要開啟，可以直接在命令中添加 --coverage 參數，或者在 package.json 文件進行更詳細的配置。

運行 istanbul 除了會再終端展示測試覆蓋率情況，還會在項目下生產一個 coverage 目錄，內附一個測試覆蓋率的報告，讓我們可以清晰看到分支的代碼的測試情況。比如下面這個例子：

// branches.js
module.exports = (name) => {
if (name === 'Levon') {
return `Hello Levon`
    } else {
return `Hello ${name}`
    }
}

// branches.test.js
let branches = require('../branches.js')

describe('Multiple branches test', ()=> {
    test('should get Hello Levon', ()=> {
          expect(branches('Levon')).toBe('Hello Levon')
    });
// test('should get Hello World', ()=> {
//       expect(branches('World')).toBe('Hello World')
// });  
})

運行 jest --coverage 可看到生產的報告里展示了代碼的覆蓋率和未測試的行數：

如果我們把branches.test.js中的注釋去掉，跑遍測試對象中的所有分支，測試覆蓋率就是100%了：

在前端項目中使用

搭配React和其它框架

針對前端框架的測試， Jest 的一大特色就是提供了快照測試功能。首次運行快照測試，會讓 UI 框架生產一個可讀的快照，再次測試時便會通過比對快照文件和新 UI 框架產生的快照判斷測試是否通過。對於 React ，我們可以通過下面的方法生產一個快照：

import React from 'react';
import Link from '../Link.react';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
const tree = renderer.create(
<Link page="http://www.facebook.com">Facebook</Link>
    ).toJSON();
    expect(tree).toMatchSnapshot();
});

運行測試，我們可以看到生成一個快照文件如下：

exports[`renders correctly 1`] = `
<a
    className="normal"
    href="http://www.facebook.com"
    onMouseEnter={[Function]}
    onMouseLeave={[Function]}
>
    Facebook
</a>
`;

這個可讀的快照文件以可讀的形式展示了 React 渲染出的 DOM 結構。相比於肉眼觀察效果的 UI 測試，快照測試直接由Jest進行比對、速度更快；而且由於直接展示了 DOM 結構，也能讓我們在檢查快照的時候，快速、准確地發現問題。

除了 React ，Jest 文檔中也提供了針對其他框架進行測試的指南。

參考：http://facebook.github.io/jest/docs/zh-Hans/testing-frameworks.html#content