React Testing Library - How to see current state of the DOM when testing

Question

I am learning React Testing Library (many years of TDD experience in other languages)

This documentation on the React Testing Library says that when getByText fails, it "however it prints the state of your DOM under test":

https://testing-library.com/docs/dom-testing-library/api-debugging/

However, this does not happen for me on the current RTL.

Instead, I get this:

  ● 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, <script />, <style />
    <h1
      data-testid="currentWeatherOutput"
    />

      27 |   const currentWeatherOutput = screen.getByTestId('currentWeatherOutput')
      28 |
    > 29 |   getByText(currentWeatherOutput, "the current weather is: overcast clouds")

my package dependencies are

"dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "fetch": "^1.1.0",
    "msw": "^0.38.1",
    "node-fetch": "^3.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
  },

I have two more questions:

1. Can I drop into a debugger directly inside my test code? https://testing-library.com/docs/dom-testing-library/api-debugging/ mentions nothing about accessing a native JS debugger

2. Can I take a screenshot of the DOM (I guess no because this isn't actually headless?) and look at it?

Answer 1

Can I take a screenshot of the DOM (I guess no because this isn't actually headless?) and look at it?

Yes. You absolutely can. Check out Jest Preview (https://github.com/nvh95/jest-preview)

Jest Preview gives you the ability to "see" your app UI in a browser, instead of HTML in the terminal, just by 2 lines of code:

import { debug } from 'jest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
    debug();
  });
});

• Introduction: https://www.jest-preview.com/docs/getting-started/intro
• Installation guide: https://www.jest-preview.com/docs/getting-started/installation

Answer 2

You can use screen.debug() to debug your document or elements https://testing-library.com/docs/queries/about/#screendebug