toHaveTextContent should support any Node

[julienw]

• @testing-library/jest-dom version: 5.11.5
• node version: 12.18.0
• yarn version: 1.22.5
• react-testing-library version: 11.1.0

Relevant code or config:

    const resourceLabel = getByText('Resource:');
    const valueElement = ensureExists(resourceLabel.nextSibling);
    expect(valueElement).toHaveTextContent('libxul.so');

What you did:

I'm in the process of installing and using jest-dom in our project. I installed the eslint plugin which converted this code:

    const resourceLabel = getByText('Resource:');
    const valueElement = ensureExists(resourceLabel.nextSibling);
    expect(valueElement.textContent).toBe('libxul.so');

What happened:

Here is the error I get:

    received value must be an HTMLElement or an SVGElement.
    Received has type:  object
    Received has value: libxul.so

       95 |     const resourceLabel = getByText('Resource:');
       96 |     const valueElement = ensureExists(resourceLabel.nextSibling);
    >  97 |     expect(valueElement).toHaveTextContent('libxul.so');

Reproduction:

https://codesandbox.io/s/react-testing-library-demo-forked-0puq7

Problem description:

The property textContent is present in all Nodes, not only HTMLElement. Therefore it would be nice if this expectation worked on all Nodes too, especially text nodes.

See the MDN page about textContent:
https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent

Suggested solution:

Is removing this line enough:

jest-dom/src/to-have-text-content.js

Line 8 in c11f9c5

checkHtmlElement(htmlElement, toHaveTextContent, this)

Or should we replace it with a check for instanceof Node ?

[gnapse]

Makes sense. I think we should keep the check, even if changing it to check instanceof Node. I'm not sure it makes sense to support anything with a .textContent property.

[moltar]

Same issue here, but with DocumentFragment.

    const { asFragment } = render(html`<${Home} />`)
    expect(asFragment()).toHaveTextContent(/Hello from Preact/)

Error:

    received value must be an HTMLElement or an SVGElement.
    Received has type:  object
    Received has value: <DocumentFragment><div class="container"><h1 style="background: grey;">Hello from Preact</h1><button class="btn btn-primary" type="button">Increment <span class="badge badge-light">1</span></button></div></DocumentFragment>

[julienw]

Thanks
I'm taking it to finish the existing PR #307

[github-actions]

🎉 This issue has been resolved in version 5.12.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀