記錄在進(jìn)行單元測(cè)試中所遇到的特殊場(chǎng)景,使用的依賴(lài)版本為 "jest": "26.6.0"
。不斷補(bǔ)充,積少成多(但愿吧···)
成都創(chuàng)新互聯(lián)公司專(zhuān)注于普蘭店企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),電子商務(wù)商城網(wǎng)站建設(shè)。普蘭店網(wǎng)站建設(shè)公司,為普蘭店等地區(qū)提供建站服務(wù)。全流程按需開(kāi)發(fā)網(wǎng)站,專(zhuān)業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)
這里以模擬touch
事件為例。測(cè)試中需要模擬左滑和右滑,需要觸發(fā) touchstart
和 touchmove
等事件。
使用 dispatchEvent(event: Event)
describe('TouchLREvent', () => {
// 目標(biāo)元素
let demoDom: HTMLElement | null = null;
beforeAll(() => {
// 創(chuàng)建并添加目標(biāo)元素到body下
demoDom = document.createElement('div')
demoDom.style.height = '500px'
demoDom.style.width = '300px'
document.body.appendChild(demoDom)
})
afterAll( () => {
// 清除元素
document.body.removeChild(demoDom!)
demoDom = null
})
test('left' , () => {
// 模擬回調(diào)函數(shù)
let leftCallBack = jest.fn()
let rightCallBack = jest.fn()
TouchLREvent(demoDom!,leftCallBack,rightCallBack)
// 模擬 touchstart
demoDom?.dispatchEvent(new TouchEvent('touchstart',{
touches: [
// @ts-ignore
{clientX: 100,clientY:100}
]
}))
// 模擬 touchmove
demoDom?.dispatchEvent(new TouchEvent('touchmove',{
touches: [
// @ts-ignore
{clientX: 60,clientY:100}
]
}))
// 模擬 touchend
demoDom?.dispatchEvent(new TouchEvent('touchend',{
touches: [
// @ts-ignore
{clientX: 50,clientY:100}
]
}))
expect(leftCallBack).toBeCalled()
expect(rightCallBack).toBeCalledTimes(0)
// 還原函數(shù)
leftCallBack.mockRestore()
rightCallBack.mockRestore()
})
})
在window
下自己定義一個(gè)localStorage
對(duì)象。
模擬的localStorage
對(duì)象實(shí)現(xiàn)如下:
// localStorage功能的簡(jiǎn)易實(shí)現(xiàn)
export default class LocalStorageMock {
private store: Record = {};
public setItem(key: string, value: string) {
this.store[key] = String(value);
}
public getItem(key: string): string | null {
return this.store[key] || null;
}
public removeItem(key: string) {
delete this.store[key];
}
public clear() {
this.store = {};
}
public key(index: number): string | null {
return Object.keys(this.store)[index] || null;
}
public get length(): number {
return Object.keys(this.store).length;
}
}
測(cè)試文件:
import LocalStorageMock from './__mock__/localStorage'
describe('test LocalStorage', () => {
const localStorageMock = new LocalStorageMock()
const _data = {test:123,test1:'456',test2:true,test3:{}}
beforeAll(() => {
// 自定義 localStorage 對(duì)象
Object.defineProperty(window, 'localStorage', {
value: localStorageMock
});
})
afterAll( () => {
// 環(huán)境還原
// @ts-ignore
delete window.localStorage
})
test('set same data',() => {
LocalStorage.setItem('test',_data)
expect(LocalStorage.getItem('test')).toEqual(_data)
})
})
當(dāng)然,如果多個(gè)測(cè)試文件都需要localStorage
,可以在全局模擬此對(duì)象,在setupFiles
中實(shí)現(xiàn)即可。
delete window.location
, 然后重新賦值
describe('test getSearchs', () => {
// 備份 location對(duì)象
const { location } = window
beforeAll( () => {
// 刪除 location
// @ts-ignore
delete window.location;
})
afterAll( () => {
// 還原 location
window.location = location
})
test('one search params, no hash', () => {
// 測(cè)試時(shí) 模擬location
// @ts-ignore
window.location = new URL('https://www.baidu.com/?test=123')
expect(getSearchs()).toEqual({test:"123"})
})
})
思路和 模擬 location
一樣,先刪除再賦值
describe('test getStatuBarHeight', () => {
// 備份
const { navigator } = window
beforeAll( () => {
// 模擬
//@ts-ignore
delete window.navigator
})
afterAll( () => {
// 還原
window.navigator = navigator
})
test('no xx in userAgent', () => {
// 模擬 userAgent
window.navigator = {
...navigator,
userAgent:'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1'
}
expect(xx).toBe(xx)
})
})