Vitest visual testing sneak peek

Vitest Browser Mode makes it easier to test components in a real browser. But even when your assertions pass, your UI can still be wrong.

Chromatic for Vitest adds visual testing to the browser tests you already write. It captures the UI states your tests create, runs comparisons in a stable cloud environment, and gives your team a review workflow for approving visual changes before they merge.

It’s built by Ari Perkkio, a Vitest core maintainer, so the workflow feels native.

• Add visual coverage to tests you already have: Snapshot the states your Vitest Browser Mode tests create.
• Capture interaction states: Test what the UI looks like after clicks, typing, loading, and other user flows.
• Run visual tests in the cloud: Avoid local screenshot drift with a consistent, parallelized test environment.
• Debug real UI output: Inspect the DOM, styles, assets, and rendered state behind a failed snapshot.
• Review UI changes before merge: Approve or request changes from a shared visual diff workflow.

[TK - Illustration]

But doesn’t Vitest already have visual testing?

Yes. Vitest includes a visual regression API for taking screenshots, comparing diffs, and storing snapshots alongside your tests. For solo projects, small teams, or straightforward local comparisons, that can be enough.

Chromatic is designed for teams that need visual testing to scale beyond local screenshots. Snapshots are taken in a consistent cloud environment in parallel for reliable, fast capture. It detects and stabilizes flake automatically and offers the real rendered test for quick debugging. Finally, it wraps those visual diffs in a collaborative review experience, so your team can confidently accept changes.

How visual testing with Chromatic works

Vitest Browser Mode already lets you create realistic component states in a browser. Chromatic adds the visual testing workflow around those states: capture, comparison, debugging, and review.

After running your Vitest tests, running Chromatic will upload your tests, render them in a stable cloud environment, capture snapshots, and compare them against the accepted baseline. When a visual change appears, Chromatic reports it in your pull or merge request so your team can inspect, discuss, approve, or reject it.

Add visual regression to Vitest tests

After setup, Chromatic can automatically capture the HTML, CSS, JavaScript, and assets needed to render the test. Instead of comparing flat image diffs, you can inspect the rendered UI, open browser dev tools, and debug the state that produced the snapshot.

By default, Chromatic captures at the end of each test. You can also capture snapshots at specific points in a test, such as after a user interaction.

// Accordion.test.ts
import { test, expect } from 'vitest';
import { page } from 'vitest/browser';
import { render } from 'vitest-browser-react';
import { takeSnapshot } from '@chromatic-com/vitest';

import { Accordion } from '../src/components/Accordion';

test('can open accordion', async () => {
  await render(
    <Accordion header="Shipping details">
      Ships within 3 business days
    </Accordion>
  );
  
  await takeSnapshot('closed');

  const toggle = page.getByRole('button', { name: 'Shipping details' });
  await toggle.click();
  
  const content = page.getByText('Ships within 3 business days');
  await expect.element(content).toBeInTheDocument();

  await takeSnapshot('open');
});

In this example, the assertion confirms the accordion’s behavior. The Chromatic snapshot adds a visual check for how the closed and opened states actually render. Note that the test itself is pure Vitest, except for the optional takeSnapshot calls.

That means your test can catch more than whether the interaction worked. It can also catch layout shifts, missing styles, broken icons, and other regressions that assertions alone may not cover.

Run visual tests in a standardized cloud environment

Visual tests are sensitive to browser versions, fonts, operating systems, timing, animations, viewport differences, and asset loading.

Chromatic runs visual tests in a dedicated cloud environment optimized for consistent component rendering. Test runs are parallelized by default, so you get fast, reliable results without maintaining screenshot infrastructure.

When Chromatic detects potential flake from things like loading states or animations, features like SteadySnap help stabilize the result automatically.

[TK - illustration]

Debug tests, not screenshots

Screenshot diffs can show that something changed, but not always why.

Chromatic captures the rendered test output, not just final images. Visual failures are easier to diagnose, because you can open the snapshot, DOM, styles, assets, and UI state in context.

Snapshots are also published, so you can share a failing state with teammates without asking them to pull a branch, run the test suite, or recreate the issue locally.

[TK - image - screenshot of debugging a snapshot? Only if this is better than an illustration in the prior section, though]

Why this matters more with AI agents

Agents make it easier to produce UI code, which means teams are reviewing more frontend changes than before. But passing tests do not guarantee a correct UI. A change can satisfy TypeScript, match behavioral assertions, and still introduce visible regressions: uneven spacing, a missing icon, a broken mobile layout, or the wrong state on screen.

Chromatic for Vitest checks the rendered result of the same states your tests exercise. Your test still verifies behavior. Chromatic verifies what the user actually sees.

It helps teams catch the kind of UI mistakes that agents can’t see themselves.

Get early access

Chromatic for Vitest is now in early access.

Join if you’re using Vitest Browser Mode, evaluating visual regression testing, or looking for a better way to review UI changes in CI. Early access teams get direct setup help from Chromatic and a chance to shape the Vitest workflow before general availability.