Javascript 图书馆包装的反应成分，如何找到含酶的DOM儿童？

我正在尝试测试一个库包装器组件，它生成自己的标记，并在

componentDidMount

中呈现。鉴于以下情况

// <MyComponent />

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

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

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

如何在呈现的标记上实际使用酶API

---

我正在尝试创建组件，然后创建

.list

元素，但实际找不到长度为

0

的结果。我的以下测试有什么问题

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

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

let wrapper=Enzyme.mount（）；
let list=wrapper.find（'.list'）；//不

---

我相信我的基本设置是正确的，因为调用

wrapper.html（）

实际上会完整返回上述转换的标记。这里缺少什么？

因为

包装器

是您的组件，

ref

是指向DIV的组件的属性，所以应该可以：

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

let list = wrapper.instance().ref;

let wrapper=Enzyme.mount（）；
let list=wrapper.instance（）.ref；

您应该添加这行代码，看看它打印出了什么。这将让您了解Ezyme渲染的是什么

wrapper.tap（n=>console.log（n.debug（））

它只渲染第一个子级，但

.html（）

返回整个树。为什么它只有一个层次的深度，我如何才能更深入呢？这是返回的

[函数：ref]

。我尝试调用wrapper.ref.find（'.list'），并引发异常。我不确定我应该在这里看到什么。想法？通过调用

wrapper.instance（）.ref

，我能够得到我需要的东西。如果你编辑你的答案，我很乐意接受，以防其他人在将来发现这有帮助。好一个@scniro！