Docs: Comparison with Web Test Runner

[patak-dev]

There is a vite-web-test-runner-plugin (my notes).

[IanVS]

I've been using the vite web-test-runner plugin for a while now, and for the most part it works pretty well. I'll share a bit of my experience here.

• It uses mocha in a headless browser, and communicates to it over websockets, so it's actually pretty fast to run the tests, and there's no jsdom needed. This is the main draw for me, that it runs in the same environments (browsers) as my application.
• It's possible to "debug" in a real browser, although the UI does not appear, so it's not quite as nice as something like cypress for debugging.
• There is an incompatibility with @web/test-runner-commands (Does not work with @web/test-runner-commands material-svelte/vite-web-test-runner-plugin#11), so it's not possible to do things like set the viewport for particular tests. Vitest doesn't run in a browser (yet? 😉), so it doesn't have/need a feature like browser commands.
• I had a tricky time at first using jest assertions and mocks, but eventually got it working, partly through use of storybook's wrapper around expect, which makes it browser-compatible.
• The watch mode for @web/test-runner is not as good as vitest, I think. It does not always detect that I've changed a file that should cause a re-run, and it doesn't automatically scope down to running only the needed tests. Running in "focus" mode helps, but it shows a long list of all the test files with numbers next to them, and you have to enter the number for the test you want to focus on.

[patak-dev]

Thanks @IanVS! Would you mind sending a PR with a short paragraph to https://github.com/antfu-sponsors/vitest/blob/main/docs/guide/comparisons.md?