`toHaveDisplayValue` custom matcher

[cloud-walker]

I'm testing a labeled select that I query with getByLabelText, I then want to assert that the select has a default display name, but I can't find a jest matcher for that, here a snippet example:

const select = screen.getByLabelText('Fruits')
expect(select).toBeVisible()
expect(select).toHaveDisplayValue('Select a fruit')

For now I think I should write a custom matcher myself, or a more complicated query 🤔

[gnapse]

I'm sorry, not sure what you refer to with "default display name" of an element. Can you expand a bit?

[cloud-walker]

Sure, I mean the currently selected item, so if I have:

<label htmlFor="fruit">
  Fruits
</label>
<select name="fruit" id="fruit">
  <option value="" disabled selected>Select a fruit...</option>
  <option value="apple">Apple</option>
  <option value="ananas">Ananas</option>
  <option value="cherry">Cherry</option>
</select>

I want to be able to query the select by label text, and use the matcher to check that the displayed text is the one I want:

const select = screen.getByLabelText('Fruits')
expect(select).toBeVisible()
expect(select).toHaveDisplayValue('Select a fruit...')

// And if I want I can use it again to test changed values, like
fireEvent.change(select, {target: {value: {'apple'}}}})

expect(select).toHaveDisplayValue('Apple') // with capital letter 😉 

[cloud-walker]

There is already a testing-library query for that, but I want the matcher counterpart: https://testing-library.com/docs/dom-testing-library/api-queries#bydisplayvalue

[cloud-walker]

Is more "display value" than "display name" sooorry!

[gnapse]

Oh, I see. Makes sense. I'm all for it.

[cloud-walker]

I'll see if I can make a PR

[afontcu]

Solved in #223