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

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)

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)