Add Pretty Print Some Dom To Debug A Test as a RTL til

Author: jbranchaud

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).
 
-_948 TILs and counting..._
+_949 TILs and counting..._
 
 ---
 
@@ -692,6 +692,7 @@ _948 TILs and counting..._
 ### React Testing Library
 
 - [findBy\* Queries Have Async Built In](react-testing-library/find-by-queries-have-async-built-in.md)
+- [Pretty Print Some DOM To Debug A Test](react-testing-library/pretty-print-some-dom-to-debug-a-test.md)
 - [Test A Component That Uses React Portals](react-testing-library/test-a-component-that-uses-react-portals.md)
 
 ### ReasonML

react-testing-library/pretty-print-some-dom-to-debug-a-test.md

@@ -0,0 +1,32 @@
+# Pretty Print Some DOM To Debug A Test
+
+Our test's assertions can help guide what needs to change in the code.
+Sometimes those test failures can be too opaque to be helpful.
+
+It'd be easier if we could just take a peek at how the component is rendering.
+
+```javascript
+import { render, screen } from "@testing-library/react";
+import { prettyDOM } from "@testing-library/dom";
+import "@testing-library/jest-dom/extend-expect";
+
+import MyComponent from "../MyComponent";
+
+test("renders MyComponent", () => {
+  const { container } = render(<MyComponent />);
+
+  console.log(prettyDOM(container));
+
+  const nameInput = screen.getByLabelText("Name");
+
+  console.log(prettyDOM(nameInput));
+
+  // some expectations
+});
+```
+
+Passing the rendered container or elements that we've queried for to the
+[`prettyDOM`](https://testing-library.com/docs/dom-testing-library/api-helpers#prettydom)
+utility creates a formatted, syntax-highlighted version of that part of the
+virtual DOM (without all the React Internal noise). This can then be logged out
+for debugging purposes.