enzyme - 如何在 Enzyme 中通过文本查找元素？

Question

我的页面上有多个按钮:

<div>
    <h1>Home</h1>
    <button>Action 1</button>
    <button>Action 2</button>
</div>

如何通过其文本选择“操作 2”按钮，以便单击它？我知道可能还有其他方法来选择该按钮，但我专门寻找通过文本选择元素的最佳方法。

我发现的一种方法如下所示。有更好的办法吗？

const action2Button = wrapper.find('button[children="Action 2"]');
expect(action2Button).toHaveLength(1);
action2Button.simulate('click');

Answer 1

到目前为止，我能找到的最好方法如下:

const button = wrapper.findWhere(node => {
  return (
    node.type() &&
    node.name() &&
    node.text() === "Action 2"
  );
});

必须有名称和类型，以防止找到文本节点。

我确信一定有更好的方法来做到这一点。

更新:我不确定自从我回答这个问题以来 Enzyme 是否发生了变化。我发现您现在可以通过检查 node.type() 是否未定义来避免使用文本节点。我不确定如何避免具有相同文本的父节点。