Question

如何编写用于检查渲染元素的测试？例如，像这样的组件，其渲染取决于现有的卡片列表：

class ButtonMore extends Component {
  render() {
    if (!this.props.listCards.length) {
      return null;
    }
    return (
      <button onClick={this.props.onClick} className="buttons button-more">
        More
      </button>
    );
  }
}

如何检查渲染取决于道具？

function setup() {
  const props = {
    listCards: [1, 2]
  };
  const wrapper = shallow(
    <Provider store={store}>
      <ButtonMore {...props} />
    </Provider>
  );
  return {
    props,
    wrapper
  };
}

describe("ButtonMore component", () => {
  const { wrapper } = setup();
  it("should render button if cards length more then 0", () => {
    expect(wrapper.prop("listCards").length).toBe(2); // that's ok
    expect(wrapper.find("button").length).toBe(1); // received 0, not 1
  });
});

不幸的是，我在酶文档中找不到解决方法。

Answer 1

首先：“！this.props.listCards.length”仅检查listCards是否具有属性length。您必须确保listCards是一个数组，并且长度大于0。

现在确保包装器包含正确的数据：您可以使用console.log（wrapper.debug（））;

最后。.如果不需要商店，您甚至可以不使用提供程序。仅渲染ButtonMore并将onClick和listCards传递为道具。

酶如何测试渲染

1 个答案: