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

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

所以下面的一个对我有用：

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

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

Answer 2

到目前为止，我能找到的最好的方法是：

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

子级数必须为零，以防止找到父级节点。还必须有一个名称，以防止找到文本节点。

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

Answer 3

将我的答案基于此博客：

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 4

接受的答案对我不起作用，因为node.children().length返回1，我认为这是因为它是一个文本节点，因为node.children()[0]未定义。 ?‍♂️

const button = wrapper.findWhere(node => (
  node.name() === 'button'
  && node.children().length === 1
  && node.children()[0] === undefined
  && node.text() === 'Action 2'
));

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

4 个答案: