Bug: setValue on select with an object

[logoly]

Describe the bug
I am encountering an issue where a behavior that works correctly in the browser does not work in a unit test using Vitest and Vue Test Utils. I am not sure if this is a bug or if I am missing something, but I could not find any relevant information in the documentation.

I created a minimal reproduction to illustrate the issue. Despite spending a lot of time investigating, I haven't been able to determine what I am doing wrong.

To Reproduce
A minimal reproduction is available here: https://stackblitz.com/edit/vitejs-vite-fwbsiysg

⚠ Note: The test command does not run in StackBlitz. To reproduce the issue, please:

1. Download the project
2. Run npm install
3. Run npm run test:unit

Expected behavior
The unit test should produce the same behavior observed when running the application in the browser.

Related information:

  System:
    OS: Linux 6.2 Ubuntu 23.04 23.04 (Lunar Lobster)
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1355U
    Memory: 6.57 GB / 15.25 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  npmPackages:
    @vue/test-utils: ^2.4.6 => 2.4.6 
    vitest: ^3.0.8 => 3.0.8 
    vue: ^3.5.13 => 3.5.13 

I would greatly appreciate any insights or pointers. Thanks in advance!

[cexbrayat]

Hi @logoly

Thanks for the repro. I think the issue is with setValue: when used on a select it only sets the value of the select, which contains a string (see

test-utils/src/domWrapper.ts

Lines 120 to 129 in 5ac39ac

	} else if (tagName === 'SELECT') {
	if (Array.isArray(value)) {
	const selectElement = element as unknown as HTMLSelectElement
	for (let i = 0; i < selectElement.options.length; i++) {
	const option = selectElement.options[i]
	option.selected = value.includes(option.value)
	}
	} else {
	element.value = value
	}

). As a workaround, you can select the option you want instead:

const typeSelect = wrapper.find('[data-test="type-select"]');
// select the Sith option
(typeSelect.element as HTMLSelectElement).selectedIndex = 1;
await typeSelect.trigger('change');

This should maybe be improved, by using something similar to what vModelSelect does in Vue core https://github.com/vuejs/core/blob/fb0c3ca519f1fccf52049cd6b8db3a67a669afe9/packages/runtime-dom/src/directives/vModel.ts#L254-L272 and add unit tests that handles objects instead of just strings in VTU.
Or, if there is none, we could add a note in the documentation stating that setValue doesn't work with objects.

Feel free to open a PR; contributions are most welcome!

[lgourain]

Hi @cexbrayat,

Thank you so much for your fast and precise reply ! 🙏🏼

That indeed fixes my issue ! 😄

I’d be happy to contribute, but I’ve never done that before and I’m not really sure where to start. If you have any guidance on how I could help, whether by improving the implementation or adding a note in the documentation, I’d love to give it a try!

Thanks again for your help! 🙌

[cexbrayat]

Sure, I think there are two possibilities:

1. The simplest one is to add a note in the docs of setValue https://test-utils.vuejs.org/api/#setValue Maybe it could mention that it doesn't work with object values on select, and that in that case setting selectedIndex and triggering the change event manually is the way to go

2. Try to improve setValue to handle this use-case as well. I'm not sure this is necessary but it would be nice. In that case, you can add unit tests to reproduce the issue in setValue.spec.ts then improve the algorithm in domWrapper.ts, by copying what Vue core does in vModel.ts

Either option is good!