Vitest Browser Mode Guide | Hacker News Reader

Vitest Browser Mode Guide

howtotestfrontend.com

72 pointshowToTestFE8 comments

> 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?

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

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.

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.

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.

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.

Has anyone debugged Vitest Browser tests? Seems broken.

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

Reply on news.ycombinator.com