New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
toHaveDisplayValue
custom matcher
#221
Comments
I'm sorry, not sure what you refer to with "default display name" of an element. Can you expand a bit? |
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 😉 |
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 |
Is more "display value" than "display name" sooorry! |
toHaveDisplayName
custom matchertoHaveDisplayValue
custom matcher
Oh, I see. Makes sense. I'm all for it. |
I'll see if I can make a PR |
Solved in #223 |
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:For now I think I should write a custom matcher myself, or a more complicated query 🤔
The text was updated successfully, but these errors were encountered: