vitest-plugin-vis/src/setup.vis.mdx

Vitest visual testing plugin

import { Meta, Source } from "@storybook/addon-docs/blocks";

<Meta title="vitest-plugin-vis/setup/vis" />

`vis` from `vitest-plugin-vis/setup` is the main mechanism to setup the plugin on the client side.

```ts
// vitest.setup.ts
import { vis } from 'vitest-plugin-vis/setup'

vis.setup()
```

## Basic Setup

```ts
// vitest.setup.ts
import { vis } from 'vitest-plugin-vis/setup'

// Basic setup - enables visual testing without auto snapshots
vis.setup()

// Enable auto snapshots for all tests
vis.setup({ auto: true })

// Disable auto snapshots (same as vis.setup())
vis.setup({ auto: false })
```

## Conditional Auto Snapshots

You can control when auto snapshots are taken based on test metadata:

```ts
// vitest.setup.ts
import { vis } from 'vitest-plugin-vis/setup'

// Take snapshots only for tests with specific metadata
vis.setup({
	auto: async ({ meta }) => meta['visualTest'] === true
})

// Skip snapshots for tests marked as 'skipSnapshot'
vis.setup({
	auto: async ({ meta }) => !meta['skipSnapshot']
})
```

## Multi-Theme Setup

Set up automatic snapshots for multiple themes (e.g., light and dark mode):

```ts
// vitest.setup.ts
import { vis } from 'vitest-plugin-vis/setup'

vis.setup({
	auto: {
		async light() {
			document.body.classList.remove('dark')
			document.body.classList.add('light')
		},
		async dark() {
			document.body.classList.add('dark')
			document.body.classList.remove('light')
		}
	}
})
```

## Conditional Theme Snapshots

You can conditionally skip themes based on test metadata:

```ts
// vitest.setup.ts
import { vis } from 'vitest-plugin-vis/setup'

vis.setup({
	auto: {
		async light({ meta }) {
			if (meta['skipLight']) return false
			document.body.classList.remove('dark')
		},
		async dark({ meta }) {
			if (meta['skipDark']) return false
			document.body.classList.add('dark')
		}
	}
})
```

## Advanced Theme Configuration

You can set up more complex theme configurations:

```ts
// vitest.setup.ts
import { vis } from 'vitest-plugin-vis/setup'

vis.setup({
	auto: {
		async desktop() {
			document.body.style.width = '1200px'
			document.body.classList.add('desktop')
		},
		async tablet() {
			document.body.style.width = '768px'
			document.body.classList.add('tablet')
		},
		async mobile() {
			document.body.style.width = '375px'
			document.body.classList.add('mobile')
		},
		async 'dark-desktop'({ meta }) {
			if (meta['skipDark']) return false
			document.body.style.width = '1200px'
			document.body.classList.add('desktop', 'dark')
		}
	}
})
```