vitest-dev/vitest · error · Error

.toHaveDisplayValue() currently does not support input[type=

Error message

.toHaveDisplayValue() currently does not support input[type="${htmlElement.type}"], try with another matcher instead.

What it means

Thrown by toHaveDisplayValue (packages/browser/src/client/tester/expect/toHaveDisplayValue.ts:34-38) when the element IS an <input> but its type is 'radio' or 'checkbox'. Those input types carry checked state, not a textual display value, so reading .value is semantically wrong; the matcher refuses them and points to a more appropriate matcher.

Source

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

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),
    ),
  ).length

  const matchedWithAllValues = numberOfMatchesWithValues === values.length
  const matchedWithAllExpectedValues
    = numberOfMatchesWithValues === expectedValues.length

View on GitHub (pinned to d568f8ce37)

Solutions

For checked state, use toBeChecked() / expect(el).toBeChecked() or toHaveProperty('checked', true).
For the value attribute, use toHaveAttribute('value', '...').
If you genuinely need the option's label text, query the associated <label> or option element and use toHaveText.

Example fix

// before
expect(checkboxEl).toHaveDisplayValue('on')
// after
expect(checkboxEl).toBeChecked()
// or, for the value attribute:
expect(checkboxEl).toHaveAttribute('value', 'on')

Defensive patterns

Strategy: validation

Validate before calling

function isTextualInput(el: Element): el is HTMLInputElement {
  return el instanceof HTMLInputElement
    && !['radio', 'checkbox'].includes(el.type)
}
const el = /* your element */
if (isTextualInput(el) || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement) {
  expect(el).toHaveDisplayValue('...')
} else if (el instanceof HTMLInputElement && ['radio','checkbox'].includes(el.type)) {
  expect(el).toBeChecked()
}

Type guard

function isToggleInput(el: Element): el is HTMLInputElement {
  return el instanceof HTMLInputElement && ['radio', 'checkbox'].includes(el.type)
}

Prevention

For checkbox/radio inputs use toBeChecked or toHaveAttribute('value').
Reserve toHaveDisplayValue for text inputs, textareas, and selects.

When it happens

Trigger: Calling expect(checkboxEl).toHaveDisplayValue('true') or expect(radioEl).toHaveDisplayValue('option1') on an <input type="checkbox"> or <input type="radio">.

Common situations: Generic form helpers that apply toHaveDisplayValue to all inputs; tests written for text inputs copied onto toggle inputs without changing the matcher.

Related errors

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