How to view HTML from getELementsByClassName in Testing Library

Question

I am using the getElementsByClassName on the container object using React Testing Library

let e = container.getElementsByClassName("my-Table-row");

How do I view the HTML in "e" ? All I have is something that looks like :

Proxy {Symbol(impl): HTMLCollectionImpl}

....which doesnt help much.

console.info(..) also does not give back anything satisfactory.

Answer 1

As getElementsByClassName returns an HTMLCollection, you need to iterate over that, then get the HTML for each HTMLElement using innerHTML.

const { container, debug } = render(
  <>
    <div class="my-Table-row"><div>Table row</div></div>
    <div class="my-Table-row"><div>Table row</div></div>
  </>
);

const itemsAsHtmlStrings = Array
  .from(container.getElementsByClassName('my-Table-row'))
  .map(item => item.innerHTML);

console.info(itemsAsHtmlStrings.join('\n'));