时间戳

首页 > 解决方案 > 如何通过 Enzyme 中的文本查找元素？

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

问题描述

我的页面上有多个按钮：

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

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

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

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

标签： enzyme

解决方案

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

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

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

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

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

推荐阅读