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?

Corymb

From what I can tell. It does get logged: <h1 data-testid="currentWeatherOutput" />. By Screenshot, do you mean literally print screen?. Or are you looking more for snapshots? Also would help us if you show your test case file. – Aphorize

uhh... yes but the DOM has more content than just the <h1> so I guess that's why I'm confused. – Corymb

Need more info about code base. Are you using react-testing library for example? If not, why not? Or perhaps you're developing on react native and should react-native testing library. I can see you use screen from the base testing library functions but don't see how you're rending any components. – Aphorize

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

Tillford

Awesome library! Did you write that? 😮 – Myoglobin

Answer 2

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

Titania