Vitest Browser Mode
9 months ago
- #javascript
- #vitest
- #browser-testing
- Vitest's experimental browser mode allows running tests natively in the browser with access to browser globals like `window` and `document`.
- Installation can be done via `vitest init browser` command or manually by installing `vitest` and `@vitest/browser` packages.
- For CI testing, additional tools like `playwright` or `webdriverio` are required, with Playwright recommended for its speed and parallel execution support.
- Configuration involves setting `browser.enabled` to `true` in the Vitest config file and specifying a provider like `playwright` or `webdriverio`.
- Vitest supports frameworks like React, Vue, Svelte, Solid, and Marko with specific plugins and configurations.
- TypeScript support requires referencing `@vitest/browser/matchers` and provider types (`playwright` or `webdriverio`) in the config or `tsconfig.json`.
- Browser compatibility includes Chrome >=87, Firefox >=78, Safari >=15.4, and Edge >=88, targeting browsers with native ES Modules support.
- Running tests can be done via CLI with flags like `--browser=chromium` or `--browser.headless` for headless mode.
- Headless mode is supported with `playwright` or `webdriverio` providers, running tests without a UI.
- Examples include rendering components and making assertions using Vitest's Context API and utilities like `userEvent`.
- Limitations include thread-blocking dialogs (e.g., `alert`, `confirm`) being mocked by default and inability to spy on module exports directly in browser mode.