Render returns empty div as container when passed a portal/modal as component

[ekafeel]

• react-testing-library 4.0.2:
• react 16.3.2:
• node 8.10.0:
• npm 5.6.0:

Relevant code or config:

const renderedComponent = render(
  <SomePortal />
);

What you did:

expect(renderedComponent.container).toMatchSnapshot()

What happened:

renderedComponent.container is an empty div in that case. The portal/modal rendered in the document.body and all the queries were generated from the base element which, in the latest version is baseElement = document.documentElement. So all the queries behave as expected, as they look inside documentElement, but the container is an empty div.

Reproduction:

sandbox url: https://codesandbox.io/s/k98yl70j27

Problem description:

So, when we don't pass document.body as container to the render method, which I believe is to avoid the warnings around the rendering directly in div. The render just returns an empty div as container.

render method, if not passed a container, returns container by creating a div element in the body. It works fine for all the portal less components which don't render anything in the body. But for the components which create portals and render those in the document.body, the container doesn't include all the rendered DOM. If we are just testing a modal box, e.g., then the container will just be empty.

Suggested solution:

I have two possible solutions in mind.

1. return baseElement as well from the render
2. make the container same as baseElement and return that

[kentcdodds]

Thanks for this issue.

return baseElement as well from the render

Let's do that 👍 Would you like to open a PR that adds this change as well as simple documentation?

[ekafeel]

sure, would love to do that!