nvh95/vitest-preview

Debug your Vitest tests. Effortlessly. 🧪🖼⚡️

Vitest Preview

Debug your Vitest tests. Effortlessly. 🧪🖼⚡️

Try Vitest Preview Online. No downloads needed!

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 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

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

Configuration

Process CSS

You need to configure vitest to process CSS by:

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

You might want to import your CSS global files in 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';

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:

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

Update .gitignore

Update your .gitignore

// .gitignore
+.vitest-preview

Usage

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

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

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

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

npm run vitest-preview
# Or
yarn vitest-preview
pnpm vitest-preview

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

Contributing

Please see the contribution guide at CONTRIBUTING.md.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Hung Viet Nguyen 💻

Andre 💡

René Wang 🌍

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

License

MIT

Support

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

vitest-preview's Issues

Fix stackblitz example

Describe the bug

When clicking Try now the stackblitz instance doesn't seem to be able to build the modules, reinstalling the module manually works https://stackblitz.com/edit/vitest-preview-fh8b6e

~/projects/vitest-preview
❯ npm install && npm start
warn preInstall No description field
warn preInstall No repository field
warn preInstall No license field
┌ [1/4] 🔍  Resolving dependencies
└ 𐄂 Failed
ERR!: request to https://nr.staticblitz.com/vitest-preview failed, reason: socket hang up

error Command failed with exit code 1

~/projects/vitest-preview

Screenshots

Reproduce

Go to http://bit.ly/try-vitest-preview, try to use the example

Please provide a minimal reproduction for the issue. Thanks.

You can use one of the following options to reproduce the issue:

• Create a new GitHub repository (recommended): https://github.com/new
• Create a StackBlitz project: https://stackblitz.com
• Create a sandbox on CodeSandbox: https://codesandbox.io/s

Expected behavior

• The example works as expected

Environment (please complete the following information)

• OS: macOS 12.5.1
• Browser: Chrome 106.0.5249.119

Additional context

Add documentation

Use VitePress

Add the ability to run the server from code

We are developing an analogue of create-react-app in our company. And we want to add vitest-preview to it. There is currently no way to run the server from code.

Sample:

import { startServer } from 'vitest-preview/node';

startServer();

[Feature request] autoPreview mode

Is your feature request related to a problem? Please describe.

Not related to a problem.

Describe the solution you'd like

A way to setup autoPreview.

Describe how should we implement this feature

Same functionality as jest-preview

Describe alternatives you've considered

Attempt to setup jest-preview with vitest,

Additional context

N/A

Add `vitest-preview setup` CLI

Is your feature request related to a problem? Please describe.

When integrating vitest-preview, beside installing pnpm add -D vitest-preview, users need to do some other things like:

• Set vitest config css: true
• Setup global CSS
• Add vitest-preview to package.json's scripts
• Update .gitignore
• Add debug() to a test file

Describe the solution you'd like

• Add a new CLI vitest-preview setup
• Update the docs to recommend new approach

Describe how should we implement this feature

Consider https://github.com/nvh95/jest-preview/blob/61648e16e455f4eb561c267c9f7d897c953e6dcb/cli/index.js

Additional context

People usually integrate vitest-preview by running pnpm add -D vitest-preview and it's very easy for them to forget to config a thing.

Integrate Nx

• Use Nx to cache heave operations
• Use cloud caching
• Follow the tutorial by Juri https://www.youtube.com/watch?v=ngdoUQBvAjo

Try now and try online does not work

Latest Firefox browser.

Try it now is not working. Clicking count does nothing, editing App.test.tsx does nothing new, runs the test, that is all. There is no test preview and debug does nothing. Lots of errors in the console.

Uncaught (in promise) Error: getTranslators: detection is already running
    at Zotero.Translate.Web.<anonymous> (translate.js:1091:45)
    at Zotero.Translate.Web.getTranslators (promise.js:36:17)
    at Object.init (inject.js:105:25)
    at Object.historyChanged (inject.js:705:21)
    at messageListener (messaging_inject.js:122:50)
    at messaging_inject.js:132:6

Upgrade to vite 4

Which feature do you want to improve?

• Upgrade to vite 4

When the 'root' configuration is set to something other than the default, hot reload doesn't work

Potential solution

I was able to get this to work by adding { root: '.' } in previewServer.mjs to the createServer call

Describe the bug

Hot reload doesn't work if the 'root' option is configured to something other than the default in vite.config.ts.

Reproduce

Take the example project, change the 'root' field in vite.config.ts to something else (like "test-root"). Change the 'root' field to '.' in the test.root option so that tests still work. Run vitest-preview and run a test.

https://stackblitz.com/edit/vitest-preview-9hat82?file=src%2FApp.test.tsx

Expected behavior

vitest-preview should hot reload, but it doesn't. You only see the results after a refresh.

Add Svelte example

• Add Svelte example

Why is Vite a dependency rather than a peer dependency?

We use Vite version 5 in the project, and the only library that has Vite 3 as a dependency is vitest-preview.