Introduce a New Matcher: toHaveTagName

src/__tests__/to-have-tag-name.js

@@ -0,0 +1,18 @@
+import {render} from './helpers/test-utils'
+
+describe('.toHaveTagName', () => {
+  test('handles HTML elements', () => {
+    const {container} = render(`
+      <div></div>
+      <figure></figure>
+      <section></section>
+      <span></span>
+    `)
+
+    expect(container.querySelector('div')).toHaveTagName('div')
+    expect(container.querySelector('figure')).toHaveTagName('figure')
+    expect(container.querySelector('section')).toHaveTagName('section')
+    expect(container.querySelector('span')).toHaveTagName('span')
+    expect(container.querySelector('span')).not.toHaveTagName('div')
+  })
+})

src/matchers.js

@@ -11,6 +11,7 @@ export {toHaveRole} from './to-have-role'
 export {toHaveAccessibleName} from './to-have-accessible-name'
 export {toHaveAttribute} from './to-have-attribute'
 export {toHaveClass} from './to-have-class'
+export {toHaveTagName} from './to-have-tag-name'
 export {toHaveStyle} from './to-have-style'
 export {toHaveFocus} from './to-have-focus'
 export {toHaveFormValues} from './to-have-form-values'

src/to-have-tag-name.js

@@ -0,0 +1,38 @@
+import {checkHtmlElement, getMessage} from './utils'
+
+export function toHaveTagName(htmlElement, expectedTagName) {
+  checkHtmlElement(htmlElement, toHaveTagName, this)
+
+  if (!isValidTagName(expectedTagName)) {
+    throw new Error(
+      `Expected tag name must be a single lowercase word, got ${expectedTagName}`,
+    )
+  }
+
+  const actualTagName = htmlElement.tagName.toLowerCase()
+  const pass = expectedTagName === actualTagName
+
+  return {
+    pass,
+
+    message: () => {
+      const to = this.isNot ? 'not to' : 'to'
+      return getMessage(
+        this,
+        this.utils.matcherHint(
+          `${this.isNot ? '.not' : ''}.${toHaveTagName.name}`,
+          'element',
+          '',
+        ),
+        `Expected element ${to} have tag name`,
+        expectedTagName,
+        'Received',
+        actualTagName,
+      )
+    },
+  }
+}
+
+function isValidTagName(value) {
+  return typeof value === 'string' && /^[a-z]+$/.test(value)
+}