Testing What Customers Really See with Vitest and Chromatic

Editor’s be aware: Right this moment, our buddies at Chromatic are sharing an early take a look at their new visible testing plugin for Vitest. We’re excited to characteristic this visitor article by Kyle Gach, who walks by means of how visible testing enhances conventional element checks and helps catch UI regressions earlier than they attain manufacturing.

Your PR to insert an “add to favorites” button is inexperienced. Each automated take a look at passes. CI studies no failures.

Then a person studies that the product card doesn’t look proper on their cellphone.

The take a look at suite verified the element logic, however missed the rendered state the person noticed: the breakpoint, the spacing, the wrapping, and the ultimate painted format.

Your Vitest checks can’t see your UI. Visible checks shut that hole.

That’s why we’re opening early entry to our new Chromatic plugin for Vitest.

Visible element checks are excellent for UI growth

Visible checks are simpler to put in writing and preserve than conventional element checks. On the similar time, they supply extra confidence as a result of they take a look at extra.

A conventional element take a look at for a product card may confirm that the proper title and value are rendered and the CTA has the proper textual content and is clickable. Visible checks transcend that and confirm that each element of the cardboard’s look is right: the fonts in use, colours, spacing, format, breakpoints, and so on. They usually cowl all of that and not using a single assertion it’s important to write and preserve.

By including visible checks to your Vitest checks, you get the perfect of each worlds: common assertions for interactive habits and non-visual output like accessibility properties plus visible checks for look. Customers care about each, so we should take a look at each.

Visible testing with Vitest and Chromatic

In the event you’re testing your parts with Vitest’s Browser Mode, the Chromatic plugin can add visible checks with no required adjustments to your take a look at recordsdata.

How does it work?

Getting began is so simple as registering the plugin in your Vitest config:

// vitest.config.ts
import { defineProject } from 'vitest/config';
import { playwright } from '@vitest/browser-playwright';
import { chromaticPlugin } from '@chromatic-com/vitest/plugin'; 

export default defineProject({
  plugins: [chromaticPlugin()], // 👈 Add this; no take a look at file adjustments required
  take a look at: {
    browser: {
      supplier: playwright(),
      enabled: true,
      situations: [{ browser: 'chromium' }],
    },
  },
});

With the plugin in place, performing a take a look at run will accumulate the rendered outcome on the finish of every take a look at. (You may as well accumulate the rendered output at arbitrary factors throughout a take a look at.)

You then run Chromatic, which uploads these outcomes to the cloud, takes snapshots in parallel, computes their diffs, robotically finds and reduces flake, and at last studies the outcome as a PR examine.

The final step is evaluation. You approve the diffs that look right and reject those that don’t. Then push the adjustments to repair the rejected snapshots till you’re capable of approve the whole lot and merge your PR.

How is Chromatic completely different than Vitest’s visible testing?

Vitest affords a built-in visible testing functionality, which additionally requires Browser Mode. It takes screenshots of your take a look at outcomes, and produces diffs to evaluation. The important thing distinction is that it shops these screenshots in your repo, which suggests you should retailer them with git and handle updates. You additionally should present the setting to seize these screenshots, which is tough to maintain steady, as a result of it might fluctuate primarily based on the OS, browser, put in fonts, locale, and so on.

Chromatic, in contrast, collects the rendered results of your checks domestically, however captures the precise visible snapshots in a steady cloud setting. This gives an a variety of benefits:

• Department-aware baselines observe major and have branches for you, so that you don’t should retailer them in git.
• Cloud rendering takes snapshots in a managed, constant platform to scale back environmental flake
• SteadySnap stabilizes snapshots towards animation, loading variance, and seize timing.
• Parallel snapshotting runs your visible checks as quick as attainable
• Chromatic collects the rendered HTML, CSS, and property behind every screenshot, so you’ll be able to examine the DOM and reproduce failures with out working checks domestically.

Or, to summarize with a desk:

Get early entry

We’re opening early entry to the Chromatic plugin for groups already utilizing Vitest Browser Mode or actively shifting element checks there. The beta is non-public, with hands-on onboarding for a restricted variety of groups and free snapshots whereas evaluating the product.

Convey an actual repo, and we’ll validate Browser Mode assortment, CI habits, PR evaluation, department baselines, and debugging towards it collectively. Early-access groups can affect the product earlier than launch, with precedence entry because the beta expands.

It is a good match in case your workforce already makes use of Vitest for element checks, has began adopting Browser Mode, and desires visible regression protection with out constructing screenshot infrastructure across the built-in API.

Requires Vitest Browser Mode utilizing Playwright. We’ll observe up with onboarding particulars.