fix: normalize expected value in toContainHTML (#349)

resolves #347

Author: just-boris

src/__tests__/to-contain-html.js

@@ -18,21 +18,22 @@ describe('.toContainHTML', () => {
     const nonExistantElement = queryByTestId('not-exists')
     const fakeElement = {thisIsNot: 'an html element'}
     const stringChildElement = '<span data-testid="child"></span>'
+    const stringChildElementSelfClosing = '<span data-testid="child" />'
     const incorrectStringHtml = '<span data-testid="child"></div>'
     const nonExistantString = '<span> Does not exists </span>'
     const svgElement = queryByTestId('svg-element')
 
     expect(grandparent).toContainHTML(stringChildElement)
     expect(parent).toContainHTML(stringChildElement)
     expect(child).toContainHTML(stringChildElement)
+    expect(child).toContainHTML(stringChildElementSelfClosing)
     expect(grandparent).not.toContainHTML(nonExistantString)
     expect(parent).not.toContainHTML(nonExistantString)
     expect(child).not.toContainHTML(nonExistantString)
     expect(child).not.toContainHTML(nonExistantString)
-    expect(grandparent).not.toContainHTML(incorrectStringHtml)
-    expect(parent).not.toContainHTML(incorrectStringHtml)
-    expect(child).not.toContainHTML(incorrectStringHtml)
-    expect(child).not.toContainHTML(incorrectStringHtml)
+    expect(grandparent).toContainHTML(incorrectStringHtml)
+    expect(parent).toContainHTML(incorrectStringHtml)
+    expect(child).toContainHTML(incorrectStringHtml)
 
     // negative test cases wrapped in throwError assertions for coverage.
     expect(() =>
@@ -59,6 +60,9 @@ describe('.toContainHTML', () => {
     expect(() =>
       expect(child).not.toContainHTML(stringChildElement),
     ).toThrowError()
+    expect(() =>
+      expect(child).not.toContainHTML(stringChildElementSelfClosing),
+    ).toThrowError()
     expect(() => expect(child).toContainHTML(nonExistantString)).toThrowError()
     expect(() => expect(parent).toContainHTML(nonExistantString)).toThrowError()
     expect(() =>
@@ -72,16 +76,16 @@ describe('.toContainHTML', () => {
       expect(grandparent).toContainHTML(nonExistantElement),
     ).toThrowError()
     expect(() =>
-      expect(nonExistantElement).toContainHTML(incorrectStringHtml),
+      expect(nonExistantElement).not.toContainHTML(incorrectStringHtml),
     ).toThrowError()
     expect(() =>
-      expect(grandparent).toContainHTML(incorrectStringHtml),
+      expect(grandparent).not.toContainHTML(incorrectStringHtml),
     ).toThrowError()
     expect(() =>
-      expect(child).toContainHTML(incorrectStringHtml),
+      expect(child).not.toContainHTML(incorrectStringHtml),
     ).toThrowError()
     expect(() =>
-      expect(parent).toContainHTML(incorrectStringHtml),
+      expect(parent).not.toContainHTML(incorrectStringHtml),
     ).toThrowError()
   })
 

src/to-contain-html.js

@@ -1,10 +1,20 @@
 import {checkHtmlElement} from './utils'
 
+function getNormalizedHtml(container, htmlText) {
+  const div = container.ownerDocument.createElement('div')
+  div.innerHTML = htmlText
+  return div.innerHTML
+}
+
 export function toContainHTML(container, htmlText) {
   checkHtmlElement(container, toContainHTML, this)
 
+  if (typeof htmlText !== 'string') {
+    throw new Error(`.toContainHTML() expects a string value, got ${htmlText}`)
+  }
+
   return {
-    pass: container.outerHTML.includes(htmlText),
+    pass: container.outerHTML.includes(getNormalizedHtml(container, htmlText)),
     message: () => {
       return [
         this.utils.matcherHint(