JSS style blocks overwhelm prettyDOM / debug output

[timbonicus]

Describe the feature you'd like:

The automatic debug output / prettyDOM is hard to pick through with JSS, since a rather large style block is added to the DOM with JSS classes. There should be a way to avoid JSS output (the material-ui library in our case dumps out 10,000 lines of CSS, which is thought-provoking in itself, but here we are).

Suggested implementation:

I was thinking of an option to prune style blocks from the output; @kentcdodds suggested that defaulting the debug output to the container instead of the documentElement might be a better idea.

[kentcdodds]

Thinking about it more, what if we use document.body? That would avoid this issue without making it harder/confusing for portals.

[timbonicus]

That would work well for my purposes; the JSS style blocks are in the document head. I know browsers are lenient with <style> in document.body, but I'm not sure that's worth worrying about.

[kentcdodds]

Hmmm... I actually think this change will need to be in react-testing-library because the way it works right now is it'll log out everything in the container that's the basis for the queries and in react-testing-library that's set to the documentElement. I think the best solution would probably be to just change that to document.body. I don't think anyone puts portals anywhere other than the document.body so we should be safe to make that change here.

Would you like to do that?

[timbonicus]

Thanks @kentcdodds! Submitted a react-testing-lib PR.