Testing React Aria Select with the testing-library

[insonifi]

I have implemented a styled select component based on the React Aria select. Then, I replaced my old implementation with the new one, and it broke all my tests, because testing-library cannot find the component by the usual combobox role. And I cannot find a working alternative

Here is an example of the HTML markup available to Jest:

<div
                    class="RASelect_raSelect__MlNfP raSelect pc-overlay-combobox pc-overlay-col2"
                    data-disabled="true"
                    data-rac=""
                  >
                    <span
                      class="RALabel_raLabel__JKOcJ raLabel"
                      id="react-aria-:rkt:"
                    />
                    <div
                      class="RASelect_raFieldWithHint__Q+ULN"
                    >
                      <button
                        aria-expanded="false"
                        aria-haspopup="listbox"
                        aria-labelledby="react-aria-:rl1: react-aria-:rkt:"
                        class="RASelect_raField__RJbQ-"
                        data-disabled="true"
                        data-rac=""
                        data-react-aria-pressable="true"
                        disabled=""
                        id="react-aria-:rks:"
                        type="button"
                      >
                        <span
                          class="RASelect_raValue__j06hv"
                          data-placeholder="true"
                          data-rac=""
                          id="react-aria-:rl1:"
                        >
                           option
                        </span>
                      </button>
                    </div>

I cannot find any way to look it up. Could you point me in the right direction here?

My tests do something like:

screen.getByRole('combobox', {name: 'field-name'})

[snowystinger]

I think you'll find this useful https://react-spectrum.adobe.com/react-aria/Select.html#testing

Note, you said you used Select, so these are the select docs. However, if you really meant the role=combobox, then you should be using the ComboBox component, not the Select, and you should use the test utils on that page.

You can have a look at the source and our own tests for how we target certain components as well.

[insonifi]

Thank you for the hint. It is a good idea I haven't thought of. I will check the tests.