单元测试 - 测试场景记录

记录在进行单元测试中所遇到的特殊场景，使用的依赖版本为 "jest": "26.6.0"。不断补充，积少成多(但愿吧···)

模拟 DOM 事件

这里以模拟touch事件为例。测试中需要模拟左滑和右滑，需要触发 touchstart 和 touchmove 等事件。

使用 dispatchEvent(event: Event)

	describe('TouchLREvent', () => {
	// 目标元素
	let demoDom: HTMLElement | null = null;
	beforeAll(() => {
	// 创建并添加目标元素到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' , () => {
	// 模拟回调函数
	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)
	// 还原函数
	leftCallBack.mockRestore()
	rightCallBack.mockRestore()
	})
	})

模拟 localStorage

在window下自己定义一个localStorage对象。

模拟的localStorage对象实现如下：

	// localStorage功能的简易实现
	export default class LocalStorageMock {
	private store: Record<string, string> = {};
	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;
	}
	}

测试文件：

	import LocalStorageMock from './__mock__/localStorage'
	describe('test LocalStorage', () => {
	const localStorageMock = new LocalStorageMock()
	const _data = {test:123,test1:'456',test2:true,test3:{}}
	beforeAll(() => {
	// 自定义 localStorage 对象
	Object.defineProperty(window, 'localStorage', {
	value: localStorageMock
	});
	})
	afterAll( () => {
	// 环境还原
	// @ts-ignore
	delete window.localStorage
	})
	test('set same data',() => {
	LocalStorage.setItem('test',_data)
	expect(LocalStorage.getItem('test')).toEqual(_data)
	})
	})

当然，如果多个测试文件都需要localStorage,可以在全局模拟此对象，在setupFiles中实现即可。

模拟 location

delete window.location, 然后重新赋值

	describe('test getSearchs', () => {
	// 备份 location对象
	const { location } = window
	beforeAll( () => {
	// 删除 location
	// @ts-ignore
	delete window.location;
	})
	afterAll( () => {
	// 还原 location
	window.location = location
	})
	test('one search params, no hash', () => {
	// 测试时 模拟location
	// @ts-ignore
	window.location = new URL('https://www.baidu.com/?test=123')
	expect(getSearchs()).toEqual({test:"123"})
	})
	})

模拟 userAgent

思路和 模拟 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)
	})
	})