[Select] cannot be interacted with by testing-library

[Oshimani]

🐛 Bug report

I created a Svelte Component (or a composition of components) using the zag.js select machine. It works great but due to the way the elements with their respective roles are arranged testing-library cannot select elements or read the value from the select component as I would expect.
The suggested composition is as follows:

root
├── control
│   ├── label
│   ├── trigger # button role=combobox
├── positioner
│   └── content # ul role=listbox
│       ├── item # li role=option
│       │   ├── itemText
│       │   └── itemIndicator

This structure is not compatible with the method user.selectOptions(element, options) from
testing-library.

Testing library expects options to be nested inside the combobox but in this case they are descendants from a sibling element of the combobox.

The second issue in this context is, that the button element does not save the selected value inside it's value attribute.
So again you cannot use expect(screen.getByRole('combobox')).toHaveValue(['my-value']) as you would expect from a select.

I changed my code so that the trigger would be a select and the item would be a option element. Also I moved the positioner inside the trigger. This works for testing-library but obviously breaks the visible ui.

Can you guys elaborate on why you chose to compose the anatomical elements in this particular way?

💥 Steps to reproduce

1. Recreate Zag.js Select Component
2. Mount it in testing-library via render(MySelectComponent, {collection: [...]})
3. Try to read value: expect(screen.getByRole('combobox')).toHaveValue('1')
4. Or try to select Option await user.selectOptions(screen.getByRole('combobox','1')
5. See error: Options cannot be found or the value is undefined instead of '1'

💻 Link to reproduction

I don't have a minimal repro on hand right now, but could try and add one if requested. The Example from docs should produce the same behaviour as my component, as the structure is the same.

🧐 Expected behavior

Ideally any ui component that replaces a native component should be usable in tests without any knowledge of the component itself. So an element with the role combobox should store the selected value and also have options as its descendants.

🧭 Possible Solution

As explained above I tried to change some thing but that destroyed the visible ui. I will try some more when I get some spare time, but I would love to hear from you.

🌍 System information

Software	Version(s)
Zag Version	1.22.1
Browser	Firefox
Operating System	Win 11

📝 Additional information

[segunadebayo]

Please review the tests in Ark UI here for reference https://github.com/chakra-ui/ark/blob/main/packages/react/src/components/select/tests/select.test.tsx

[Oshimani]

Thanks for the hint.

I did look at Ark tests, I usually reference Ark when building these components.

Looking at this test from Ark (line 15 in your referenced file):

  it('should handle item selection', async () => {
    render(<ComponentUnderTest />)

    const trigger = screen.getByRole('combobox', { name: 'Framework' })
    await user.click(trigger)

    const item = screen.getByText('React', { ignore: 'option' })

    await user.click(item)
    await waitFor(() => expect(trigger).toHaveTextContent('React'))
  })

The tests inside the Ark UI repo are fine for the Ark repo and they would also be fine for my component library. But when using the components inside a project, I don't want knowledge about the components to be required when writing tests.

When using native selects in a project one could write:

 it('should handle item selection', async () => {
    render(<ComponentUnderTest />)

    const select= screen.getByRole('combobox', { name: 'Framework' })
    await user.selectOptions(trigger, 'React')

    expect(trigger).toHaveValue('React'))
  })

Everyone can understand that no matter if they know how the component is built or not.

I could create an object model for the component (like one does for playwright test), but I would rather not do that.

I hope I could express my concern properly.

[segunadebayo]

Noted. I've just added a new test for Svelte here as well: https://github.com/chakra-ui/ark/blob/main/packages/svelte/src/lib/components/select/select.test.ts

You can try screen.getByRole('option', { name: 'React' })

I don't see how user.selectOptions would work for a custom (select, combobox) component. Feel free to improve the testing experience in your project and share any learnings.

For more robust testing, I generally recommend Playwright for real browser tests. That everyone can understand, regardless of the framework.

[Oshimani]

Thx for your support, I appreciate it.

I will tinker some more once I find some time.
The user.selectOptions utility is rather liberal in finding options, therefor custom elements can be made to work with it. Basically the only limitations are the options being within the combobox and either using option tags or role=option.

I think even in playwright I would expect the utility for selecting options to work, but I would need to investigate what structure the function expects.
If I find something usefull, I will let you know.