0

I have a Kendo dropdown on a react page as follows

<div className="col-lg-4 col-md-4 col-sm-4 col-xs-4 form-group">
<Label>CDN Code</Label>
<DropDownList
  id="cdnCode-dropdown"
  name="cdnCodeDD"
  value={props.CdnCodeTxt}
  onChange={handleChange}
  data={componentState.cdnCodeList}
  textField="text"
  dataItemKey="id"
  defaultItem={Constants.DefaultItem}
/>
</div>

and I have this react test code

    test('renders cdncode dropdown', () => {
        render(<ComponentDetailsContent />);
        const element = screen.getByRole("listbox", {
            name: "cdnCodeDD",
        });
        expect(element).toBeInTheDocument();
    });

But when I run this test I get this error

TestingLibraryElementError: Unable to find an accessible element with the role "listbox" and name "cdnSicCodeDD"

It then goes on to list all the accessible roles and the name is blank for all of them.

Name "":
      <span
        aria-activedescendant="option-01abe0e8-1cc2-4ca2-ac35-d2a04f7dda62--1"
        aria-expanded="false"
        aria-haspopup="true"
        aria-owns="0f6115c2-49f9-4430-bb2e-09841d34807b"
        class="k-dropdown-wrap k-state-default"
        id="cdnCode-dropdown"
        role="listbox"
        tabindex="0"
      />

Why is that even though my dropdown clearly has a name? I have also tried with "/cdncode/i" and I get the same error. I can't install Testing Playground plugin at work otherwise I would be able to tell the correct query for testing. Any alternatives that don't require chrome plugins?

Also, if I list out all the listboxes using GetAllByRoles I get the following array which contains the dropdown with the correct name?

 [...   
    <select aria-hidden="true" name="cdnCodeDD" style="opacity: 0; width: 1px; border: 0px; z-index: -1; position: absolute; left: 50%;" tabindex="-1"><option value="[object Object]" /></select></span>]
Lin Du
  • 88,126
  • 95
  • 281
  • 483
AIK DO
  • 288
  • 1
  • 4
  • 13
  • Please provide a https://stackoverflow.com/help/minimal-reproducible-example. Where does the `DropDownList` come from? – Lin Du Feb 02 '23 at 02:46
  • As mentioned it is a Kendo dropdown, so there is a import { DropDownList } from "@progress/kendo-react-dropdowns"; at the top of the file – AIK DO Feb 02 '23 at 18:04

0 Answers0