Dom-testing-library: Add a function for printing a simple DOM representation for debugging

[jlongster]

Would you be interested in a function like this? The only annoying thing I've found with using jsdom is that it's hard to debug if you don't know what's going on or are confused. In the browser you can just look at it, but you can't with jsdom. This gives me most of what I want:

function prettyDOM(node, indent = 0) {
  let str = '';
  if (node) {
    str += ' '.repeat(indent) + (node.tagName || node.textContent) + '\n';
    for (let child of node.childNodes) {
      str += debugDOM(child, indent + 2);
    }
  }
  return str;
}

You can now do console.log(prettyDOM(node)) and get an output like this in the terminal:

[jlongster]

Even better, add the attached testid to the output (and maybe allow the user to pass in specific attributes they want printed?):

function debugDOM(node, indent = 0) {
  let str = '';
  if (node) {
    str += ' '.repeat(indent);
    if (node.tagName) {
      str += node.tagName + ' ' + (node.dataset['testid'] || '') + '\n';
    } else {
      str += node.textContent + '\n';
    }

    for (let child of node.childNodes) {
      str += debugDOM(child, indent + 2);
    }
  }
  return str;
}

[kentcdodds]

Perhaps we could expose this:

https://github.com/kentcdodds/dom-testing-library/blob/131a20bcc7cca4c0853acc49365a6c4746165471/src/queries.js#L150-L160

What do you think?

[jlongster]

Yeah, that's probably good! I like seeing a more concise form, is there a way to customize it at all? I basically don't care about most of my attributes (and there is quite a bit in my dom, which makes it harder to read). It's not a big deal though, I'd be fine just using that function.

[kentcdodds]

I'd be happy to accept a PR to extract this function to its own module so we can expose it :+1:

[gnapse]

@kentcdodds I can do it. Also, do you think it should publicly keep that name htmlElementToDisplay? I think I like something more along the lines of debugDOM above for the name.

[kentcdodds]

Thanks @gnapse! How about prettyDOM as suggested in @jlongster's util? Perhaps we could also expose a logDOM(container) as a shortcut to console.log(prettyDOM(container)) 🤔

[Zirro]

This custom formatter and jsdom's serialize() -function may be of interest to you as well.

[kentcdodds]

I'm pretty happy with the printDOM API :+1:

I think I'd like to re-export it in react-testing-library :)