Vitest Preview

Debug your Vitest tests. Effortlessly.

TestingDebuggingReactVueSvelteVite
nvh95/vitest-previewwww.vitest-preview.comvitest-preview

README

Vitest Preview Logo

Vitest Preview

Debug your Vitest tests. Effortlessly. 🧪🖼⚡️

Vitest Preview Demo

Try Vitest Preview Online. No downloads needed!



All Contributors


npm version Best of JS PRs Welcome
Try Vitest Preview now

Why vitest-preview


When writing tests, we usually have to debug by reading the cryptic HTML output on the terminal. Sometimes, they are too complicated to visualize the UI in our heads. vitest-preview previews your Vitest tests right in a browser, then you can see your actual UI visually. You can write tests and watch rendered output changes accordingly. Vitest Preview lets you concentrate on tests in the "real world" rather than deciphering HTML code.

vitest-preview is built on top of Vite, it's blazing fast and easy to use.

vitest-preview is a younger sibling of [jest-preview](https://github.com/nvh95/jest-preview) with the same idea and to solve the same problem. If you are writing tests using Jest, give it a try.

Features


- 👀 Visualize your testing UI in an external browser in milliseconds.
- 🔄 Auto reloads the browser when debug() is executed.
- 💅 Fully support CSS
- 🌄 Support viewing images.

Installation


  1. ``` sh
  2. npm install --save-dev vitest-preview
  3. # Or
  4. yarn add -D vitest-preview
  5. pnpm add -D vitest-preview
  6. ```

Configuration


Process CSS


You need to configure vitest to process CSS by:

  1. ```diff
  2. // vite.config.js
  3. export default defineConfig({
  4.   test: {
  5. +    css: true,
  6.   },
  7. });

  9. ```

You might want to import your CSS global files in setupFiles:

  1. ```diff
  2. // vite.config.js
  3. export default defineConfig({
  4.   test: {
  5. +    setupFiles: './src/test/setup.ts',
  6.   },
  7. });

  9. ```

  1. ```diff
  2. // src/test/setup.ts
  3. +import './global.css';
  4. +import '@your-design-system/css/dist/index.min.css';
  5. +import 'bootstrap/dist/css/bootstrap.min.css';

  7. ```

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:

  1. ``` json
  2. "scripts": {
  3.   "vitest-preview": "vitest-preview"
  4. },
  5. ```

Update .gitignore


Update your .gitignore

  1. ```diff
  2. // .gitignore
  3. +.vitest-preview
  4. ```

Usage


Put debug() wherever you want to see the UI in your tests.

  1. ```diff
  2. +import { debug } from 'vitest-preview';

  4. describe('App', () => {
  5.   it('should work as expected', () => {
  6.     render(<App />);
  7. +    debug();
  8.   });
  9. });
  10. ```

Open the Vitest Preview Dashboard by running the CLI command (updated in Configuration):

  1. ``` sh
  2. npm run vitest-preview
  3. # Or
  4. yarn vitest-preview
  5. pnpm vitest-preview
  6. ```

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

Examples


- react-testing-library
- @vue/test-utils

Is there a similar library for Jest


Yes, it is. It's Jest Preview.

Star history

Star History Chart

Contributing


Please see the contribution guide at CONTRIBUTING.md.

Contributors ✨


Thanks goes to these wonderful people (emoji key):




Hung Viet Nguyen
Hung Viet Nguyen
💻		 Andre
Andre
💡






This project follows the all-contributors specification. Contributions of any kind welcome!

License


This is open source software

MIT

Support


If you like the project, please consider supporting it by giving a ⭐️ to encourage the author.