I'm rendering a Material-UI <TextField> with select prop; i.e. a list. The list is dynamically build up depending on some arguments. Each item looks something like this, where value is a unique date string:
<MenuItem key={value} value={value}>some text</MenuItem>
I want to test if the menu/list items are rendered with the correct text and values. To do that I'm using the @testing-library/react framework.
An excerpt of the test:
...
const items = screen.getAllByRole('menuitem');
expect(items[0]).toHaveTextContent('some text');
expect(items[0]).toHaveValue('2023-09-30T22:00:00.000Z');
...
Getting the text (toHaveTextContent) is fine. However, when I use the toHaveValue matcher, I get an (for me) unexpected error:
Expected the element to have value:
2023-09-30T22:00:00.000Z
Received:
2023
If I run screen.debug() I get:
<li
aria-disabled="false"
class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
role="menuitem"
tabindex="-1"
value="2023-09-30T22:00:00.000Z"
>
some text
<span
class="MuiTouchRipple-root"
/>
</li>
This suggests that the item indeed has the value I expect. What am I doing wrong?
