Question

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

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

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

Answer 1

首先要记住的显而易见的事情是：

如果您的组件的逻辑可以封装到模块中并独立测试，那么就这样做。示例：对于计算器组件，可以独立于组件测试计算本身。我知道这很明显，但只是为了说清楚。
将您的组件拆分为较小的组件并对其进行细致的测试。

关于组件，请始终测试：

如果正确的道具将呈现正确的输出（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);
  });
});

如何正确单元测试React组件？

1 个答案: