Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nvh95/vitest-preview
Debug your Vitest tests. Effortlessly. 🧪🖼⚡️
https://github.com/nvh95/vitest-preview
debug frontend productivity react svelte testing vite vitest vue
Last synced: about 2 months ago
JSON representation
Debug your Vitest tests. Effortlessly. 🧪🖼⚡️
- Host: GitHub
- URL: https://github.com/nvh95/vitest-preview
- Owner: nvh95
- License: mit
- Created: 2022-06-28T04:34:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-08-03T04:57:41.000Z (10 months ago)
- Last Synced: 2023-12-07T14:50:05.280Z (6 months ago)
- Topics: debug, frontend, productivity, react, svelte, testing, vite, vitest, vue
- Language: TypeScript
- Homepage: https://www.vitest-preview.com
- Size: 583 KB
- Stars: 283
- Watchers: 3
- Forks: 10
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists
- awesome-vite - vitest-preview - Visual debugging experience for Vitest. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vitest-preview - Visual debugging experience for Vitest. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vitest-preview - Visual debugging experience for Vitest. (Plugins / Framework-agnostic Plugins)
- awesome-viter - vitest-preview - Visual debugging experience for Vitest. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vitest-preview - Visual debugging experience for Vitest. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vitest-preview - Visual debugging experience for Vitest. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vitest-preview - Visual debugging experience for Vitest. (Plugins / Framework-agnostic Plugins)
README
Vitest Preview
Debug your Vitest tests. Effortlessly. 🧪🖼⚡️
Try Vitest Preview Online. No downloads needed!
[](#contributors-)
[](https://www.npmjs.com/package/vitest-preview)
[](https://bestofjs.org/projects/vitest-preview)
[](./CONTRIBUTING.md)
[](https://github.com/vitejs/awesome-vite#testing)
[](https://stackblitz.com/edit/vitest-preview?file=src%2FApp.test.tsx,README.md)
## 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](https://vitejs.dev), 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](https://stackblitz.com/edit/jest-preview?file=src%2FApp.test.tsx,README.md).
## 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
```bash
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:
```diff
// vite.config.js
export default defineConfig({
test: {
+ css: true,
},
});
```
You might want to import your CSS global files in `setupFiles`:
```diff
// vite.config.js
export default defineConfig({
test: {
+ setupFiles: './src/test/setup.ts',
},
});
```
```diff
// 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:
```json
"scripts": {
"vitest-preview": "vitest-preview"
},
```
### Update .gitignore
Update your `.gitignore`
```diff
// .gitignore
+.vitest-preview
```
## Usage
Put `debug()` wherever you want to see the UI in your tests.
```diff
+import { debug } from 'vitest-preview';
describe('App', () => {
it('should work as expected', () => {
render();
+ debug();
});
});
```
Open the **Vitest Preview Dashboard** by running the CLI command (updated in [Configuration](#configuration)):
```bash
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](http://localhost:5006).
## Examples
- [react-testing-library](https://github.com/nvh95/vitest-preview/tree/main/examples/react-testing-library)
- [@vue/test-utils](https://github.com/nvh95/vitest-preview/tree/main/examples/vue-test-utils)
## Is there a similar library for Jest
Yes, it is. It's [Jest Preview](https://github.com/nvh95/jest-preview).
## Star history
[](https://star-history.com/#nvh95/vitest-preview&Date)
## Contributing
Please see the contribution guide at [CONTRIBUTING.md](./CONTRIBUTING.md).
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Hung Viet Nguyen
💻
Andre
💡
René Wang
🌍
This project follows the [all-contributors](https://github.com/all-contributors/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.