Vitest Examples

Basic component screenshot

import { expect, test } from 'vitest';
import { page } from 'vitest/browser';

test('button', async () => {
  document.body.innerHTML = '<button>Click me</button>';
  await expect(page.getByRole('button')).toMatchScreenshot('button.png');
});

Variants with properties

await expect(page.getByRole('button')).toMatchScreenshot('button.png', {
  properties: { variant: 'primary' }
});

await expect(page.getByRole('button')).toMatchScreenshot('button.png', {
  properties: { variant: 'secondary' }
});

Hover or focus state

let button = page.getByRole('button');

await button.hover();
await expect(button).toMatchScreenshot('button-hover.png');

Full-page screenshot

await expect(page).toMatchScreenshot('page.png', {
  fullPage: true
});

Check status inside a test

import { getVizzlyStatus } from '@vizzly-testing/vitest';

let status = getVizzlyStatus();

Tip

Use properties for real variants like theme, state, or viewport. Do not use them as random labels, or you will create baseline sprawl fast.

Next steps

• Vitest Overview
• TDD Mode