fix: .toHaveValue() / .toHaveFormValues() on input type range now expect a number

README.md

@@ -842,8 +842,8 @@ is obtained depending on the type of form control. For instance, `<input>`
 elements have a `value` attribute, but `<select>` elements do not. Here's a list
 of all cases covered:
 
-- `<input type="number">` elements return the value as a **number**, instead of
-  a string.
+- `<input type="number">` and `<input type="range">` elements return the value
+  as a **number**, instead of a string.
 - `<input type="checkbox">` elements:
   - if there's a single one with the given `name` attribute, it is treated as a
     **boolean**, returning `true` if the checkbox is checked, `false` if
@@ -1004,6 +1004,7 @@ For all other form elements, the value is matched using the same algorithm as in
 ```html
 <input type="text" value="text" data-testid="input-text" />
 <input type="number" value="5" data-testid="input-number" />
+<input type="range" value="5" data-testid="input-range" />
 <input type="text" data-testid="input-empty" />
 <select multiple data-testid="select-number">
   <option value="first">First Value</option>
@@ -1017,11 +1018,13 @@ For all other form elements, the value is matched using the same algorithm as in
 ```javascript
 const textInput = getByTestId('input-text')
 const numberInput = getByTestId('input-number')
+const rangeInput = getByTestId('input-range')
 const emptyInput = getByTestId('input-empty')
 const selectInput = getByTestId('select-number')
 
 expect(textInput).toHaveValue('text')
 expect(numberInput).toHaveValue(5)
+expect(rangeInput).toHaveValue(5)
 expect(emptyInput).not.toHaveValue()
 expect(selectInput).toHaveValue(['second', 'third'])
 ```

src/__tests__/to-have-form-values.js

@@ -174,6 +174,21 @@ describe('.toHaveFormValues', () => {
     })
   })
 
+  it('handles <input type="range"> values correctly', () => {
+    const renderInputRange = value => {
+      const {container} = render(`
+        <form>
+          <input type="range" name="volume" value="${value}">
+        </form>
+      `)
+      return container.querySelector('form')
+    }
+
+    expect(renderInputRange('10')).toHaveFormValues({
+      volume: 10,
+    })
+  })
+
   describe('edge cases', () => {
     // This is also to ensure 100% code coverage for edge cases
     it('detects multiple elements with the same name but different type', () => {

src/__tests__/to-have-value.js

@@ -47,6 +47,29 @@ describe('.toHaveValue', () => {
     expect(queryByTestId('without')).toHaveValue(10)
   })
 
+  test('handles value of range input', () => {
+    const {queryByTestId} = render(`
+        <input type="range" value="5" data-testid="range" />
+        <input type="range" value="" data-testid="empty" />
+        <input type="range" data-testid="without" />
+    `)
+
+    expect(queryByTestId('range')).toHaveValue(5)
+    expect(queryByTestId('range')).toHaveValue()
+    expect(queryByTestId('range')).not.toHaveValue(4)
+    expect(queryByTestId('range')).not.toHaveValue('5')
+
+    // Input type range value default to 50
+    expect(queryByTestId('empty')).toHaveValue(50)
+    expect(queryByTestId('empty')).not.toHaveValue('5')
+
+    // Input type range value default to 50
+    expect(queryByTestId('without')).toHaveValue(50)
+    expect(queryByTestId('without')).not.toHaveValue('10')
+    queryByTestId('without').value = 10
+    expect(queryByTestId('without')).toHaveValue(10)
+  })
+
   test('handles value of select element', () => {
     const {queryByTestId} = render(`
       <select data-testid="single">

src/utils.js

@@ -188,6 +188,7 @@ function getSelectValue({multiple, options}) {
 function getInputValue(inputElement) {
   switch (inputElement.type) {
     case 'number':
+    case 'range':
       return inputElement.value === '' ? null : Number(inputElement.value)
     case 'checkbox':
       return inputElement.checked