{"id":20067787,"url":"https://github.com/dean9703111/vuetify-vite-ts-test","last_synced_at":"2026-03-01T06:35:42.560Z","repository":{"id":106083762,"uuid":"590723960","full_name":"dean9703111/vuetify-vite-ts-test","owner":"dean9703111","description":"Vuetify+Vite+Vue3+TypeScripts+@vue/test-utils 入門專案","archived":false,"fork":false,"pushed_at":"2023-01-19T04:31:24.000Z","size":1011,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-20T14:43:51.053Z","etag":null,"topics":["type","typescript","unit-testing","vite","vue-test-utils","vue3","vuetify"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dean9703111.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-01-19T03:32:26.000Z","updated_at":"2024-04-08T08:40:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"53178fb9-96a2-43f8-b72d-f9bd4da5da9b","html_url":"https://github.com/dean9703111/vuetify-vite-ts-test","commit_stats":{"total_commits":2,"total_committers":1,"mean_commits":2.0,"dds":0.0,"last_synced_commit":"feda85d580411bd33833729011492d1fcada6611"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dean9703111/vuetify-vite-ts-test","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dean9703111%2Fvuetify-vite-ts-test","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dean9703111%2Fvuetify-vite-ts-test/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dean9703111%2Fvuetify-vite-ts-test/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dean9703111%2Fvuetify-vite-ts-test/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dean9703111","download_url":"https://codeload.github.com/dean9703111/vuetify-vite-ts-test/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dean9703111%2Fvuetify-vite-ts-test/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29962029,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T05:59:08.471Z","status":"ssl_error","status_checked_at":"2026-03-01T05:58:04.208Z","response_time":124,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["type","typescript","unit-testing","vite","vue-test-utils","vue3","vuetify"],"created_at":"2024-11-13T14:03:49.129Z","updated_at":"2026-03-01T06:35:42.542Z","avatar_url":"https://github.com/dean9703111.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 在 Vuetify（Vite \u0026 TypeScript）中導入單元測試 Unit Testing\n\n\u003e 如果你完全沒有接觸過單元測試，建議可以先閱讀這兩篇文章：「[認識 Jest 測試框架，開始動手寫單元測試](https://medium.com/dean-lin/c61c9f11f844)、[Jest 框架進階應用（describe、Setup and Teardown、Mock function）\n](https://medium.com/dean-lin/f9760e2de97e)」。\n\n這篇文章會先帶大家建立 Vuetify 的初始環境（Vue3 \u0026 Vite \u0026 TypeScript），並導入「Vue Test Utils」這款測試工具。\n\n```\n大綱\n\nㄧ、初始化專案、安裝必要套件\n二、編寫測試的 config 檔\n三、撰寫第一隻測試程式\n四、運行測試程式確認結果符合預期\n五、VSCode 的 Vitest 外掛\n六、一些建議\n```\n\n### ㄧ、初始化專案、安裝必要套件\n\n\u003e 筆者 node.js 的版本為 18.13.0，建議選擇較新的版本，否則安裝套件的過程會遇到一些問題。\n\n這邊我們參考 Vuetify 官方文件的指令 `yarn create vuetify` 來建立專案。\n\n建立過程中會問你很多問題，筆者的選擇如下：\n- **Project name**：自行決定（ex：vuetify-vite-ts-test）\n- **Which preset would you like to install**：Essentials (Vuetify, VueRouter, Pinia)\n- **Use TypeScript**：Yes\n- **Would you like to install dependencies with yarn, npm, or pnpm?**：Yarn\n\n\u003e 不過問題時常調整，大家參考就好。\n![image](./img/yarn-create-vuetify.png)\n\n建立好 Vuetify 專案後，我們來安裝測試輔助套件如下：\n```\nyarn add --dev @vue/test-utils @vitejs/plugin-vue vitest jsdom\n```\n\n完成以上步驟後，在終端機輸入指令 `yarn dev`，看看是否能順利啟動。\n\n![image](./img/yarn-dev.png)\n![image](./img/init-page.png)\n如果網頁能順利跑出來就恭喜你完成第一步嚕！\n\n### 二、編寫測試的 config 檔\n\n在專案根目錄下，新增 vitest.config.ts，這是專門為了單元測試寫的相關設定檔，你仔細看會發現它跟「vite.config.ts」設定很像。\n```ts\nimport { defineConfig } from 'vitest/config';\nimport vue from '@vitejs/plugin-vue';\nimport vuetify from 'vite-plugin-vuetify';\n\nimport { fileURLToPath, URL } from 'node:url';\n\nexport default defineConfig({\n  // Resolver\n  resolve: {\n    // https://vitejs.dev/config/#resolve-alias\n    alias: {\n      '@': fileURLToPath(new URL('./src', import.meta.url)),\n    },\n  },\n  // plugins\n  plugins: [\n    // Vue3\n    vue(),\n    // Vuetify Loader\n    // https://github.com/vuetifyjs/vuetify-loader\n    vuetify({\n      autoImport: true,\n      styles: { configFile: './src/styles/variables.scss' },\n    }),\n  ],\n  test: {\n    // https://vitest.dev/guide/#configuring-vitest\n    globals: true,\n    environment: 'jsdom',\n    deps: {\n      inline: ['vuetify'],\n    },\n  },\n});\n```\n\n### 三、撰寫第一隻測試程式\n\n我們就以入口頁「HelloWorld.vue」為範例跟大家說明。\n\n#### ➤ 調整「src/components/HelloWorld.vue」的程式\n這裡我們新增 defineProps 以接收傳進來的「msg」，並在頁面上顯示。\n```vue\n\u003ctemplate\u003e\n  \u003cv-container class=\"fill-height\"\u003e\n    \u003cv-responsive class=\"d-flex align-center text-center fill-height\"\u003e\n      \u003cv-img\n        contain\n        height=\"200\"\n        src=\"@/assets/logo.svg\"\n      /\u003e\n      \u003ch1 class=\"green\"\u003e{{ msg }}\u003c/h1\u003e\n    \u003c/v-responsive\u003e\n  \u003c/v-container\u003e\n\u003c/template\u003e\n\n\u003cscript setup lang=\"ts\"\u003e\ndefineProps\u003c{\n  msg: string;\n}\u003e();\n\u003c/script\u003e\n```\n\n#### ➤ 新增「src/components/__test__/HelloWorld.spec.ts」作為測試程式\n\n在 components 資料夾下建立「 __test__ 」的資料夾放置測試程式，我們透過它來確認 HelloWorld 頁面是否有收到 props 的 msg，並如預期被渲染。\n```ts\nimport { describe, it, expect } from \"vitest\";\nimport { mount } from \"@vue/test-utils\";\nimport HelloWorld from \"../HelloWorld.vue\";\nimport vuetify from '@/plugins/vuetify';\ndescribe(\"HelloWorld\", () =\u003e {\n  it(\"renders properly\", () =\u003e {\n    const wrapper = mount(HelloWorld, {\n      global: {\n        plugins: [vuetify],\n      },\n      props: {\n        msg: \"Hello Vitest\"\n      }\n    });\n    expect(wrapper.text()).toContain(\"Hello Vitest\");\n  });\n});\n```\n\n### 四、運行測試程式確認結果符合預期\n\n在 package.json 新增一條測試用的 script：`\"test:unit\": \"vitest --environment jsdom --root src/\"`\n```json\n{\n  \"name\": \"vuetify-vite-ts-test\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"vite\",\n    \"build\": \"vue-tsc --noEmit \u0026\u0026 vite build\",\n    \"preview\": \"vite preview\",\n    \"lint\": \"eslint . --fix --ignore-path .gitignore\",\n    \"test:unit\": \"vitest --environment jsdom --root src/\"\n  },\n  \"dependencies\": {...},\n  \"devDependencies\": {...}\n}\n```\n\n新增後在終端機輸入指令 `yarn test:unit` 就會開始執行測試，如果看到下面的畫面，就恭喜你成功導入單元測試嚕！\n\n![image](./img/yarn-test.png)\n\n### 五、VSCode 的 Vitest 外掛\n\n跟 Jest 一樣，VSCode 也有 Vite 的外掛喔！他叫做 [Vitest](https://marketplace.visualstudio.com/items?itemName=ZixuanChen.vitest-explorer)。\n\n![image](./img/vitest.png)\n\n安裝完成後，點擊 VSCode 左側的「Testing」icon，就可以測試嚕！\n\n![image](./img/vitest-run.png)\n\n### 六、一些建議\n\n#### ➤ VSCode 改使用 Volar 這個外掛\n\n今天這個是以 Vue3 設計的專案，如果你過去 VSCode 使用的版本是 Vue2，那可能有些程式下方會有警告，那可能是 VSCode 過去在 Vue2 時選用 [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) 這個外掛，現在 Vue3 要改成使用 [Volar](https://marketplace.visualstudio.com/items?itemName=vue.volar)。\n\n#### ➤ 如果遇到了「Type 'Plugin' is not assignable to type 'PluginOption'」這類的錯誤\n\n通常是因為安裝了多個 Vite 的版本所導致的，建議先將根目錄下的「node_modules」以及「.lock」全部移除，然後再重新安裝套件。\n\n\u003e 筆者是在 nvm 切換 node.js 版本時遇到這個問題的。\n\n那今天的文章就分享到這裡，下一篇文章會以實際案例跟大家分享 Vue Test Utils 的應用，敬請期待！","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdean9703111%2Fvuetify-vite-ts-test","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdean9703111%2Fvuetify-vite-ts-test","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdean9703111%2Fvuetify-vite-ts-test/lists"}