In this lesson, you can see if you know how to query for elements in the DOM when they're not so easy to pull out.

In the component, there is this block:

<h1>
  <b>{item.firstName}</b>{' '}
  <i>{item.lastName}</i>
</h1>

And the challenge is to get that <h1>.

• One of the items there will render <h1><b>Bart</b> <i>Simpson</i></h1>
• Given only the string Bart Simpson, try to get that <h1> tag selected.
• This is tricky as you can't select using just getByText("Bart Simpson"), because the string you're querying for is split across elements.

As this is a challenge, there are some rules:

• Do not change the React component at all - only edit the tests.
• You should only update the tests
• Only use screen.getByText() to get the element
• Don't use something like getAllByRole('heading')[0].
• Don't use getByText("Bart", {exact: false}).

Give it a go, and hit run to see if you can get it passing.

If you can't figure it out, either view some hints, or click the menu button above the code editor and reveal the answer.