Getting Started

This section will guide you through the process of using for visual testing experience with vitest-preview. You can try it without installing anything at StackBlitz.

WARNING

If you are using Jest, you can try jest-preview with a similar functionality.

Step 1: Installation

npm

npm install --save-dev vitest-preview

Yarn

yarn add -D vitest-preview

pnpm

pnpm add -D vitest-preview

Step 2: Configuration

Process CSS

You need to configure vitest to process CSS by:

// vite.config.js
export default defineConfig({
  test: {
+    css: !process.env.CI, // We usually don't want to process CSS in CI
  },
});

You might want to import your CSS global files in setupFiles:

// vite.config.js
export default defineConfig({
  test: {
+    setupFiles: './src/test/setup.ts',
  },
});

// src/test/setup.ts
import './global.css';
import '@your-design-system/css/dist/index.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';

Add script vitest-preview

vitest-preview has a CLI that opens Vitest Preview Dashboard where you can preview your tests' UI. You can update your package.json to add a script for more convenience:

"scripts": {
  "vitest-preview": "vitest-preview"
},

Step 3: Usage

Put debug() wherever you want to see the UI in your tests.

+import { debug } from 'vitest-preview';

describe('App', () => {
  it('should work as expected', () => {
    render(<App />);
+    debug();
  });
});

Open the Vitest Preview Dashboard by running the CLI command (updated in Configuration):

npm

npm run vitest-preview

Yarn

yarn vitest-preview

pnpm

pnpm vitest-preview

Then execute your tests that contain debug(). You will see the UI of your tests at http://localhost:5006.

(Optional) Step 4: Automatic Mode

You can use automatic mode to automatically preview the UI without manually calling debug() in each test.

Read more at What is Automatic Mode?.