在 Vuetify（Vite & TypeScript）中導入單元測試 Unit Testing
如果你完全沒有接觸過單元測試，建議可以先閱讀這兩篇文章：「認識 Jest 測試框架，開始動手寫單元測試、Jest 框架進階應用（describe、Setup and Teardown、Mock function） 」。
這篇文章會先帶大家建立 Vuetify 的初始環境（Vue3 & Vite & TypeScript），並導入「Vue Test Utils」這款測試工具。
大綱
ㄧ、初始化專案、安裝必要套件
二、編寫測試的 config 檔
三、撰寫第一隻測試程式
四、運行測試程式確認結果符合預期
五、VSCode 的 Vitest 外掛
六、一些建議讀者可以直接到筆者的 Github ，將專案 Clone 下來跑跑看，會更好理解裏面的邏輯（順手按個 ⭐ 更好 🤩）。
ㄧ、初始化專案、安裝必要套件
筆者 node.js 的版本為 18.13.0，建議選擇較新的版本，否則安裝套件的過程會遇到一些問題。
這邊我們參考 Vuetify 官方文件的指令 yarn create vuetify 來建立專案。
建立過程中會問你很多問題，筆者的選擇如下：
- Project name：自行決定（ex：vuetify-vite-ts-test）
- Which preset would you like to install：Essentials (Vuetify, VueRouter, Pinia)
- Use TypeScript：Yes
- Would you like to install dependencies with yarn, npm, or pnpm?：Yarn
不過問題時常調整，大家參考就好。
建立好 Vuetify 專案後，我們來安裝測試輔助套件如下：
yarn add --dev @vue/test-utils @vitejs/plugin-vue vitest jsdom完成以上步驟後，在終端機輸入指令 yarn dev，看看是否能順利啟動。
如果網頁能順利跑出來就恭喜你完成第一步嚕！
二、編寫測試的 config 檔
在專案根目錄下，新增 vitest.config.ts，這是專門為了單元測試寫的相關設定檔，你仔細看會發現它跟「vite.config.ts」設定很像。
import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';
import { fileURLToPath, URL } from 'node:url';
export default defineConfig({
// Resolver
resolve: {
// https://vitejs.dev/config/#resolve-alias
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
// plugins
plugins: [
// Vue3
vue(),
// Vuetify Loader
// https://github.com/vuetifyjs/vuetify-loader
vuetify({
autoImport: true,
styles: { configFile: './src/styles/variables.scss' },
}),
],
test: {
// https://vitest.dev/guide/#configuring-vitest
globals: true,
environment: 'jsdom',
deps: {
inline: ['vuetify'],
},
},
});三、撰寫第一隻測試程式
我們就以入口頁「HelloWorld.vue」為範例跟大家說明。
➤ 調整「src/components/HelloWorld.vue」的程式
這裡我們新增 defineProps 以接收傳進來的「msg」，並在頁面上顯示。
<template>
<v-container class="fill-height">
<v-responsive class="d-flex align-center text-center fill-height">
<v-img
contain
height="200"
src="@/assets/logo.svg"
/>
<h1 class="green">{{ msg }}</h1>
</v-responsive>
</v-container>
</template>
<script setup lang="ts">
defineProps<{
msg: string;
}>();
</script>➤ 新增「src/components/__test__/HelloWorld.spec.ts」作為測試程式
在 components 資料夾下建立「__test__」的資料夾放置測試程式，我們透過它來確認 HelloWorld 頁面是否有收到 props 的 msg，並如預期被渲染。
import { describe, it, expect } from "vitest";
import { mount } from "@vue/test-utils";
import HelloWorld from "../HelloWorld.vue";
import vuetify from '@/plugins/vuetify';
describe("HelloWorld", () => {
it("renders properly", () => {
const wrapper = mount(HelloWorld, {
global: {
plugins: [vuetify],
},
props: {
msg: "Hello Vitest"
}
});
expect(wrapper.text()).toContain("Hello Vitest");
});
});四、運行測試程式確認結果符合預期
在 package.json 新增一條測試用的 script："test:unit": "vitest --environment jsdom --root src/"
{
"name": "vuetify-vite-ts-test",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && vite build",
"preview": "vite preview",
"lint": "eslint . --fix --ignore-path .gitignore",
"test:unit": "vitest --environment jsdom --root src/"
},
"dependencies": {...},
"devDependencies": {...}
}新增後在終端機輸入指令 yarn test:unit 就會開始執行測試，如果看到下面的畫面，就恭喜你成功導入單元測試嚕！
五、VSCode 的 Vitest 外掛
跟 Jest 一樣，VSCode 也有 Vite 的外掛喔！他叫做 Vitest。
安裝完成後，點擊 VSCode 左側的「Testing」icon，就可以測試嚕！
六、一些建議
➤ VSCode 改使用 Volar 這個外掛
今天這個是以 Vue3 設計的專案，如果你過去 VSCode 使用的版本是 Vue2，那可能有些程式下方會有警告，那可能是 VSCode 過去在 Vue2 時選用 Vetur 這個外掛，現在 Vue3 要改成使用 Volar。
➤ 如果遇到了「Type 'Plugin' is not assignable to type 'PluginOption'」這類的錯誤
通常是因為安裝了多個 Vite 的版本所導致的，建議先將根目錄下的「node_modules」以及「.lock」全部移除，然後再重新安裝套件。
筆者是在 nvm 切換 node.js 版本時遇到這個問題的。
那今天的文章就分享到這裡，下一篇文章會以實際案例跟大家分享 Vue Test Utils 的應用！
▶︎ 如果這篇文章有幫助到你
可以點擊下方「Follow」來追蹤我～
可以對文章拍手讓我知道 👏🏻
你們的追蹤與鼓勵是我繼續寫作的動力 🙏🏼
▶︎ 如果你對工程師的職涯感到迷茫
也許我在iT邦幫忙發表的系列文可以給你不一樣的觀點 💡
也歡迎您到書局選購支持，透過豐富的案例來重新檢視自己的職涯
