vitest-dev/vitest · error · Error

.toHaveDisplayValue() currently supports only input, textare

Error message

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

What it means

Thrown by toHaveDisplayValue (packages/browser/src/client/tester/expect/toHaveDisplayValue.ts:26-32) when the resolved element's tag is not SELECT, INPUT, or TEXTAREA. The matcher reads .value or selected options (getValues at line 72-78), which only exist on form controls; any other element (div, button, a, etc.) has no display value, so it errors out with a pointer to use a different matcher.

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 d568f8ce37)

Solutions

1. Re-target the assertion at the actual form control: expect(inputEl).toHaveDisplayValue('x').
2. Use a more specific locator: page.elementLocator(document.body).getByLabelText('Email') to get the input, not the label.
3. For non-form elements, switch matcher: toHaveTextContent (toHaveText) or toHaveAttribute('value').

Example fix

// before — queried the wrapping label/div
expect(page.getByText('Email')).toHaveDisplayValue('a@b.com')
// after — target the input itself
expect(page.elementLocator(document.body).getByLabelText('Email')).toHaveDisplayValue('a@b.com')

function isFormControl(el: Element): el is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
  return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement
}
const el = page.elementLocator(document.body).getByLabelText('Email').element()
if (isFormControl(el)) {
  expect(el).toHaveDisplayValue('a@b.com')
}

function isFormControl(el: Element): el is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
  return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement
}

When it happens

Trigger: Calling expect(nonFormEl).toHaveDisplayValue('x') where nonFormEl is a <div>, <span>, <button>, etc. — typically the wrong element was queried, or a query returned a wrapper/container instead of the input itself.

Common situations: Querying a label or field container instead of the input; component renders an input only after interaction and the test queries too early; off-by-one selector returning a parent.

Related errors

• .toHaveDisplayValue() currently does not support input[type=
• .toContainHTML() expects a string value, got ${htmlText}
• Exact option does not support RegExp expected class names
• Element not found: ${v.element}
• aria adapter expects an Element

AI-assisted analysis of vitest-dev/vitest@d568f8ce37 (2026-08-03). Data as JSON: /data/errors/072cab67c4dc5ba8.json. Report an issue: GitHub.