[Bug]: Tabs v-model not updating in test utils/vitest

[jeffpohlmeyer]

Reproduction

https://stackblitz.com/~/github.com/jeffpohlmeyer/shadcn-vitest

Describe the bug

Trying to create component tests using Vue Test Utils and Vitest, and tracking the effects of TabsTrigger clicks. When the Tabs component is bound via v-model clicking a tab seemingly does not update the bound attribute. But, manually forcing a click event on the TabsTrigger does update the value in tests.

In looking through the repro, you'll see what I mean if you look at TestTabs.vue to see it with two-way binding via the v-model directive, and in TestTabsWithManualControl.vue you'll see the explicit click event handler.

If you open a second terminal in the project once it opens and simply run vitest in the terminal you'll see that the test fails in TestTabs.spec.ts but it passes in TestTabsWithManualControl.spec.ts

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.51 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.7.0 - ~/.nvm/versions/node/v20.7.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.7.0/bin/yarn
    npm: 10.1.0 - ~/.nvm/versions/node/v20.7.0/bin/npm
    pnpm: 8.13.1 - ~/.nvm/versions/node/v20.7.0/bin/pnpm
  Browsers:
    Brave Browser: 124.1.65.123
    Chrome: 124.0.6367.119
    Safari: 17.4.1

Contributes

• [ ] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests

[zernonia]

Try swapping to mousedown instead of click/pointerdown. await password.trigger('mousedown')

Internally Radix Vue uses the mousedown listener, similar to Radix UI

[jeffpohlmeyer]

Thanks for the reply @zernonia. Unfortunately, that doesn't seem to work in the stackblitz. I'm seeing something similar with the dialog component, but I'm noticing there in Radix-Vue you're using a different methodology to trigger it to open. I'll see if that works for my situation here, as well.

[sadeghbarati]

Hi can we close this issue? @jeffpohlmeyer

[jeffpohlmeyer]

Unfortunately no. I tried implementing the methodology I noted but it doesn't solve the bug. I'll try to create a new stackblitz, soon.

[sadeghbarati]

Soon word in GitHub 😄 I did exact same thing to someone's GitHub issue 😁

@jeffpohlmeyer Sorry for the tag can you try to use Vitest v2 maybe they provide some test utils to handle this problem

[jeffpohlmeyer]

So I've tried implementing the tests from radix-vue in an updated stackblitz and all of the radix tests pass. I've also added a watcher in TestTabs.vue to check to see if the tab ref value updates, which it does when running vitest ./src/components/tabs/TestTabsRadixTests.spec.ts. From what it looks like in the Radix tests, though, it is using keyboard interactions to handle state changes.

I've updated TestTabs.spec.ts to check the data-state elements as well as check the value of the tab ref and not only do the updated tests fail, but the watcher doesn't trigger at all when running vitest ./src/components/tabs/TestTabs.spec.ts

Obviously, clicking on the tabs triggers changes the appearance of the content in the DOM but for some strange reason it's not actually updating the state, even though I'm binding using v-model. When implementing a manual trigger like I do in TestTabsWithManualControl.vue it clearly works, but this seems like a very strange bug to have run into.