abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-03 23:28:02 +00:00
Code Issues Projects Releases Wiki Activity

Add Test A Component That Uses React Portals as the first react-testing-library til

Browse Source
This commit is contained in:
jbranchaud
2020-08-24 16:31:25 -05:00
parent b0b0480467
commit 4f2ad04b15
2 changed files with 43 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
react-testing-library/test-a-component-that-uses-react-portals.md Normal file
View File

@@ -0,0 +1,37 @@
# 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)