如何正确地对React组件进行单元测试？

MoeSattler 发表于 Dev

莫·萨特勒

当我测试一个反应组件时，什么是最佳实践？我应该测试什么？在正常测试中，我通常只是测试正确的状态+输入是否导致正确的状态+输出

但是React组件有些不同。他们有state + props + userInput导致state + markup。

这可能导致很多不同的潜在情况。我是否需要测试所有这些方案的结果状态？标记可能很大。我应该测试整个标记树是否符合预期吗？还是只是其中一部分？如何确定要测试的标记的哪一部分？

安德烈·佩纳（AndréPena）

首先要记住的事情是：

如果可以将组件的逻辑封装到模块中并进行独立测试，请执行此操作。示例：对于计算器组件，计算本身可以独立于组件进行测试。我知道这很明显，但这只是为了说明这一点。
将您的组件分解成较小的组件，然后逐个进行详细测试。

关于组件，请始终进行以下测试：

如果正确的道具将呈现正确的输出（HTML）。
如果正确的用户交互（单击，按键...）将触发相应的事件并导致正确的输出（HTML）。在单元测试期间，我通常根本不处理组件状态，因为我认为这不是一个好习惯。要测试电视，您不必打开电视。

如果您不确定要使用哪个库来测试React组件，我强烈建议您使用Enzyme。

GitHub页面上的示例：

describe('<MyComponent />', () => {
  it('renders three <Foo /> components', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find(Foo)).to.have.length(3);
  });

  it('renders an `.icon-star`', () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper.find('.icon-star')).to.have.length(1);
  });

  it('renders children when passed in', () => {
    const wrapper = shallow(
      <MyComponent>
        <div className="unique" />
      </MyComponent>
    );
    expect(wrapper.contains(<div className="unique" />)).to.equal(true);
  });

  it('simulates click events', () => {
    const onButtonClick = sinon.spy();
    const wrapper = shallow(
      <Foo onButtonClick={onButtonClick} />
    );
    wrapper.find('button').simulate('click');
    expect(onButtonClick).to.have.property('callCount', 1);
  });
});