javascript - 库包装器 React 组件，如何使用 Enzyme 查找 DOM 子项？

Question

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

// <MyComponent />

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

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

where (external lib) transform 做了某事来改变呈现的标记。假设将其转换为以下...

<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;