> For the complete documentation index, see [llms.txt](https://ploegert.gitbook.io/til/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ploegert.gitbook.io/til/programmy/react-testing-library/test-a-component-that-uses-react-portals.md).

# Test A Component That Uses React Portals

When using [react-testing-library](https://testing-library.com/docs/react-testing-library/intro) to render a component that uses [Portals](https://reactjs.org/docs/portals.html), you'll probably run into an issue with your `Portal` code. When trying to set up the portal, it will fail to find the portal's root element in the DOM.

```javascript
const portalRoot =
  global.document && global.document.getElementById("portal-root");
// portalRoot is null 😱
```

There are [a number of solutions](https://github.com/testing-library/react-testing-library/issues/62). [One solution](https://github.com/testing-library/react-testing-library/issues/62#issuecomment-438653348), recommended by KCD, is to add the portal's root element to the document if it's not already there.

```javascript
let portalRoot =
  global.document && global.document.getElementById("portal-root");

if (!portalRoot) {
  portalRoot = global.document.createElement("div");
  portalRoot.setAttribute("id", "portal-root");
  global.document.body.appendChild(portalRoot);
}
```

By solving this issue directly in the portal's source code, you are making it more reliable and don't have to add extra boilerplate to your test setup.

[source](https://github.com/testing-library/react-testing-library/issues/62#issuecomment-438653348)