toContainHTML does not handle self-closing tags

[just-boris]

• @testing-library/jest-dom version: 5.11.9 (latest)
• node version: n/a
• npm (or yarn) version: n/a

Relevant code or config:

import "@testing-library/jest-dom/extend-expect";
import React from "react";
import { render } from "@testing-library/react";

test("demo test", () => {
  const { container } = render(<div className="empty" />);
  // this assertion passes
  expect(container).toContainHTML('<div class="empty"></div>');
  // this one fails, even though it references the same structure
  // expect(container).toContainHTML('<div class="empty" />');  
});

Reproduction:

https://codesandbox.io/s/contains-html-assertion-demo-7nd5n?file=/src/__tests__/hello.js:0-343

Suggested solution:

toContainHTML matcher treats expected content as a string. I figured that this normalization fixes the matching:

function normalize(content) {
   const div = document.createElement('div');
   div.innerHTML = content;
   return div.innerHTML;
}

expect(container).toContainHTML(normalize('<div class="empty" />'));  // passes  

Perhaps the matcher inside could apply this normalization

[gnapse]

Thanks for the reports. What you suggest seems a reasonable approach. Can you contribute the change yourself?

[github-actions]

🎉 This issue has been resolved in version 5.11.10 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀