如何测试 React 组件的属性和功能？

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 提供程序和连接组件作为子组件，因此我们选择使用 enzymes shallow API。

关于跟踪和测试 addEventListener 您可以使用 sinon 库创建间谍，暂时 "replaces" 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');
  });
});

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

如何测试 React 组件的属性和功能？

How to test properties and functions on a React component?

reactjs

mocha.js

enzyme