title: React Testing Library - How to see current state of the DOM when testing
body: <p>I am learning React Testing Library (many years of TDD experience in other languages)</p>
  <p>This documentation on the React Testing Library says that when <code>getByText</code> fails, it &quot;however it prints the state of your DOM under test&quot;:</p>
  <p><a href="https://testing-library.com/docs/dom-testing-library/api-debugging/" rel="nofollow noreferrer">https://testing-library.com/docs/dom-testing-library/api-debugging/</a></p>
  <p><a href="https://i.stack.imgur.com/yP1lz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yP1lz.png" alt="enter image description here" /></a></p>
  <p>However, this does not happen for me on the current RTL.</p>
  <p>Instead, I get this:</p>
  <pre><code>  ● loads and displays greeting
  
      TestingLibraryElementError: Unable to find an element with the text: the current weather is: overcast clouds. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
  
      Ignored nodes: comments, &lt;script /&gt;, &lt;style /&gt;
      &lt;h1
        data-testid=&quot;currentWeatherOutput&quot;
      /&gt;
  
        27 |   const currentWeatherOutput = screen.getByTestId('currentWeatherOutput')
        28 |
      &gt; 29 |   getByText(currentWeatherOutput, &quot;the current weather is: overcast clouds&quot;)
  </code></pre>
  <p><a href="https://i.stack.imgur.com/D3J7O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D3J7O.png" alt="enter image description here" /></a></p>
  <p>my package dependencies are</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;@testing-library/jest-dom&quot;: &quot;^5.16.1&quot;,
      &quot;@testing-library/react&quot;: &quot;^12.1.2&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^13.5.0&quot;,
      &quot;fetch&quot;: &quot;^1.1.0&quot;,
      &quot;msw&quot;: &quot;^0.38.1&quot;,
      &quot;node-fetch&quot;: &quot;^3.2.0&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-scripts&quot;: &quot;5.0.0&quot;,
      &quot;web-vitals&quot;: &quot;^2.1.2&quot;
    },
  </code></pre>
  <p>I have two more questions:</p>
  <ol>
  <li><p>Can I drop into a debugger directly inside my test code? <a href="https://testing-library.com/docs/dom-testing-library/api-debugging/" rel="nofollow noreferrer">https://testing-library.com/docs/dom-testing-library/api-debugging/</a> mentions nothing about accessing a native JS debugger</p>
  </li>
  <li><p>Can I take a screenshot of the DOM (I guess no because this isn't actually headless?) and look at it?</p>
  </li>
  </ol>