【jest】單元測試工具隨筆

時間 2019-11-11

標籤 jest 單元測試工具隨筆简体版

原文原文鏈接

官方文檔地址

首先附上官方文檔地址，https://jestjs.io/docs/zh-Hans/getting-started.htmlhtml

簡介

Jest 是Facebook的一個專門進行Javascript單元測試的工具，這些應用固然也包括了 React 應用。它的優勢之一是自帶了對 React 的支持，同時也很容易支持其它框架。node

安裝

npm i jest -D（安裝到本地）
npm i jest -g（安裝到全局）正則表達式

基本配置解讀

package.json
在package.json添加配置項"jest" : { 配置項 }

// package.json for example
...
  "jest": {
    "transform": {
      ".(ts|tsx)": "ts-jest"
    },
    "testEnvironment": "node",
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "coveragePathIgnorePatterns": [
      "/node_modules/",
      "/test/"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 90,
        "functions": 95,
        "lines": 95,
        "statements": 95
      }
    },
    "collectCoverageFrom": [
      "src/*.{js,ts}"
    ]
  },
...

接下來，咱們就簡單的說一下這幾個配置項的做用npm

transform

簡單地說就是一種轉換器配置，好比這裏寫的json

"transform": {
      ".(ts|tsx)": "ts-jest"
    },

表示的就是ts-jest工具把.ts和.tsx文件內容轉換成js，由於咱們如今基本上也都是用ts去編寫測試代碼，因此要配置轉換器數組

testEnvironment

測試環境瀏覽器

"testEnvironment": "node",

表示它是一個類瀏覽器的測試環境，咱們可使用瀏覽器環境中的一些APIbabel

testRegex

要測試文件的正則表達式框架

"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",

表示test目錄下全部以.test.ts和.spec.ts的文件都須要跑測試工具

moduleFileExtensions

模塊文件擴展名，當你去引入一個模塊並無指定拓展名的時候，它會依次嘗試去添加這些擴展名去擬引入模塊文件

"moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],

表示優先找.ts的模塊，其次是.tsx和.js

coverageThreshold

測試覆蓋率的閾值設定，當咱們的測試覆蓋率達不到閾值的時候，測試會失敗

"coverageThreshold": {
      "global": {
        "branches": 90,
        "functions": 95,
        "lines": 95,
        "statements": 95
      }
    },

表示全局的代碼分支覆蓋率要達到90%以上，方法覆蓋率達到95%，代碼行數覆蓋率達到95%，聲明語句達到95%

collectCoverageFrom

收集指定文件的測試覆蓋率（即便你沒爲這些文件編寫測試，它的值爲glob patterns類型）

"collectCoverageFrom": [
      "src/*.{js,ts}"
    ]

表示收集src目錄以及全部組目錄中的js和ts文件的測試覆蓋率

setupFileAfterEnv

測試框架安裝後當即執行的代碼文件列表

"setupFileAfterEnv": [
        "<rootDir>/test/boot.ts"
    ]

表示每次跑具體測試代碼以前會先運行 /test/boot.ts中的代碼

表示當前項目的根目錄

其餘配置你們能夠上官方文檔查看一下

jest.config.js

新建jest.config.js並添加配置項module.exports = { 配置項 }

運行

npx jest（安裝到本地的前提下）
jest（安裝到全局的前提下）修改"script" 中的"test" 爲"jest"後使用npm run test

基本語法

分組（Test Group）：descripe(描述語,function)
測試用例（Test Case）：test(描述語,function)
斷言（Assert）：expect(運行需測試的方法並返回實際結果).toBe(預期結果)

// for example
Pencil.query =(name, url)=> {  //方法，返回捕獲
    // ?hello=test&wonghan=handsome
    var reg = new RegExp('(?:\\?|&)' + name + '=(.*?)(?:&|$)')
    var ret = reg.exec(url) || []
    return ret[1]
}
test('query',()=>{  // testCase
    // 斷言
    expect(Pencil.query('hello', '?hello=test')).toBe('test')
    expect(Pencil.query('hello', '?hello2=test')).toBe(undefined)  
    //能夠寫多個`ecpect()`
})
test('query2',()=>{
    expect(Pencil.query('hello/test', '?hello/test=test')).toBe('test')
}) 
    //能夠寫多個`test()`
describe('test query',()=>{
    test('query3',()=>{  // testCase
        // assert
        expect(Pencil.query('hello', '?hello=test')).toBe('test')
        expect(Pencil.query('hello', '?hello2=test')).toBe(undefined)
    })
})

Jest Matcher

Matchers俗稱斷言庫，例如上面的expect().toBe()即是其中之一，其餘常見用法以下：

1.相等斷言

toBe(value)：比較數字、字符串
toEqual(value)：比較對象、數組
toBeNull()
toBeUndefined()

2.包含斷言

toHaveProperty(keyPath, value)：是否有對應的屬性
toContain(item)：是否包含對應的值，括號裏寫上數組、字符串
toMatch(regexpOrString)：括號裏寫上正則

3.邏輯斷言

toBeTruthy()
toBeFalsy()
在JavaScript中，有六個falsy值：false，0，''，null， undefined，和NaN。其餘一切都是Truthy。

toBeGreaterThan(number)：大於
toBeLessThan(number)：小於

4.not

取反，用法見下面例子

// for example
test('matchers',()=>{
    const a = {
        hello: 'jest',
        hi :{
            name: 'jest'
        }
    }
const b = {
    hello: 'jest',
    hi:{
        name: 'jest'
    }
}
// 如下結果均爲true
expect(a).toEqual(b)
expect([1,2,3]).toEqual([1,2,3])
expect(null).toBeNull()
expect([1,2,3]).toContain(1)
expect(b).toHaveProperty('hi')
expect('123').toContain('2')
expect('123').toMatch(/^\d+$/)
expect('123').not.toContain('4')
})