.all-contributorsrc

@@ -766,6 +766,34 @@
       "contributions": [
         "maintenance"
       ]
+    },
+    {
+      "login": "aleks-elkin",
+      "name": "Aleksandr Elkin",
+      "avatar_url": "https://avatars.githubusercontent.com/u/55530374?v=4",
+      "profile": "https://github.com/aleks-elkin",
+      "contributions": [
+        "maintenance"
+      ]
+    },
+    {
+      "login": "vorant94",
+      "name": "Mordechai Dror",
+      "avatar_url": "https://avatars.githubusercontent.com/u/9719319?v=4",
+      "profile": "https://www.vorant94.io/",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "waynevanson",
+      "name": "Wayne Van Son",
+      "avatar_url": "https://avatars.githubusercontent.com/u/29592214?v=4",
+      "profile": "http://www.waynevanson.com",
+      "contributions": [
+        "code",
+        "test"
+      ]
     }
   ],
   "repoHost": "https://github.com",

README.md

@@ -996,6 +996,9 @@ It accepts `<input>`, `<select>` and `<textarea>` elements with the exception of
 matched only using [`toBeChecked`](#tobechecked) or
 [`toHaveFormValues`](#tohaveformvalues).
 
+It also accepts elements with roles `meter`, `progressbar`, `slider` or
+`spinbutton` and checks their `aria-valuenow` attribute (as a number).
+
 For all other form elements, the value is matched using the same algorithm as in
 [`toHaveFormValues`](#tohaveformvalues) does.
 
@@ -1547,6 +1550,11 @@ Thanks goes to these people ([emoji key][emojis]):
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/tonyhallett"><img src="https://avatars.githubusercontent.com/u/11292998?v=4?s=100" width="100px;" alt="Tony Hallett"/><br /><sub><b>Tony Hallett</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/issues?q=author%3Atonyhallett" title="Bug reports">🐛</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ddolcimascolo"><img src="https://avatars.githubusercontent.com/u/5468291?v=4?s=100" width="100px;" alt="David DOLCIMASCOLO"/><br /><sub><b>David DOLCIMASCOLO</b></sub></a><br /><a href="#maintenance-ddolcimascolo" title="Maintenance">🚧</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/aleks-elkin"><img src="https://avatars.githubusercontent.com/u/55530374?v=4?s=100" width="100px;" alt="Aleksandr Elkin"/><br /><sub><b>Aleksandr Elkin</b></sub></a><br /><a href="#maintenance-aleks-elkin" title="Maintenance">🚧</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.vorant94.io/"><img src="https://avatars.githubusercontent.com/u/9719319?v=4?s=100" width="100px;" alt="Mordechai Dror"/><br /><sub><b>Mordechai Dror</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=vorant94" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://www.waynevanson.com"><img src="https://avatars.githubusercontent.com/u/29592214?v=4?s=100" width="100px;" alt="Wayne Van Son"/><br /><sub><b>Wayne Van Son</b></sub></a><br /><a href="https://github.com/testing-library/jest-dom/commits?author=waynevanson" title="Code">💻</a> <a href="https://github.com/testing-library/jest-dom/commits?author=waynevanson" title="Tests">⚠️</a></td>
+    </tr>
   </tbody>
 </table>
 

package.json

@@ -81,7 +81,6 @@
   "license": "MIT",
   "dependencies": {
     "@adobe/css-tools": "^4.4.0",
-    "@babel/runtime": "^7.9.2",
     "aria-query": "^5.0.0",
     "chalk": "^3.0.0",
     "css.escape": "^1.5.1",

src/__tests__/to-have-value.js

@@ -203,4 +203,18 @@ Received:
 <red>  foo</>
 `)
   })
+
+  test('handles value of aria-valuenow', () => {
+    const valueToCheck = 70
+    const {queryByTestId} = render(`
+        <div role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${valueToCheck}" data-testid="meter"></div>
+        <div role="textbox" aria-valuenow="${valueToCheck}" data-testid="textbox"></div>
+    `)
+
+    expect(queryByTestId('meter')).toHaveValue(valueToCheck)
+    expect(queryByTestId('meter')).not.toHaveValue(valueToCheck + 1)
+
+    // Role that does not support aria-valuenow
+    expect(queryByTestId('textbox')).not.toHaveValue(70)
+  })
 })

src/utils.js

@@ -196,18 +196,28 @@ function getInputValue(inputElement) {
   }
 }
 
+const rolesSupportingValues = ['meter', 'progressbar', 'slider', 'spinbutton']
+function getAccessibleValue(element) {
+  if (!rolesSupportingValues.includes(element.getAttribute('role'))) {
+    return undefined
+  }
+  return Number(element.getAttribute('aria-valuenow'))
+}
+
 function getSingleElementValue(element) {
   /* istanbul ignore if */
   if (!element) {
     return undefined
   }
+
   switch (element.tagName.toLowerCase()) {
     case 'input':
       return getInputValue(element)
     case 'select':
       return getSelectValue(element)
-    default:
-      return element.value
+    default: {
+      return element.value ?? getAccessibleValue(element)
+    }
   }
 }
 

types/vitest.d.ts

@@ -1,11 +1,15 @@
 import {type expect} from 'vitest'
 import {type TestingLibraryMatchers} from './matchers'
 
-export {}
-declare module '@vitest/expect' {
-  interface JestAssertion<T = any>
+declare module 'vitest' {
+  interface Assertion<T = any>
     extends TestingLibraryMatchers<
       ReturnType<typeof expect.stringContaining>,
       T
     > {}
+  interface AsymmetricMatchersContaining
+    extends TestingLibraryMatchers<
+      ReturnType<typeof expect.stringContaining>,
+      any
+    > {}
 }