javascript - enzyme 试轮事件

Question

我正在尝试测试轮子事件。我在加载事件中添加滚轮监听器。

this.domElement = document.getElementById('myImg');
if (this.domElement) {
    this.domElement.addEventListener('load', this.load);
}

加载方法如下

load() {
     this.domElement.addEventListener('wheel', this.onWheel);
}

未调用 this.load 方法。

我尝试模拟负载:

wrap.find('img').simulate('load');

这也不起作用。如何为轮子事件编写单元测试？

谢谢。

Answer 1

不能使用enzyme的.simulate方法来触发DOM事件。该方法用于触发React SyntheticEvent，而不是原生DOM事件。并且您不需要测试真实 DOM 的真实 wheel 和 load 事件。这是 e2e 测试的职责，而不是单元测试的职责。

这是单元测试的解决方案:

index.tsx:

import React, { Component } from 'react';

class XComponent extends Component {
  private domElement;
  constructor(props) {
    super(props);
    this.load = this.load.bind(this);
  }
  public componentDidMount() {
    this.domElement = document.getElementById('myImg');
    if (this.domElement) {
      this.domElement.addEventListener('load', this.load);
    }
  }
  public load() {
    this.domElement.addEventListener('wheel', this.onWheel);
  }

  public onWheel() {
    //
  }
  public render() {
    return <div>XComponent</div>;
  }
}

export default XComponent;

index.spec.tsx:

import React from 'react';
import XComponent from './';
import { shallow } from 'enzyme';

let map = {};
document.addEventListener = jest.fn((event, cb) => {
  map[event] = cb;
});

describe('XComponent', () => {
  let domElementEventMap = {};
  const mockedDomElement: any = {
    addEventListener: jest.fn((event, cb) => {
      domElementEventMap[event] = cb;
    })
  };

  afterEach(() => {
    jest.resetAllMocks();
    jest.restoreAllMocks();
    map = {};
    domElementEventMap = {};
  });
  it('should call onWheel method', () => {
    const getElementByIdSpy = jest.spyOn(document, 'getElementById').mockReturnValueOnce(mockedDomElement);
    const wrapper = shallow(<XComponent></XComponent>);
    expect(wrapper.text()).toBe('XComponent');
    expect(getElementByIdSpy).toBeCalledWith('myImg');
    expect(mockedDomElement.addEventListener).toBeCalledWith('load', (wrapper.instance() as any).load);
    (domElementEventMap as any).load();
    expect(mockedDomElement.addEventListener).toBeCalledWith('wheel', (wrapper.instance() as any).onWheel);
  });

  it('should not add load event when dom element does not exist', () => {
    const getElementByIdSpy = jest.spyOn(document, 'getElementById').mockReturnValueOnce(null);
    const wrapper = shallow(<XComponent></XComponent>);
    expect(wrapper.text()).toBe('XComponent');
    expect(getElementByIdSpy).toBeCalledWith('myImg');
    expect(mockedDomElement.addEventListener).not.toBeCalled();
  });
});

单元测试结果与 100% 覆盖率报告:

 PASS  src/stackoverflow/58028571/index.spec.tsx (13.467s)
  XComponent
    ✓ should call onWheel method (10ms)
    ✓ should not add load event when dom element does not exist (2ms)

-----------|----------|----------|----------|----------|-------------------|
File       |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-----------|----------|----------|----------|----------|-------------------|
All files  |      100 |      100 |    83.33 |      100 |                   |
 index.tsx |      100 |      100 |    83.33 |      100 |                   |
-----------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        15.545s

源代码:https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58028571