Post

Chromatic
@chromatic.com

Get first access to our @vitest.dev plugin, which adds Chromatic’s visual testing and review to your browser tests. It’s built by @ariperkkio.dev, a Vitest core maintainer. It’s free to use while in beta and requires no changes to your test files. Read on for more info 🧵

3 reposts16 likes

Chromatic
@chromatic.com

Why visual test? For UI, checking that something works with functional tests doesn’t tell the full story. Your Add to Cart button may technically be clickable, but if it looks untrustworthy or broken, no one will click it. Visual tests guard against that, with no extra code.

Chromatic
@chromatic.com

Vitest already has visual testing. How is this better? ✔️ Fast and reliable servers consistently snapshot components in parallel ✔️ Automatically detect and reduce flakiness ✔️ Review and debug the real code behind your components, not screenshots

Maya Novak
@maya-novak.bsky.social

What context travels with each snapshot in review? I’d want the test name and interaction path, browser/viewport, commit, and state setup visible beside the diff. Otherwise an approved image can get detached from the exact state it supposedly proves.