getByText doesn't find the element

user_5995696 0
Viewed 2890

I want to see if at least part of text is rendered..

<li>
   Click here &nbsp;
   <a
     id="myLink"
     className="xxxxx"
     target="_blank"
     rel="noreferrer"
     href="https://www.aaa.com"
   >
      to open xxx.
   </a>
</li>

and test fails with:

xxxxxx.getByText('Click here')

but works fine if 'Click here' is only the text of that

  • is there a method to do partial search?

    • react-testing-library jestjs reactjs unit-testing
    1 Answers

    If you pass a string to getByText(), it will look for that exact string. You can instead pass a regular expression to look for a partial match:

    x.getByText(/click here/i)

    Here I used the i flag for a case insensitive search, but you could also pass a case sensitive regex: /Click here/.

    From About Queries > Using Queries:

    The primary argument to a query can be a string, regular expression, or function. There are also options to adjust how node text is parsed. See TextMatch for documentation on what can be passed to a query.

    From TextMatch > Precision:

    Queries that take a TextMatch also accept an object as the final argument that can contain options that affect the precision of string matching:

    • exact: Defaults to true; matches full strings, case-sensitive. When false, matches substrings and is not case-sensitive.
      • exact has no effect on regex or function arguments.
      • In most cases using a regex instead of a string gives you more control over fuzzy matching and should be preferred over { exact: false }.
    user_10798690
    Related