fix: add support for react portal elements

[spichen]

What:
Components like modals, dialogs, hovercards, tooltips etc use React portals to render them into document.body. Testing utilities can query only on the container and this cannot do testing in such components.

Why:
This fix is necessary to test components that uses react portals.

How:
When using renderIntoComponent, instead of exposing test utilities for container, we do it for document.body which contains the container.

Checklist:

• Documentation
• Tests
• Ready to be merged
• Added myself to contributors table

[kentcdodds]

This is very interesting! I'm leaning on accepting these changes but would like to hear what others have to say about it...

[gnapse]

To add some context, #62 has a discussion about how this is possible today with some workaround (probably similar to what this PR brings out-of-the-box, haven't made a thorough comparison).

[kentcdodds]

Perhaps we could expose some additional queries on a namespace:

const {inBody} = renderIntoDocument(<Stuff />)
const submitButton = inBody.getByText('Submit')

[kentcdodds]

But I'm not sure I like that either. I'm thinking the solution in #62 is very straightforward and prefer that over bloating the API further. Use cases for portals are few and far between so I don't think it's worth the extra overhead.

[spichen]

I'd prefer not to bloat the API for this. By documentation, renderIntoDocument says it render into document.body. So I hope just exposing test queries on document.body is meaningful here.

[kentcdodds]

That makes sense to me. Ok, I'm in favor of this change. Let's make a change to the docs to explain this as well.

[kentcdodds]

🎉 This PR is included in version 3.1.5 🎉

The release is available on:

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

Your semantic-release bot 📦🚀