vpv

The vpv test case uses vitest-plugin-vis without Storybook. Its source is in testcases/vpv.

What it demonstrates

The auto preset with options set once in vis().
Manual snapshots of a container, an element and the body.
Turning the automatic snapshot off for a test.
Checking for an existing snapshot with page.hasImageSnapshot().

Configuration

import react from '@vitejs/plugin-react'
import { playwright } from '@vitest/browser-playwright'
import { defineConfig } from 'vitest/config'
import { vis } from 'vitest-plugin-vis/config'

export default defineConfig({
  plugins: [
    react(),
    vis({
      preset: 'auto',
      comparisonMethod: 'ssim',
      diffOptions: { ssim: 'bezkrovny' },
      failureThreshold: 0.01,
      failureThresholdType: 'percent',
      timeout: 60000,
    }),
  ],
  test: {
    name: 'tv:pw',
    browser: {
      enabled: true,
      headless: true,
      provider: playwright(),
      instances: [{ browser: 'chromium', viewport: { width: 1280, height: 720 } }],
    },
    include: ['**/*.spec.ts?(x)'],
    setupFiles: ['vitest.setup.ts'],
  },
})

vitest.setup.ts only imports vitest-browser-react. The auto preset adds its own setup file.

The tests

it('container snapshot', async ({ expect }) => {
  const { container } = await render(<Button label="Button" />)
  await expect(container).toMatchImageSnapshot()
})

it('subject snapshot', async ({ expect }) => {
  const { getByTestId } = await render(<Button label="Button" data-testid="subject" />)
  await expect(getByTestId('subject')).toMatchImageSnapshot()
})

Each test also gets an automatic snapshot from the preset, so it has two images: the auto one of the whole body and the numbered one of the subject.

it('can disable snapshot', async ({ expect }) => {
  setAutoSnapshotOptions(false)
  page.render(<Button primary label="Button" />)
  expect(await page.hasImageSnapshot()).toBe(false)
})

What appears on disk

__vis__/linux/__baselines__/to_match_image_snapshot.spec.tsx/
  container-snapshot-auto.png
  container-snapshot-1.png
  subject-snapshot-auto.png
  subject-snapshot-1.png
  ...

The test set_auto_snapshot_options.spec.tsx writes none. The folder win32 holds the same set for Windows.

Learn the parts