Parent node in react-testing-library

Issue

The component that I have testing renders something this:

<div>Text<span>span text</span></div>

As it turns out for testing the only reliable text that I have is the 'span text' but I want to get the 'Text' part of the <div>. Using Jest and react-testing-library I can

await screen.findByText(spanText)

This returns an HTMLElement but it seems limited as I don't have any of the context around the element. For example HTML methods like parentNode and previousSibling return null or undefined. Ideally I would like to get the text content of the parent <div>. Any idea how I can do this with either Jest or react-testing-library?

Solution

A good solution for this is the closest function. In description of closest function is written: Returns the first (starting at element) including ancestor that matches selectors, and null otherwise.

The solution would look like this:

screen.getByText("span text").closest("div")

Answered By - Vitor Vicente