{"id":13417452,"url":"https://github.com/nvh95/vitest-preview","last_synced_at":"2025-04-08T16:07:25.442Z","repository":{"id":61954690,"uuid":"508154786","full_name":"nvh95/vitest-preview","owner":"nvh95","description":"Debug your Vitest tests. Effortlessly. 🧪🖼⚡️","archived":false,"fork":false,"pushed_at":"2024-07-08T18:40:56.000Z","size":679,"stargazers_count":346,"open_issues_count":16,"forks_count":17,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-01T15:09:45.342Z","etag":null,"topics":["debug","frontend","productivity","react","svelte","testing","vite","vitest","vue"],"latest_commit_sha":null,"homepage":"https://www.vitest-preview.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nvh95.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-28T04:34:26.000Z","updated_at":"2025-04-01T10:26:06.000Z","dependencies_parsed_at":"2024-01-07T18:05:50.789Z","dependency_job_id":"c6dca08f-8650-4478-b28c-084b9b1d54df","html_url":"https://github.com/nvh95/vitest-preview","commit_stats":{"total_commits":67,"total_committers":5,"mean_commits":13.4,"dds":"0.10447761194029848","last_synced_commit":"3191a7d436957a363cab33139f54a2141f678c93"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nvh95%2Fvitest-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nvh95%2Fvitest-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nvh95%2Fvitest-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nvh95%2Fvitest-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nvh95","download_url":"https://codeload.github.com/nvh95/vitest-preview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247878022,"owners_count":21011158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["debug","frontend","productivity","react","svelte","testing","vite","vitest","vue"],"created_at":"2024-07-30T22:00:37.415Z","updated_at":"2025-04-08T16:07:25.419Z","avatar_url":"https://github.com/nvh95.png","language":"TypeScript","funding_links":[],"categories":["Plugins","TypeScript"],"sub_categories":["Framework-agnostic Plugins","Templates"],"readme":"\u003cp align=\"center\"\u003e\n \u003cimg align=\"center\" alt=\"Vitest Preview Logo\" src=\"https://user-images.githubusercontent.com/8603085/197406675-dbe5b555-3a71-4c6d-9547-776c18052881.svg\" width=\"120\"/\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n\u003ca href=\"https://www.vitest-preview.com\" target=\"_blank\" \u003eVitest Preview\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\nDebug your Vitest tests. Effortlessly. 🧪🖼⚡️\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg align=\"center\" src=\"https://user-images.githubusercontent.com/8603085/197373376-f6a3fe33-487b-4c35-8085-8e7e6357ce40.gif\" alt=\"Vitest Preview Demo\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://stackblitz.com/edit/vitest-preview?file=src%2FApp.test.tsx,README.md\" title=\"Try Vitest Preview Now\" target=\"_blank\"\u003eTry Vitest Preview Online\u003c/a\u003e. No downloads needed!\n\u003c/p\u003e\n\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n[![npm version](https://img.shields.io/npm/v/vitest-preview)](https://www.npmjs.com/package/vitest-preview)\n[![Best of JS](https://img.shields.io/endpoint?url=https://bestofjs-serverless.now.sh/api/project-badge?fullName=nvh95%2Fvitest-preview%26since=weekly)](https://bestofjs.org/projects/vitest-preview)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-green.svg)](./CONTRIBUTING.md)\n[![Mentioned in Awesome Jest](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite#testing)\n\n[![Try Vitest Preview now](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/vitest-preview?file=src%2FApp.test.tsx,README.md)\n\n## Why **vitest-preview**\n\nWhen 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.\n\n`vitest-preview` is built on top of [Vite](https://vitejs.dev), it's blazing fast and easy to use.\n\n`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).\n\n## Features\n\n- 👀 Visualize your testing UI in an external browser in milliseconds.\n- 🔄 Auto reloads the browser when `debug()` is executed.\n- 💅 Fully support CSS\n- 🌄 Support viewing images.\n\n## Installation\n\n```bash\nnpm install --save-dev vitest-preview\n# Or\nyarn add -D vitest-preview\npnpm add -D vitest-preview\n```\n\n## Configuration\n\n### Process CSS\n\nYou need to configure `vitest` to process CSS by:\n\n```diff\n// vite.config.js\nexport default defineConfig({\n  test: {\n+    css: true,\n  },\n});\n\n```\n\nYou might want to import your CSS global files in `setupFiles`:\n\n```diff\n// vite.config.js\nexport default defineConfig({\n  test: {\n+    setupFiles: './src/test/setup.ts',\n  },\n});\n\n```\n\n```diff\n// src/test/setup.ts\n+import './global.css';\n+import '@your-design-system/css/dist/index.min.css';\n+import 'bootstrap/dist/css/bootstrap.min.css';\n\n```\n\n### Add script vitest-preview\n\n`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:\n\n```json\n\"scripts\": {\n  \"vitest-preview\": \"vitest-preview\"\n},\n```\n\n### Update .gitignore\n\nUpdate your `.gitignore`\n\n```diff\n// .gitignore\n+.vitest-preview\n```\n\n## Usage\n\nPut `debug()` wherever you want to see the UI in your tests.\n\n```diff\n+import { debug } from 'vitest-preview';\n\ndescribe('App', () =\u003e {\n  it('should work as expected', () =\u003e {\n    render(\u003cApp /\u003e);\n+    debug();\n  });\n});\n```\n\nOpen the **Vitest Preview Dashboard** by running the CLI command (updated in [Configuration](#configuration)):\n\n```bash\nnpm run vitest-preview\n# Or\nyarn vitest-preview\npnpm vitest-preview\n```\n\nThen execute your tests that contain `debug()`. You will see the UI of your tests at [http://localhost:5006](http://localhost:5006).\n\n## Examples\n\n- [react-testing-library](https://github.com/nvh95/vitest-preview/tree/main/examples/react-testing-library)\n- [@vue/test-utils](https://github.com/nvh95/vitest-preview/tree/main/examples/vue-test-utils)\n\n## Is there a similar library for Jest\n\nYes, it is. It's [Jest Preview](https://github.com/nvh95/jest-preview).\n\n## Star history\n\n[![Star History Chart](https://api.star-history.com/svg?repos=nvh95/vitest-preview\u0026type=Date)](https://star-history.com/#nvh95/vitest-preview\u0026Date)\n\n## Contributing\n\nPlease see the contribution guide at [CONTRIBUTING.md](./CONTRIBUTING.md).\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://hung.dev\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/8603085?v=4?s=100\" width=\"100px;\" alt=\"Hung Viet Nguyen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHung Viet Nguyen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/nvh95/vitest-preview/commits?author=nvh95\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/KatFishSnake\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/12003520?v=4?s=100\" width=\"100px;\" alt=\"Andre\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAndre\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#example-KatFishSnake\" title=\"Examples\"\u003e💡\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/RiverTwilight\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/52880665?v=4?s=100\" width=\"100px;\" alt=\"René Wang\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRené Wang\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#translation-RiverTwilight\" title=\"Translation\"\u003e🌍\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\n![This is open source software](https://user-images.githubusercontent.com/8603085/161439058-98faea42-c6e6-46f4-9ce6-218fad5f3b9a.gif)\n\nMIT\n\n## Support\n\nIf you like the project, please consider supporting it by giving a ⭐️ to encourage the author.\n\n\u003c!-- TODO: Write a GitHub Actions to sync with root readme --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnvh95%2Fvitest-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnvh95%2Fvitest-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnvh95%2Fvitest-preview/lists"}