`getByTitle` for SVGs canot find `title` if it's not a direct child of `svg`

• @testing-library/react version: 11.2.7
• Testing Framework and version: jest 26x || 27x
• DOM Environment: ‘jsdom’ 16.x

Relevant code or config:

Source: https://testing-library.com/docs/queries/bytitle/

    const Test = () => (
        <>
            <span title="Delete" id="2"></span>
            <svg>
                <title>Close</title>
                <g><path /></g>
            </svg>
        </>
    );

VS

    const Test = () => (
        <>
            <span title="Delete" id="2"></span>
            <svg>
                <g>
                    <path>
                         <title>Close</title>
                    </path>
                </g>
            </svg>
       </>
    );

What you did:

render(<Test/>);

screen.getByTitle('Close');

What happened:

First Component - ✅ Second Component - ❌

TestingLibraryElementError: Unable to find an element with the title: Close.

Problem description:

Testing library cannot find Close because it’s not a direct child of svg.

Suggested solution:

I should be able to find Close even if it’s not a direct child of svg.

[eps1lon]

@eps1lon any updates for this issue?

PRs welcome for https://github.com/testing-library/dom-testing-library/issues/974#issuecomment-858028323

[eps1lon]

Just guessing here: getByText("Close", selector: 'title') and then walk up to the nearest SVG container or graphics element.