Question

我已经使用enzyme尝试了所有内容，但是，我无法在下面找到测试这些属性的正确方法。请记住，此组件包含在虚拟Provider组件中，以便我可以向下传递必要的道具（即Store）以用于安装目的。

1）安装后，在实例上设置属性（例如this.property）

2）已添加事件监听器

3）在事件监听器上，正在调用someFunction

class SampleComponent extends Component {

  componentDidMount() {
    this.property = 'property';
    window.addEventListener('scroll', this.someFunction, true);
  }

  someFunction = () => {
    return 'hello';
  };

  render() {
    return <h1>Sample</h1>; 
  }
}

export default EvalueeExposureList;

Answer 1

好的，我已根据与OP的讨论更新了我的答案。被测组件有一个redux提供者和连接组件作为孩子，因此我们选择使用酶浅API。

关于跟踪和测试addEventListener，您可以使用sinon库创建间谍，暂时“替换”window.addEventListener。这允许您访问调用计数以及调用它的参数。

使用酶和摩卡我创建了以下测试，这些测试正在传递给我。前两个测试涵盖了上面的所有案例，为了更好的衡量，我添加了另一个关于如何测试someFunction的输出。

import React from 'react';
import { expect } from 'chai';
import sinon from 'sinon';
import { shallow } from 'enzyme';

// Under test.
import SampleComponent from './SampleComponent';

describe('SampleComponent', () => {
  let addEventListenerSpy;

  beforeEach(() => {
    // This replaces the window.addEventListener with our spy.
    addEventListenerSpy = sinon.spy(window, 'addEventListener');
  });

  afterEach(() => {
    // Restore the original function.
    window.addEventListener.restore();
  });

  // This asserts your No 1.
  it(`should set the property`, () => {
    const wrapper = shallow(<SampleComponent />);
    wrapper.instance().componentDidMount(); // call it manually
    expect(wrapper.instance().property).equal('property');
  });

  // This asserts your No 2 and No 3.  We know that by having
  // passed the someFunction as an argument to the event listener
  // we can trust that it is called.  There is no need for us
  // to test the addEventListener API itself.
  it(`should add a "scroll" event listener`, () => {
    const wrapper = shallow(<SampleComponent />);
    wrapper.instance().componentDidMount(); // call it manually
    expect(addEventListenerSpy.callCount).equal(1);
    expect(addEventListenerSpy.args[0][0]).equal('scroll');
    expect(addEventListenerSpy.args[0][1]).equal(wrapper.instance().someFunction);
    expect(addEventListenerSpy.args[0][2]).true;
  });

  it(`should return the expected output for the someFunction`, () => {
    const wrapper = mount(<SampleComponent />);
    expect(wrapper.instance().someFunction()).equal('hello');
  });
});

值得注意的是，我在节点上运行测试，但我的jsdom配置中设置了mocha，这可能是负责创建window.addEventListener的候选人用于我的测试环境。您是通过浏览器还是节点运行测试？如果节点你可能需要做类似我的事情。

如何在React组件上测试属性和函数？

1 个答案: