起步 #

这一部分将指导你用 vitest-preview 来实现可视化调试. 如果你不想安装，你也可以通过 StackBlitz 来体验.

Step 1: 安装 #

npm install --save-dev vitest-preview
# 或者
yarn add -D vitest-preview
pnpm add -D vitest-preview

Step 2: 配置 #

处理 CSS #

你需要在 vitest 中启用处理 CSS:

// vite.config.js
export default defineConfig({
  test: {
+    css: true,
  },
});

如果要引入全局 CSS 文件， 请放入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';

添加脚本 #

vitest-preview 拥有一个命令行工具来启动 Vitest Preview 面板。 你可以在面板中调试你的 UI。方便起见，你可以在package.json添加一行命令：

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

更新 .gitignore #

更新.gitignore

// .gitignore
.vitest-preview

Step 3: 使用 #

在你想在测试中使用 UI 的位置，执行 debug() 方法。

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

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

执行以下命令来打开 Vitest Preview 面板 (你可以在 配置 中自定义命令):

npm run vitest-preview
# 或者
yarn vitest-preview
pnpm vitest-preview

然后，执行你插入了 debug() 的测试。 测试的 UI 将在 localhost:5006 打开。