单元测试

模拟 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()
  })
})

相关问答

Q1: 模拟 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中实现即可。

Q2: 模拟 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"})
  })
})

Q3: 模拟 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)
  })
})