如何通过酶中的文本查找元素？

Question

我的页面上有多个按钮：

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

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

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

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

Answer 1

我的回答基于此博客：

https://blog.sapegin.me/all/react-testing-2-jest-and-enzyme/

我认为最简单的答案是这样的

const action2Button = wrapper.find({children: "Action 2"})

我相信此方法使用酶对象属性选择器 https://enzymejs.github.io/enzyme/docs/api/selector.html#4-object-property-selector

Answer 2

到目前为止，我能找到的最佳方法如下：

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

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

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

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

Answer 3

接受的答案对我也不起作用 - 看起来至少type应该在谓词语句中指定。

所以以下一个对我有用：

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

但我不确定这个解决方案是否比作者最初提出的更好。