Vitest Browser Mode
9 months ago
- #javascript
- #vitest
- #browser-testing
- Vitest的实验性浏览器模式允许直接在浏览器中运行测试，并访问`window`和`document`等浏览器全局对象。
- 可通过`vitest init browser`命令安装，或手动安装`vitest`和`@vitest/browser`包。
- CI测试需要额外工具如`playwright`或`webdriverio`，推荐使用Playwright因其速度快且支持并行执行。
- 配置需在Vitest配置文件中将`browser.enabled`设为`true`，并指定`playwright`或`webdriverio`等provider。
- Vitest支持React、Vue、Svelte、Solid和Marko等框架，需配合特定插件和配置。
- TypeScript支持需在配置或`tsconfig.json`中引用`@vitest/browser/matchers`及provider类型（如`playwright`）。
- 浏览器兼容性要求Chrome >=87、Firefox >=78、Safari >=15.4及Edge >=88，目标为原生支持ES Modules的浏览器。
- 可通过CLI运行测试，使用`--browser=chromium`等标志，或`--browser.headless`启用无头模式。
- 无头模式需配合`playwright`或`webdriverio`provider，无需UI即可运行测试。
- 示例包括渲染组件并使用Vitest的Context API及`userEvent`等工具进行断言。
- 限制包括默认模拟线程阻塞对话框（如`alert`、`confirm`），且浏览器模式下无法直接监视模块导出。