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

admin管理员组

文章数量:1192918

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":

/

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? / 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?

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?

• javascript
• reactjs
• react-testing-library
• react-testing

Share Improve this question Follow edited Feb 22, 2022 at 14:47 Jason FB asked Feb 22, 2022 at 13:50 Jason FBJason FB 5,92044 gold badges4343 silver badges8080 bronze badges 3

• 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. – Tony Commented Feb 22, 2022 at 15:28
• uhh... yes but the DOM has more content than just the <h1> so I guess that's why I'm confused. – Jason FB Commented Feb 23, 2022 at 22:25
• 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. – Tony Commented Feb 24, 2022 at 15:52

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 20

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

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

本文标签： javascriptReact Testing LibraryHow to see current state of the DOM when testingStack Overflow