官方文檔地址
首先附上官方文檔地址，https://jestjs.io/docs/zh-Hans/getting-started.html
簡介
Jest 是Facebook的一個專門進行Javascript單元測試的工具，這些應用當然也包括了 React 應用。它的優點之一是自帶了對 React 的支持，同時也很容易支持其它框架。
安裝
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}"
]
},
...
接下來，我們就簡單的說一下這幾個配置項的作用
- transform
簡單地說就是一種轉換器配置，比如這里寫的
"transform": {
".(ts|tsx)": "ts-jest"
},
表示的就是ts-jest工具把.ts和.tsx文件內容轉換成js，因為我們現在基本上也都是用ts去編寫測試代碼，所以要配置轉換器
- testEnvironment
測試環境
"testEnvironment": "node",
表示它是一個類瀏覽器的測試環境，我們可以使用瀏覽器環境中的一些API
- 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"
]
表示每次跑具體測試代碼之前會先運行
其他配置大家可以上官方文檔查看一下
- 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')
})
常見踩坑
1. Unexpected token import
Jest 默認只支持你所使用的 node.js 版本所支持的 JS 特性，例如 import export 就不支持，所以要么你的代碼使用系統 node.js 兼容的語法寫 (也就是使用 require)，要么在這里使用 Babel 轉義一下。
解決辦法
在 Jest 中使用 Babel 很簡單，只需要安裝 babel-jest 並新建一個 .babelrc 加入你想要的配置就行了，Jest 會自動使用 babel-jest。這里我們簡單地使用 babel-preset-env 即可，對應的 .babelrc 是:
{
"presets": ["env"]
}
在大多數時候你的項目本身就已經在使用 .babelrc 了，所以這一步甚至也省略掉了。