Question

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

// <MyComponent />

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

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

其中（外部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;

Libray包装了React组件，如何用Enzyme查找DOM子项？

1 个答案: