Question

我有一个Parent组件，可以呈现Child组件。 Child组件首先呈现独特的道具，例如＆＃39; name＆＃39;然后父组件呈现常见的道具，例如＆＃39; type＆＃39;并使用Child将这些道具注入React.Children.map组件。

我的问题是Enzyme无法检测到Section组件所呈现的常见道具，因此我无法有效地测试是否添加了常见道具。

测试：

＆＃13;

      const wrapper = shallow(
        <Parent title="Test Parent">
          <div>
            <Child
              name="FirstChild"
            />
          </div>
        </Parent>
      )
//      console.log(wrapper.find(Child).node.props) <- returns only "name" in the object
      expect(wrapper.find(Child)).to.have.prop("commonPropOne")
      expect(wrapper.find(Child)).to.have.prop("commonPropTwo")
      expect(wrapper.find(Child)).to.have.prop("commonPropThree")

＆＃13;

注入常见道具的代码：

＆＃13;

const Parent = (props) => (
  <div
    className="group"
    title={props.title}
  >
    { React.Children.map(props.children, child => applyCommonProps(props, child)) }
  </div>
)

＆＃13;

Answer 1

你将不得不使用酶mount。

mount在您需要等待组件渲染子项时提供完整的DOM渲染，而不是仅渲染像shallow这样的单个节点。

如何使用Enzyme等待Mocha中的React组件的完整渲染？

1 个答案: