diff --git a/src/__tests__/to-have-value.js b/src/__tests__/to-have-value.js
index 91621d4f..fff74b4f 100644
--- a/src/__tests__/to-have-value.js
+++ b/src/__tests__/to-have-value.js
@@ -124,6 +124,26 @@ describe('.toHaveValue', () => {
`)
})
+ test('throws with type information when the expected text input value has loose equality with received value', () => {
+ const {container} = render(``)
+ const input = container.firstChild
+ let errorMessage
+ try {
+ expect(input).toHaveValue(8)
+ } catch (error) {
+ errorMessage = error.message
+ }
+
+ expect(errorMessage).toMatchInlineSnapshot(`
+ "expect(>element>).toHaveValue(>8>)>
+
+ Expected the element to have value:
+ 8 (number)>
+ Received:
+ 8 (string)>"
+ `)
+ })
+
test('throws when using not but the expected input value does match', () => {
const {container} = render(``)
const input = container.firstChild
diff --git a/src/to-have-value.js b/src/to-have-value.js
index d7e41d98..fa1a101f 100644
--- a/src/to-have-value.js
+++ b/src/to-have-value.js
@@ -21,6 +21,14 @@ export function toHaveValue(htmlElement, expectedValue) {
const receivedValue = getSingleElementValue(htmlElement)
const expectsValue = expectedValue !== undefined
+
+ let expectedTypedValue = expectedValue
+ let receivedTypedValue = receivedValue
+ if (expectedValue == receivedValue && expectedValue !== receivedValue) {
+ expectedTypedValue = `${expectedValue} (${typeof expectedValue})`
+ receivedTypedValue = `${receivedValue} (${typeof receivedValue})`
+ }
+
return {
pass: expectsValue
? isEqualWith(receivedValue, expectedValue, compareArraysAsSet)
@@ -35,9 +43,9 @@ export function toHaveValue(htmlElement, expectedValue) {
return getMessage(
matcher,
`Expected the element ${to} have value`,
- expectsValue ? expectedValue : '(any)',
+ expectsValue ? expectedTypedValue : '(any)',
'Received',
- receivedValue,
+ receivedTypedValue,
)
},
}