Closed
Description
Hi!
I'm having problems trying to do a dummy test in select component:
react-testing-libraryversion: "@testing-library/react": "^8.0.9"reactversion: "^16.11.0",nodeversion: 10.16.0npm(oryarn) version: 6.13.4
Relevant code:
import React from 'react';
import { render } from '@testing-library/react';
import { getByDisplayValue } from '@testing-library/dom';
describe('test', () => {
test('test', () => {
const { getByDisplayValue } = render(
<select value="2" onChange={() => {}}>
<option value="1">one</option>
<option value="2">two</option>
</select>
);
getByDisplayValue("2");
});
});Unexpected Test failure:
FAIL ./test.js
test
× test (55ms)
● test › test
Unable to find an element with the value: 2.
<body>
<div>
<select>
<option
value="1"
>
one
</option>
<option
value="2"
>
two
</option>
</select>
</div>
</body>
12 | );
13 |
> 14 | getByDisplayValue("2");
| ^
15 | });
16 | });
17 |
at getElementError (node_modules/@testing-library/dom/dist/query-helpers.js:22:10)
at args (node_modules/@testing-library/dom/dist/query-helpers.js:76:13)
at getByDisplayValue (node_modules/@testing-library/dom/dist/query-helpers.js:59:17)
at Object.<anonymous> (test.js:14:5)
Reproduction:
https://github.com/xgbuils/select-issue-rtl
Problem description:
getByDisplayValue does not checks well the selected value. Assuming how React select works, option value="2" should be selected by default. However the test is failing.