Query font-awesome element in react-testing-library

Question

In my render method I have

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

Using react-testing-library how can I access the above span element. This is what I tried so far

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

but the error says matcher.test is not a function. How should I approach this.

Answer 1

You get this error because getByText's first argument is a TextMatch, but you passed a component.

Apparently, you can pass a title prop to FontAwesomeIcon since this commit :

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

and then you can simply get your component using

getByTitle('some title');

NB : title prop is not set as an attribute of the i element generated by font awesome, but rather as a title tag related to the SVG element, but react-testing-library

Will also find a title element within an SVG.

ref : https://testing-library.com/docs/dom-testing-library/api-queries#bytitle