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 install --save-dev vitest-preview
# Or
yarn add -D vitest-preview
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: true,
  },
});

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"
},

Update .gitignore

Update your .gitignore

// .gitignore
.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 run vitest-preview
# Or
yarn vitest-preview
pnpm vitest-preview

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