fix: Ignore comment nodes in toBeEmptyDOMElement

README.md

@@ -215,17 +215,21 @@ expect(getByTestId('not-empty')).not.toBeEmpty()
 toBeEmptyDOMElement()
 ```
 
-This allows you to assert whether an element has content or not.
+This allows you to assert whether an element has no visible content for the user.
+It ignores comments but will fail if the element contains whitespaces.
 
 #### Examples
 
 ```html
 <span data-testid="not-empty"><span data-testid="empty"></span></span>
+<span data-testid="with-whitespace"> </span>
+<span data-testid="with-comment"><!-- comment --></span>
 ```
 
 ```javascript
 expect(getByTestId('empty')).toBeEmptyDOMElement()
 expect(getByTestId('not-empty')).not.toBeEmptyDOMElement()
+expect(getByTestId('with-whitespace')).not.toBeEmptyDOMElement()
 ```
 
 <hr />

src/__tests__/to-be-empty-dom-element.js

@@ -5,17 +5,32 @@ test('.toBeEmptyDOMElement', () => {
     <span data-testid="not-empty">
         <span data-testid="empty"></span>
         <svg data-testid="svg-empty"></svg>
-    </span>`)
+    </span>
+    <span data-testid="with-comment"><!-- This Comment --></span>
+    <span data-testid="with-multiple-comments"><!-- Comment1 --> <!-- Comment2 --></span>
+    <span data-testid="with-element"><span></span></span>
+    <span data-testid="with-element-and-comment"><!--Comment--><span></span></span>
+    <span data-testid="with-whitespace"> </span>`)
 
   const empty = queryByTestId('empty')
   const notEmpty = queryByTestId('not-empty')
   const svgEmpty = queryByTestId('svg-empty')
+  const withComment = queryByTestId('with-comment')
+  const withMultipleComments = queryByTestId('with-multiple-comments')
+  const withElement = queryByTestId('with-element')
+  const withElementAndComment = queryByTestId('with-element-and-comment')
+  const withWhitespace = queryByTestId('with-whitespace')
   const nonExistantElement = queryByTestId('not-exists')
   const fakeElement = {thisIsNot: 'an html element'}
 
   expect(empty).toBeEmptyDOMElement()
   expect(svgEmpty).toBeEmptyDOMElement()
   expect(notEmpty).not.toBeEmptyDOMElement()
+  expect(withComment).toBeEmptyDOMElement()
+  expect(withMultipleComments).toBeEmptyDOMElement()
+  expect(withElement).not.toBeEmptyDOMElement()
+  expect(withElementAndComment).not.toBeEmptyDOMElement()
+  expect(withWhitespace).not.toBeEmptyDOMElement()
 
   // negative test cases wrapped in throwError assertions for coverage.
   expect(() => expect(empty).not.toBeEmptyDOMElement()).toThrowError()
@@ -24,6 +39,16 @@ test('.toBeEmptyDOMElement', () => {
 
   expect(() => expect(notEmpty).toBeEmptyDOMElement()).toThrowError()
 
+  expect(() => expect(withComment).not.toBeEmptyDOMElement()).toThrowError()
+
+  expect(() => expect(withMultipleComments).not.toBeEmptyDOMElement()).toThrowError()
+
+  expect(() => expect(withElement).toBeEmptyDOMElement()).toThrowError()
+
+  expect(() => expect(withElementAndComment).toBeEmptyDOMElement()).toThrowError()
+
+  expect(() => expect(withWhitespace).toBeEmptyDOMElement()).toThrowError()
+
   expect(() => expect(fakeElement).toBeEmptyDOMElement()).toThrowError()
 
   expect(() => {

src/to-be-empty-dom-element.js

@@ -4,7 +4,7 @@ export function toBeEmptyDOMElement(element) {
   checkHtmlElement(element, toBeEmptyDOMElement, this)
 
   return {
-    pass: element.innerHTML === '',
+    pass: isEmptyAfterRemovingComments(element),
     message: () => {
       return [
         this.utils.matcherHint(
@@ -19,3 +19,8 @@ export function toBeEmptyDOMElement(element) {
     },
   }
 }
+
+function isEmptyAfterRemovingComments(element){
+  const innerHTMLWithoutComments = element.innerHTML.replace(/(<!--(.|\s)*-->)/g, '');
+  return innerHTMLWithoutComments === '';
+}