在react-testing-library中查询font-awesome元素

Question

在我的渲染方法中

<span onClick={handleDelete} className="delete-action">
  <FontAwesomeIcon icon="trash-alt" />
</span>

使用react-testing-library如何访问上面的span元素。这是我迄今为止尝试过的

getByText(<FontAwesomeIcon icon="trash-alt" />)

但错误表明 matcher.test 不是函数。我应该如何处理这个问题。

Answer 1

您收到此错误是因为

getByText

的第一个参数是 TextMatch，但您传递了一个组件。

显然，自

此提交

以来，您可以将

title

属性传递给 FontAwesomeIcon :

<span onClick={handleDelete} className="delete-action">
  <FontAwesomeIcon icon="trash-alt" title="some title"/>
</span>

然后你可以简单地使用

获取你的组件

getByTitle('some title');

NB ：

title

prop 不是设置为 font Awesome 生成的

元素的属性，而是设置为与

title

元素相关的

SVG

标签，但是

react-testing-library

还将在 SVG 中找到标题元素。