vitest-dev/vitest · error · Error

.toHaveDisplayValue() currently supports only input…

Error message

.toHaveDisplayValue() currently supports only input, textarea or select elements, try with another matcher instead.

What it means

.toHaveDisplayValue() only knows how to read the value of INPUT, TEXTAREA, and SELECT elements. If the passed element has any other tag, the matcher throws rather than returning a misleading pass/fail. The check runs after element extraction and before any value comparison.

Solutions

1. Target the actual input/textarea/select element inside the wrapper.
2. Use a different matcher (e.g. toHaveTextContent) for non-form elements.
3. If testing a custom element, query its inner input first.

Example fix

// before
expect(wrapperEl).toHaveDisplayValue('Jane')
// after
expect(wrapperEl.querySelector('input')!).toHaveDisplayValue('Jane')

const SUPPORTED = ['INPUT', 'TEXTAREA', 'SELECT']
if (!SUPPORTED.includes(el.tagName)) {
  // pick a different matcher (e.g. toHaveTextContent)
}
expect(el).toHaveDisplayValue('x')

function isDisplayValueElement(el: Element): el is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
  return ['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName)
}

When it happens

Trigger: Calling expect(divEl).toHaveDisplayValue('x') on a div/span/p/etc.; calling on an element resolved from a Locator that targeted a non-form element; refactoring that changed the queried selector.

Common situations: Generic assertions applied to wrapper elements; copy-paste of assertions across components without re-checking the target tag; custom elements whose tag is not in the supported list.

Related errors

• .toHaveDisplayValue() currently does not support input
• toHaveFormValues must be called on a form or a fieldset…
• Exact option does not support RegExp expected class names
• input with type=checkbox or type=radio cannot be used with…
• Multiple form elements with the same name must be of the…

AI-assisted analysis of vitest-dev/vitest@1fa9837ec2 (2026-08-11). Data as JSON: /api/errors/072cab67c4dc5ba8. Report an issue: GitHub.

Appendix: source

Thrown at packages/browser/src/client/tester/expect/toHaveDisplayValue.ts:29

 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 */

import type { MatcherResult, MatcherState } from 'vitest'
import type { Locator } from '../locators'
import { getElementFromUserInput, getMessage, getTag, isInputElement } from './utils'

export default function toHaveDisplayValue(
  this: MatcherState,
  actual: Element | Locator,
  expectedValue: string | RegExp | Array<string | RegExp>,
): MatcherResult {
  const htmlElement = getElementFromUserInput(actual, toHaveDisplayValue, this)
  const tagName = getTag(htmlElement)

  if (!['SELECT', 'INPUT', 'TEXTAREA'].includes(tagName)) {
    throw new Error(
      '.toHaveDisplayValue() currently supports only input, textarea or select elements, try with another matcher instead.',
    )
  }

  if (isInputElement(htmlElement) && ['radio', 'checkbox'].includes(htmlElement.type)) {
    throw new Error(
      `.toHaveDisplayValue() currently does not support input[type="${htmlElement.type}"], try with another matcher instead.`,
    )
  }

  const values = getValues(tagName, htmlElement)
  const expectedValues = getExpectedValues(expectedValue)
  const numberOfMatchesWithValues = expectedValues.filter(expected =>
    values.some(value =>
      expected instanceof RegExp
        ? expected.test(value)
        : this.equals(value, String(expected), this.customTesters),
    ),

View on GitHub (pinned to 1fa9837ec2)