fix: allow SVGElements in matchers (#29)

* Allow SVGElements in expect() matchers

Fixes #28

* Add jgoz as contributor

.all-contributorsrc

@@ -158,6 +158,16 @@
         "doc",
         "test"
       ]
+    },
+    {
+      "login": "jgoz",
+      "name": "John Gozde",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/132233?v=4",
+      "profile": "https://github.com/jgoz",
+      "contributions": [
+        "bug",
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -16,7 +16,7 @@
 [![downloads][downloads-badge]][npmtrends]
 [![MIT License][license-badge]][license]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-15-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
 [![Code of Conduct][coc-badge]][coc]
 
@@ -46,6 +46,7 @@ to maintain.
 - [Usage](#usage)
 - [Custom matchers](#custom-matchers)
   - [`toBeInTheDOM`](#tobeinthedom)
+  - [`toBeEmpty`](#tobeempty)
   - [`toContainElement`](#tocontainelement)
   - [`toHaveTextContent`](#tohavetextcontent)
   - [`toHaveAttribute`](#tohaveattribute)
@@ -318,7 +319,7 @@ Thanks goes to these people ([emoji key][emojis]):
 | [<img src="https://avatars.githubusercontent.com/u/1500684?v=3" width="100px;"/><br /><sub><b>Kent C. Dodds</b></sub>](https://kentcdodds.com)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=kentcdodds "Code") [📖](https://github.com/gnapse/jest-dom/commits?author=kentcdodds "Documentation") [🚇](#infra-kentcdodds "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/gnapse/jest-dom/commits?author=kentcdodds "Tests") | [<img src="https://avatars1.githubusercontent.com/u/2430381?v=4" width="100px;"/><br /><sub><b>Ryan Castner</b></sub>](http://audiolion.github.io)<br />[📖](https://github.com/gnapse/jest-dom/commits?author=audiolion "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/8008023?v=4" width="100px;"/><br /><sub><b>Daniel Sandiego</b></sub>](https://www.dnlsandiego.com)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=dnlsandiego "Code") | [<img src="https://avatars2.githubusercontent.com/u/12592677?v=4" width="100px;"/><br /><sub><b>Paweł Mikołajczyk</b></sub>](https://github.com/Miklet)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=Miklet "Code") | [<img src="https://avatars3.githubusercontent.com/u/464978?v=4" width="100px;"/><br /><sub><b>Alejandro Ñáñez Ortiz</b></sub>](http://co.linkedin.com/in/alejandronanez/)<br />[📖](https://github.com/gnapse/jest-dom/commits?author=alejandronanez "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1402095?v=4" width="100px;"/><br /><sub><b>Matt Parrish</b></sub>](https://github.com/pbomb)<br />[🐛](https://github.com/gnapse/jest-dom/issues?q=author%3Apbomb "Bug reports") [💻](https://github.com/gnapse/jest-dom/commits?author=pbomb "Code") [📖](https://github.com/gnapse/jest-dom/commits?author=pbomb "Documentation") [⚠️](https://github.com/gnapse/jest-dom/commits?author=pbomb "Tests") | [<img src="https://avatars1.githubusercontent.com/u/1288694?v=4" width="100px;"/><br /><sub><b>Justin Hall</b></sub>](https://github.com/wKovacs64)<br />[📦](#platform-wKovacs64 "Packaging/porting to new platform") |
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars1.githubusercontent.com/u/1241511?s=460&v=4" width="100px;"/><br /><sub><b>Anto Aravinth</b></sub>](https://github.com/antoaravinth)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=antoaravinth "Code") [⚠️](https://github.com/gnapse/jest-dom/commits?author=antoaravinth "Tests") [📖](https://github.com/gnapse/jest-dom/commits?author=antoaravinth "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3462296?v=4" width="100px;"/><br /><sub><b>Jonah Moses</b></sub>](https://github.com/JonahMoses)<br />[📖](https://github.com/gnapse/jest-dom/commits?author=JonahMoses "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;"/><br /><sub><b>Łukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=lgandecki "Code") [⚠️](https://github.com/gnapse/jest-dom/commits?author=lgandecki "Tests") [📖](https://github.com/gnapse/jest-dom/commits?author=lgandecki "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[🐛](https://github.com/gnapse/jest-dom/issues?q=author%3Asompylasar "Bug reports") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/4439618?v=4" width="100px;"/><br /><sub><b>Jesse Day</b></sub>](https://github.com/jday3)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=jday3 "Code") | [<img src="https://avatars0.githubusercontent.com/u/15199?v=4" width="100px;"/><br /><sub><b>Ernesto García</b></sub>](http://gnapse.github.io)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=gnapse "Code") [📖](https://github.com/gnapse/jest-dom/commits?author=gnapse "Documentation") [⚠️](https://github.com/gnapse/jest-dom/commits?author=gnapse "Tests") | [<img src="https://avatars0.githubusercontent.com/u/79312?v=4" width="100px;"/><br /><sub><b>Mark Volkmann</b></sub>](http://ociweb.com/mark/)<br />[🐛](https://github.com/gnapse/jest-dom/issues?q=author%3Amvolkmann "Bug reports") [💻](https://github.com/gnapse/jest-dom/commits?author=mvolkmann "Code") |
-| [<img src="https://avatars1.githubusercontent.com/u/1659099?v=4" width="100px;"/><br /><sub><b>smacpherson64</b></sub>](https://github.com/smacpherson64)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=smacpherson64 "Code") [📖](https://github.com/gnapse/jest-dom/commits?author=smacpherson64 "Documentation") [⚠️](https://github.com/gnapse/jest-dom/commits?author=smacpherson64 "Tests") |
+| [<img src="https://avatars1.githubusercontent.com/u/1659099?v=4" width="100px;"/><br /><sub><b>smacpherson64</b></sub>](https://github.com/smacpherson64)<br />[💻](https://github.com/gnapse/jest-dom/commits?author=smacpherson64 "Code") [📖](https://github.com/gnapse/jest-dom/commits?author=smacpherson64 "Documentation") [⚠️](https://github.com/gnapse/jest-dom/commits?author=smacpherson64 "Tests") | [<img src="https://avatars2.githubusercontent.com/u/132233?v=4" width="100px;"/><br /><sub><b>John Gozde</b></sub>](https://github.com/jgoz)<br />[🐛](https://github.com/gnapse/jest-dom/issues?q=author%3Ajgoz "Bug reports") [💻](https://github.com/gnapse/jest-dom/commits?author=jgoz "Code") |
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 

src/__tests__/index.js

@@ -8,32 +8,42 @@ test('.toBeInTheDOM', () => {
   const {queryByTestId} = render(`
     <span data-testid="count-container">
       <span data-testid="count-value"></span> 
+      <svg data-testid="svg-element"></svg>
     </span>`)
 
   const containerElement = queryByTestId('count-container')
   const valueElement = queryByTestId('count-value')
   const nonExistantElement = queryByTestId('not-exists')
+  const svgElement = queryByTestId('svg-element')
   const fakeElement = {thisIsNot: 'an html element'}
 
   // Testing toBeInTheDOM without container
   expect(valueElement).toBeInTheDOM()
+  expect(svgElement).toBeInTheDOM()
   expect(nonExistantElement).not.toBeInTheDOM()
 
   // negative test cases wrapped in throwError assertions for coverage.
   expect(() => expect(valueElement).not.toBeInTheDOM()).toThrowError()
 
+  expect(() => expect(svgElement).not.toBeInTheDOM()).toThrowError()
+
   expect(() => expect(nonExistantElement).toBeInTheDOM()).toThrowError()
 
   expect(() => expect(fakeElement).toBeInTheDOM()).toThrowError()
 
   // Testing toBeInTheDOM with container
   expect(valueElement).toBeInTheDOM(containerElement)
+  expect(svgElement).toBeInTheDOM(containerElement)
   expect(containerElement).not.toBeInTheDOM(valueElement)
 
   expect(() =>
     expect(valueElement).not.toBeInTheDOM(containerElement),
   ).toThrowError()
 
+  expect(() =>
+    expect(svgElement).not.toBeInTheDOM(containerElement),
+  ).toThrowError()
+
   expect(() =>
     expect(nonExistantElement).toBeInTheDOM(containerElement),
   ).toThrowError()
@@ -53,21 +63,26 @@ test('.toContainElement', () => {
       <span data-testid="parent">
         <span data-testid="child"></span>
       </span>
+      <svg data-testid="svg-element"></svg>
     </span>
     `)
 
   const grandparent = queryByTestId('grandparent')
   const parent = queryByTestId('parent')
   const child = queryByTestId('child')
+  const svgElement = queryByTestId('svg-element')
   const nonExistantElement = queryByTestId('not-exists')
   const fakeElement = {thisIsNot: 'an html element'}
 
   expect(grandparent).toContainElement(parent)
   expect(grandparent).toContainElement(child)
+  expect(grandparent).toContainElement(svgElement)
   expect(parent).toContainElement(child)
   expect(parent).not.toContainElement(grandparent)
+  expect(parent).not.toContainElement(svgElement)
   expect(child).not.toContainElement(parent)
   expect(child).not.toContainElement(grandparent)
+  expect(child).not.toContainElement(svgElement)
 
   // negative test cases wrapped in throwError assertions for coverage.
   expect(() =>
@@ -96,25 +111,33 @@ test('.toContainElement', () => {
   expect(() => expect(grandparent).toContainElement(fakeElement)).toThrowError()
   expect(() => expect(fakeElement).toContainElement(fakeElement)).toThrowError()
   expect(() => expect(grandparent).not.toContainElement(child)).toThrowError()
+  expect(() =>
+    expect(grandparent).not.toContainElement(svgElement),
+  ).toThrowError()
 })
 
 test('.toBeEmpty', () => {
   const {queryByTestId} = render(`
     <span data-testid="not-empty">
         <span data-testid="empty"></span>
+        <svg data-testid="svg-empty"></svg>
     </span>`)
 
   const empty = queryByTestId('empty')
   const notEmpty = queryByTestId('not-empty')
+  const svgEmpty = queryByTestId('svg-empty')
   const nonExistantElement = queryByTestId('not-exists')
   const fakeElement = {thisIsNot: 'an html element'}
 
   expect(empty).toBeEmpty()
+  expect(svgEmpty).toBeEmpty()
   expect(notEmpty).not.toBeEmpty()
 
   // negative test cases wrapped in throwError assertions for coverage.
   expect(() => expect(empty).not.toBeEmpty()).toThrowError()
 
+  expect(() => expect(svgEmpty).not.toBeEmpty()).toThrowError()
+
   expect(() => expect(notEmpty).toBeEmpty()).toThrowError()
 
   expect(() => expect(fakeElement).toBeEmpty()).toThrowError()
@@ -148,13 +171,17 @@ test('.toHaveAttribute', () => {
     <button data-testid="ok-button" type="submit" disabled>
       OK
     </button>
+    <svg data-testid="svg-element" width="12"></svg>
   `)
 
   expect(queryByTestId('ok-button')).toHaveAttribute('disabled')
   expect(queryByTestId('ok-button')).toHaveAttribute('type')
   expect(queryByTestId('ok-button')).not.toHaveAttribute('class')
   expect(queryByTestId('ok-button')).toHaveAttribute('type', 'submit')
   expect(queryByTestId('ok-button')).not.toHaveAttribute('type', 'button')
+  expect(queryByTestId('svg-element')).toHaveAttribute('width')
+  expect(queryByTestId('svg-element')).toHaveAttribute('width', '12')
+  expect(queryByTestId('ok-button')).not.toHaveAttribute('height')
 
   expect(() =>
     expect(queryByTestId('ok-button')).not.toHaveAttribute('disabled'),
@@ -171,6 +198,12 @@ test('.toHaveAttribute', () => {
   expect(() =>
     expect(queryByTestId('ok-button')).toHaveAttribute('type', 'button'),
   ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('svg-element')).not.toHaveAttribute('width'),
+  ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('svg-element')).not.toHaveAttribute('width', '12'),
+  ).toThrowError()
   expect(() =>
     expect({thisIsNot: 'an html element'}).not.toHaveAttribute(),
   ).toThrowError()
@@ -185,6 +218,9 @@ test('.toHaveClass', () => {
       <button data-testid="cancel-button">
         Cancel
       </button>
+      <svg data-testid="svg-spinner" class="spinner clockwise">
+        <path />
+      </svg>
     </div>
   `)
 
@@ -195,6 +231,9 @@ test('.toHaveClass', () => {
   expect(queryByTestId('delete-button')).toHaveClass('btn btn-danger')
   expect(queryByTestId('delete-button')).not.toHaveClass('btn-link')
   expect(queryByTestId('cancel-button')).not.toHaveClass('btn-danger')
+  expect(queryByTestId('svg-spinner')).toHaveClass('spinner')
+  expect(queryByTestId('svg-spinner')).toHaveClass('clockwise')
+  expect(queryByTestId('svg-spinner')).not.toHaveClass('wise')
 
   expect(() =>
     expect(queryByTestId('delete-button')).not.toHaveClass('btn'),
@@ -217,6 +256,12 @@ test('.toHaveClass', () => {
   expect(() =>
     expect(queryByTestId('cancel-button')).toHaveClass('btn-danger'),
   ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('svg-spinner')).not.toHaveClass('spinner'),
+  ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('svg-spinner')).toHaveClass('wise'),
+  ).toThrowError()
 })
 
 test('.toHaveStyle', () => {

src/utils.js

@@ -23,14 +23,19 @@ class HtmlElementTypeError extends Error {
         '',
       ),
       '',
-      `${receivedColor('received')} value must be an HTMLElement.`,
+      `${receivedColor(
+        'received',
+      )} value must be an HTMLElement or an SVGElement.`,
       printWithType('Received', received, printReceived),
     ].join('\n')
   }
 }
 
 function checkHtmlElement(htmlElement, ...args) {
-  if (!(htmlElement instanceof HTMLElement)) {
+  if (
+    !(htmlElement instanceof HTMLElement) &&
+    !(htmlElement instanceof SVGElement)
+  ) {
     throw new HtmlElementTypeError(htmlElement, ...args)
   }
 }