fix: .toHaveValue()/.toHaveFormValues() on input type range now expec…

…t a number

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

@@ -189,6 +189,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