From 4f2ad04b15b98ffc085eb58ca7034f274583c085 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Mon, 24 Aug 2020 16:31:25 -0500
Subject: [PATCH] Add Test A Component That Uses React Portals as the first
 react-testing-library til

---
 README.md                                     |  7 +++-
 ...est-a-component-that-uses-react-portals.md | 37 +++++++++++++++++++
 2 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 react-testing-library/test-a-component-that-uses-react-portals.md

diff --git a/README.md b/README.md
index 93333d5..5a24010 100644
--- a/README.md
+++ b/README.md
@@ -9,7 +9,7 @@ and pairing with smart people at Hashrocket.
 
 For a steady stream of TILs, [sign up for my newsletter](https://tinyletter.com/jbranchaud).
 
-_946 TILs and counting..._
+_947 TILs and counting..._
 
 ---
 
@@ -38,6 +38,7 @@ _946 TILs and counting..._
 * [Rails](#rails)
 * [React](#react)
 * [React Native](#react-native)
+* [React Testing Library](#react-testing-library)
 * [ReasonML](#reasonml)
 * [Ruby](#ruby)
 * [tmux](#tmux)
@@ -688,6 +689,10 @@ _946 TILs and counting..._
 
 - [Avoid The Notch With SafeAreaView](react_native/avoid-the-notch-with-safeareaview.md)
 
+### React Testing Library
+
+- [Test A Component That Uses React Portals](react-testing-library/test-a-component-that-uses-react-portals.md)
+
 ### ReasonML
 
 - [Break Out Of A While Loop](reason/break-out-of-a-while-loop.md)
diff --git a/react-testing-library/test-a-component-that-uses-react-portals.md b/react-testing-library/test-a-component-that-uses-react-portals.md
new file mode 100644
index 0000000..515bcb7
--- /dev/null
+++ b/react-testing-library/test-a-component-that-uses-react-portals.md
@@ -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)