0
613
ViewsReact Testing Library - How to see current state of the DOM when testing
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:
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
Can I take a screenshot of the DOM (I guess no because this isn't actually headless?) and look at it?
2 answers
Answer question0
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
0
You can use screen.debug() to debug your document or elements https://testing-library.com/docs/queries/about/#screendebug