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

【问题标题】：How to wait for complete render of React component in Mocha using Enzyme?如何使用 Enzyme 等待 Mocha 中 React 组件的完整渲染？
【发布时间】：2016-09-18 00:58:01
【问题描述】：

我有一个 Parent 组件，它呈现一个 Child 组件。 Child 组件首先呈现独特的 props，例如“name”，然后 Parent 组件呈现常见的 props，例如“type”，并使用 React.Children.map 将这些 props 注入到 Child 组件中。

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

测试：

      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")

常用props注入代码：

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

【问题讨论】：

标签： javascript reactjs mocha.js enzyme chai

【解决方案1】：

您必须使用酶的mount。

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

【讨论】：