库包装的 React 组件，如何使用 Enzyme 找到 DOM 子项？

Question

我正在尝试测试一个库包装组件，该组件生成它自己的标记，呈现在componentDidMount 中。鉴于以下...

// <MyComponent />

componentDidMount() {
  transform(this.ref);
}

render() {
  return (
    <div className='foo' ref={(self) => this.ref = self} />
  )
}

where (external lib) transform 做了 something 来改变渲染的标记。假设将其转换为以下...

<div class="foo">
  <article>
    <h2>noms</h2>
    <section>
      <ul class="list">
        <li>pizza</li>
        <li>taco</li>
      </ul>
    </section>
  </article>
</div>

如何在渲染的标记上实际使用 Enzyme API？

---

我正在尝试mount 组件，然后是find 我的.list 元素，但实际上从未找到长度为0 的结果。我的以下测试有什么问题？

let wrapper = Enzyme.mount(<MyComponent />);

let list = wrapper.find('.list'); // nope

我相信我的基本设置是正确的，因为调用 wrapper.html() 确实 实际上完全返回了上述转换后的标记。我在这里错过了什么？

Answer 1

由于wrapper 是您的组件，而ref 是您的组件的一个指向DIV 的属性，这应该可以工作：

let wrapper = Enzyme.mount(<MyComponent />);

let list = wrapper.instance().ref;