reactjs – 如何使用Enzyme等待在Mocha中完成React组件的渲染?

我有一个父组件,呈现一个子组件. Child组件首先呈现像’name’这样的独特道具,然后Parent组件呈现常见的道具,例如’type’,并使用React.Children.map将这些道具注入到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")

注入常​​见道具的代码:

const Parent = (props) => (
  <div
    className="group"
    title={props.title}
  >
    { React.Children.map(props.children,child => applyCommonProps(props,child)) }
  </div>
)
你将不得不使用酶的 mount.

当您需要等待组件渲染子项而不是仅渲染像浅的单个节点时,mount会为您提供完整的DOM渲染.

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...