reactjs - 如何通过 enzyme 中的选择器找到正下方的元素

Question

我使用 enzyme + jest 来测试我们的 React 应用程序。

如果呈现的 html 具有嵌套相同的结构，如何通过选择器找到正下方的元素？

如果 render 方法返回以下 HTML，我想为两个 button 元素添加父元素。

<ul>
  <li><button ...>parent1</button></li>
  <li><button ...>parent2</button>
    <ul>
      <li><button ...>child1</button></li>
      <li><button ...>child2</button></li>
    </ul>
  </li>
</ul>

在 enzyme 2.7.1 中，我可以通过 > ul > li > button 选择器获取父级两个 button 元素，如下面的代码。(呃...这显然是一个奇怪的选择器。但它确实有效)

const component = shallow(<Sample {...props}/>)
const parentButtons = component.find('> ul > li > button')
expect(parentButtons.length).toBe(2)

但在 enzyme 3.3.0 中出现“无法解析选择器”错误。

我试过了...

• ul > li > button 返回所有包含子按钮的按钮，这是有道理的。
• :root 伪选择器， enzyme 尚不支持。

有人知道吗？

Answer 1

假设给定的 DOM 结构不会改变(至少 parent 按钮将始终是顶部 li 的第一个节点)这应该有效:

const parentButtons = component.find('ul').first().children().map(child => child.childAt(0));
const parentButtonsTexts = component.find('ul').first().children().map(child => child.childAt(0).text());

expect(parentButtons).toHaveLength(2);
expect(parentButtonsTexts).toEqual(['parent1', 'parent2']);