Overview:

vitest-preview is a tool designed to help developers visualize UI when writing tests. It allows for viewing the actual UI output in a browser while writing tests, eliminating the need to decipher HTML code. Built on Vite, vitest-preview is fast and user-friendly, making test creation more efficient and straightforward.

Features:

• Visualize Testing UI: See your testing UI in an external browser instantly.
• Auto Reload: Browser auto-reloads when debug() is executed.
• CSS Support: Fully supports CSS styling.
• Image Viewing: View images in the UI.

Installation:

1. Configuration:

   1. Configure vitest to process CSS.
   2. Import CSS global files in setupFiles.

2. Add script vitest-preview:

   • Update your package.json to include a script for Vitest Preview Dashboard CLI.

3. Update .gitignore:

   • Update your .gitignore file.

4. Usage:

   • Use debug() in your tests to see the UI.
   • Open Vitest Preview Dashboard with CLI command.
   • Execute tests containing debug(). UI will be visible at http://localhost:5006.

Summary:

vitest-preview is a valuable tool for developers creating tests, offering a quick and visual way to view UI output while writing tests. With features like real-time visualization, CSS support, and image viewing, it enhances the test-writing process. Its easy installation and usage make it a convenient choice for those looking to streamline their testing workflow.