Vitest Browser Mode Guide

https://howtotestfrontend.com/resources/vitest-browser-mode-guide-and-setup-info

by howToTestFE • 7 months ago

72 8 7 months ago

More options in the ecosystem seems better, but I was surprised to see this in the linked vitest docs:

However, to run tests in CI you need to install either playwright or webdriverio. We also recommend switching to either one of them for testing locally instead of using the default preview provider since it relies on simulating events instead of using Chrome DevTools Protocol.

syspec2• 7 months ago

I used to do this with Karma test runner. The best part was how it didn't try to capture everything, so debugging with breakpoints was really easy.

I like Vitest browser mode, but it's a pain to just "detach" for a specific frame and run that test in isolation, with my actual breakpoints.

throw2312321• 7 months ago

Using this, can I test canvas?

I have a React component that renders to a canvas (see "DeckGL"). The component renders data that it gets from the backend. So I'd need to mock API requests, then screenshot contents of the canvas.

ruined• 7 months ago

yes, i've used vitest browser mode to test canvas operations. it's designed to use 'snapshots' which capture page state, not screenshots, but that can detect visual difference on the canvas.

if you're performing GL operations you'll need to pass options to your browser driver to enable GL (for playwright chromium it's just `--enable-gpu`)

unfortunately, canvas rendering is sensitive enough to platform that you may have trouble matching snapshots between developer machines and/or CI.

c_s_guy• 7 months ago

Fast execution... despite running in a real browser, which at first might seem like it would be slow - it is actually really fast.

What makes it fast?

8n4vidtmkvmk• 7 months ago

I'd also like a definition for "fast". Because my unit tests run in 100ms. Is it that fast? Or "fast" for a browser test

knallfrosch• 7 months ago

Has anyone debugged Vitest Browser tests? Seems broken.

syspec2• 7 months ago

Yes! Completely agree! So hard to debug. Nearly impossible to set breakpoints (they disappear in refresh).

Vitest Browser Mode Guide

Related Stories