Add an example of vue component testing via browser mode with playwright

[jd-solanki]

Clear and concise description of the problem

Hi 👋🏻
I'm building Vue UI framework - Anu

I really liked browser mode and I'm eagerly waiting for the stability of this feature. I must say we can't completely test our
vue components with jsdom when we build the UI framework and use vitest for testing. Browser mode is a huge encouragement for using vitest but in the early stage I did experience the #3124 and found that adding an example of testing vue component with Playwright's chrome as a browser provider that demonstrates browser API access like window.getComputedStyle will be easy for us to adopt and use, Moreover, it will also allow vitest team to quickly identify if there's any bug.

Suggested solution

n/a

Alternative

Not writing tests at all 😓

Additional context

I'm waiting for browser mode stability to make robust tests for testing vue components. I hope using browser mode will provide the same environment as the real browsers for robustness.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[Aslemammad]

I'm happy you find this feature useful, sure, I think an example would help! Feel free to send a PR if you want. I'm not that experienced in vue.

[jd-solanki]

Hey, Thanks for the response. I'm still learning tests so I created this issue for creating example for beginners like me.

[Aslemammad]

Ok then, PRs are welcome!

[lmiller1990]

Not a direct solution, but I've been working on testing Vue at Cypress - we've got a Vite dev server that works great, this might an alternative (it should all just work out of the box - some other projects I work on use it pretty successfully, like Vuetify).

[Aslemammad]

@lmiller1990 Why not? If it works, then it'd be good to have those examples. Anyone can send a PR if they want, so feel free to do so. Thank you so much.

[kingyue737]

@Aslemammad, I think lmiller mean we can test component with Cypress alone, not with vitest browser mode.

[Aslemammad]

@kingyue737 Oh, I thought they would look at this as an alternative for their current solution.

[lmiller1990]

Yeah, I meant if you want a client side runner, Cypress might work for your use case. It runs in the browser - doing all the execution in the browser makes a lot of sense for components, everything will just work as you'd expect, no need to mess about with jsdom or a Node.js runner shuttling messages back and forth. It also uses Vite as the bundler, so you won't need to change too much of your tooling.

[sheremet-va]

There are now examples in the documentation (https://vitest.dev/guide/browser/#examples).