Menu
I am using react jest with react testing library to test my component. I am facing a weird issue. I am usng debug return by render from testing-library.
test('component should work', async () => { const { findByText, debug } = render(<MyComponent />); const myElement = await findByText(/someText/i); debug(); }); 
As you can see in the screenshot there are incomplete dev and closing tags for parents are missing.
488
The debug method, accessible from the screen object, is a helpful tool in React Testing Library's API that allows you to see the current HTML output of components as you build out your tests. In this section, we will learn how to display the resulting DOM output of an entire component or specific elements.
Use data-test-id for <button> element. Select one of the ancestors of the <Click /> component and then select the button within(...) this scope. Click on the selected element with fireEvent and check that nothing has happened.
You need to change the value of DEBUG_PRINT_LIMIT env variable (default is 7000).
For example, run your tests with: DEBUG_PRINT_LIMIT=10000 yarn test
Source: https://github.com/testing-library/dom-testing-library/blob/master/src/pretty-dom.js#L24
151
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
