Jest難點高階

快照的使用

const
generateconfig=(
)=>()
test
('test config snapshot',(
)=>
)test
('test another config snapshot',(
)=>
)

初次執行會生成快照檔案，第二次執行同樣生成快照檔案，並與第一次快照進行比較，快照內容相同則測試通過。

快照比對失敗，可以用u鍵批量更新快照，也可以用i鍵來決定每乙個快照的更新操作。

如果generateconfig返回的配置資訊在每次函式執行都會發生變化，難道需要我們每次都去更新快照，那麼這種情況該如何處理呢？

比如

const
generateconfig=(
)=>
()

這裡的time欄位在每次函式執行的時候都會更新，從而導致快照比對失敗，那麼能否在進行快照對比的時候自動忽略掉time欄位的比對呢，其實是可以的

test
('test config snapshot',(
)=>)}
)

內聯快照

內聯快照-不會生成新的快照檔案，而是將快照內容寫入當前執行測試的檔案中

其中在生成內聯快照的時候需要第三方的包prettier配合

test('test config snapshot', () => )
})

總結：快照測試常用於配置檔案的測試、react、vue元件等的測試

mock 介面請求

在jest基礎入門中實現過介面請求的模擬，如下：

import axios from
'axios'
import
from
'./api'
jest.
mock
('axios'
)test.
only
('test axios getdata'
,async()
=>
)await
getdata()
.then
((response)
=>)}
)

這種方法是通過改變axios內部方法實現來進行的模擬，這樣所有的get請求都會被攔截到

另一種方式是對getdata方法的 mock

jest.
mock
('./api'
)import
from
'./api'
test.
only
('test axios getdata'
,async()
=>)}
)

通過mock('./api')這個檔案，在下文匯入getdata這個方法的時候，不再從'./api'檔案中匯入，而是去__mocks__資料夾下對應的api檔案中查詢並匯入，通過這種方式實現對getdata方法的攔截處理

取消mock

jest.
unmock
('./api'
)

在實際的開發中，無需手動進行unmock操作，只需在jest.config.js中開啟clearmocks選項即可，該選項會自動清理 mock 呼叫

區域性mock

什麼是區域性mock，即只針對乙個檔案中的部分內容進行mock，另一部分保留原始內容，不進行模擬

比如：

// util.js
import axios from
'axios'
export
const
getconfig=(
)=>
export
const getnumber =>()
=>
12345

在編寫測試用例的時候，只想對getconfig方法進行mock，getnumber使用真實值，不進行mock

這時就用上了jest.requireactual方法

jest.
mock
('./util'
)import
from
'./util'
const
= jest.
requireactual
('./util'
)test
('test axios getconfig'
,async()
=>)}
)})test
('test getnumber',(
)=>
)

對定時器進行測試

const
timerfunc
=(callback)
=>
,3000)}
test
('test timer'
,(done)
=>)}
)

如果定時器時間過長，則測試時間也會很長，那麼如何mock timer呢

// mock timer
jest.
usefaketimers()
test
('test timer',(
)=>)}
)

當不知道該使用runalltimers還是runonlypendingtimers時，可以使用乙個api進行替代，就是advancetimersbytime，其可以快進指定的時間，來讓定時器提前執行，比如

// 定時器快進 3s 執行
jest.
advancetimersbytime
(3000
)

為了保證每乙個測試用例timer相互隔離，可以將usefaketimers提至beforeeach鉤子函式中

beforeeach((
)=>
)

對class中負責邏輯的測試

// util.js
class
util
complex()
}export
default util

例項化util

let util
beforeall((
)=>
)

實際開發中一般對util進行 mock

// jest mock 發現util是乙個類，會自動把類的建構函式和方法變成 jest.fn()
jest.
mock
('./util'
)import util from
'./util'
let util
beforeall((
)=>
)test
('test util',(
)=>
)

也可以採用自定義mock，在__mocks__下建立util.js

const util = jest.fn(
()=>
)util.prototype.complex = ject.fn(
()=>
)export
default util

自定義mock的另一種方式

jest.
mock
('./util',(
)=>
)  util.prototype.complex = ject.fn(
()=>
)return util
})

這裡推薦在__mocks__資料夾下進行自定義mock

建立dom節點

import $ from
'jquery'
const
adddivtobody=(
)=>
test
('test dom',(
)=>
)

nodejs不具備dom，jest在node環境中自己模擬了一套dom環境jsdom

Jest測試框架 Jest匹配器

jest常見的匹配器修改package.json，加乙個 watchall scripts 測試值的最簡單方法是完全相等。test two plus two is four tobe用於object.is測試完全相等。如果要檢查物件的值，請toequal改用 test object assignm...

Jest測試初學（一） Jest 的簡單配置

執行安裝命令 npx jest init 然後在工程的根目錄下會生成乙個jest.config.js檔案這個檔案值得細細研究！如果想修改測試覆蓋率報告的資料夾名稱，可以在jest.config.js中配置，修改這一項coveragedirectory coverage 執行命令npx jest c...

jest學習筆記

jest測試非同步請求 function fetchdata fn test 非同步請求 done done 如果返回是promise物件，可以用catch或者then function fn test 非同步請求成功 test 非同步請求失敗還可以這樣 test 測試非同步請求丟擲異常 ret...

Jest難點高階

Jest測試框架 Jest匹配器

Jest測試初學（一） Jest 的簡單配置

jest學習筆記

相關推薦