Unable to set value of headlessui Combobox in unit tests

[logoly]

Hello,

I’m currently experiencing an issue when trying to set a value for the Combobox component in my unit tests using Vue Test Utils. I’ve created a minimal example to reproduce the issue, which you can view here: StackBlitz Example.

In my tests, I am unable to set a value for the Combobox component, and I’m unsure of the correct approach to do so.

Please note that unit tests are not runnable in StackBlitz. You will need to download the repository and run the tests locally:

1. Run npm install
2. Run npm test:unit

I would appreciate any help or guidance on how to set the value for the Combobox correctly in unit tests using Vue Test Utils.

Thank you in advance!

[cexbrayat]

I'm not familiar with headlessui components, but a quick look in their codebase shows a ton of unit tests for combobox in https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-vue/src/components/combobox/combobox.test.ts

So you can probably find some inspiration even if they don't use test-utils.
If not, I would open a discussion on their github repo, as they probably know what to do (it depends on how they implemented the component)

[logoly]

Thank you for your response!

I updated my StackBlitz example to try and reproduce one of their unit tests specifically selecting an option puts the display value into Combobox.Input when displayValue is provided but I still couldn't make it work in my setup. 🤔

If anyone you have insights on how to properly test this using Vue Test Utils, I’d really appreciate the help! 😄

Also, I’ve further simplified my setup by removing MSW, so you can now run npm run test:unit directly in StackBlitz without needing to download the project locally.

https://stackblitz.com/edit/vitejs-vite-3frophzj

Thanks in advance for any guidance!

[cexbrayat]

It looks like they are not listening to clicks but to mousedown on options https://github.com/tailwindlabs/headlessui/blob/0a8de016e8f4f6f3c27fdebe8fe79debdd2ae4fb/packages/%40headlessui-vue/src/components/combobox/combobox.ts#L1475

If that's not enough, I think your best shot is to ask the question on the headlessui repo, as this is not really an issue with VTU but rather an implementation detail of headlessui to figure out in order to make your test pass

[logoly]

Thank you so much for your help! 🙌

Indeed, the issue was that Combobox listens to mousedown instead of click. After adjusting my test accordingly, it now works as expected. 🚀