2025年8月18日 星期一

Tailwind CSS 快速升級 v4

Tailwind CSS v4 在2025年1月推出,主打在效能上有顯著的提升,配置也變得更簡便。依照指示一步一步來調整專案,可以簡單快速完成設定。

手動升級

1. 更新及安裝套件

安裝新版的 tailwindcss@tailwindcss/postcss

npm install -D tailwindcss@4.1.12 @tailwindcss/postcss@4.1.12

兩個套件 autoprefixerpostcss 都可以從 package.json 中移除。


2. 調整 postcss.config.js

把新的套件設定放上去。

Before
export default {
  plugins: {
    "postcss-import": {}, // remove
    tailwindcss: {},      // remove
    autoprefixer: {},     // remove
  },
};
After
export default {
  plugins: {
    "@tailwindcss/postcss": {}, // new
  },
};

3. 移除 @tailwind
Before
@tailwind base;
@tailwind components;
@tailwind utilities;
After
@import "tailwindcss";

我的專案本來就沒有使用 @tailwind,因為 SASS 的 @import 準備棄用(參考資料),因此使用 @use 也效果相同。

Before
@use 'tailwindcss/base';
@use 'tailwindcss/components';
@use 'tailwindcss/utilities';
After
@use "tailwindcss";

到這邊基本上就大功告成了,可以測試看看是不是都正常呢



自動升級

另外官方這次也有提供指令來進行升級:

npx @tailwindcss/upgrade

執行時目錄內不能有任何 unstaged files,否則不會進行任何操作。可以根據Terminal上的訊息了解到執行內容基本上相同。

因此除了專案配置以外的改變,需要再參考指南確認有哪些影響,如果有v3, v4之間不兼容的調整,需要手動修正這些地方。


同場加映,額外分享兩個這次的調整:

  • Automatic content detection:過往會在tailwind.config.ts 內定義 content 偵測檔案範圍,v4不再依賴這個設定,可以大膽地把這些設定拿掉。當然!會自動忽略 .gitignore 內提及的範圍,來確保效能。
  • First-party Vite plugin:Vite目前真的可以說是強勢的存在,v4也特地為它打造一個 plugin 取代 PostCSS,只要在 vite.config.ts 加入設定,就可以移除檔案 postcss.config.js 讓專案更乾淨。

2025年8月14日 星期四

[Vue.js] SVG 引入與 Typescript 型別設定

❌錯誤示範

如何在vue專案裡使用 svg 檔案,最直覺的做法:

<template>
    <svg>
        <use href="./assets/penguin-svgrepo-com.svg" width="50%" height="50%" />
    </svg>
</template>

開發階段只要注意路徑正確,就能正常顯示。

但編譯到正式環境時,這段 <use> 標籤使用了 href="data:image/svg+xml,... 來嵌入 SVG 圖片,但這種用法在 <use> 上是無效的,因此圖示不會正確顯示。


改用圖片 <img> 來處理或許可以解決:

<img src="data:image/svg+xml,<svg ...>..." />

雖然這樣瀏覽器就會把它當成圖片正常顯示,但無法用 CSS 改 fillstroke,可調整性較差。


✔️解決方法
1. 安裝 vite-svg-loader 及設定
npm install -D vite-svg-loader

接著,vite.config.ts也要增加設定:

import svgLoader from 'vite-svg-loader';

export default {
    plugins: [
        svgLoader(),
    ],
    // ...
};

2. 新增型別宣告

假設專案並不是使用 Typescript,可以省略這個步驟。

新增 vite-env.d.ts,其主要用途是為 Vite 專案提供型別宣告。它能確保你的 TypeScript 專案能夠正確識別和處理 Vite 特有的功能,而不會報錯。

簡單來說,它就像一個翻譯官,告訴 TypeScript 編譯器:「嘿,Vite 會處理這些特殊檔案,請不要報錯,它們的型別是長這樣。」

// src/vite-env.d.ts
declare module '*.svg' {
    const content: string

    export default content
}

你也可以使用 env.d.ts。但 vite-env.d.ts 的命名方式更明確地表示它是為 Vite 專案服務的。

建議放在 src/ 資料夾的根目錄,Vite 會自動尋找資料夾中的 env.d.tsvite-env.d.ts 檔案,並將其視為專案的型別宣告。

如果你將它放在其他位置,你需要在 tsconfig.jsonincludefiles 欄位中手動指定它的路徑,確保 TypeScript 編譯器能夠找到它。

3. 使用 svg

最後只要調整引用的方法,可以把 svg 當作一個 component 來使用。

<template>
    <Penguin />
</template>

<script setup lang="ts">
import Penguin from '@/assets/penguin.svg'
</script>

這樣一來原本支援的 attr 都可以使用,例如:

<Penguin width="200" height="200" />

參考資料:


2025年7月27日 星期日

[Recat] JSX 常見語法雷區

1. JSX 中 HTML 標籤必須自閉合

HTML 中 input 是 void element,本來不需要閉合標籤。

// ✅ 正確
<input type="text" />

// ❌ 錯誤
<input type="text" >  // JSX 會報錯

-----
2. class 要改寫成 className

JSX 是 JavaScript,不允許使用 JS 關鍵字 class

// ✅ 正確
<div className="box" />

// ❌ 錯誤
<div class="box" />  // React 不認得

-----
3. for 要改寫成 htmlFor

表單 label 的 for 在 JSX 中是保留字,要改成 htmlFor

<label htmlFor="email">Email</label>

-----
4. JS 表達式要放在 {}

Vue.js template 則使用是雙括號 {{}}

const name = "Annie";

// ✅ 正確
<p>Hello, {name}</p>
<h1>{name.toUpperCase()}</h1>

// ❌ 錯誤
<p>Hello, {{name}}</p>

-----
5. style 需用物件寫法,且值要加引號或轉成 string

style 物件的 key 是 camelCase(如: fontSize),不同於 HTML/CSS 的 kebab-case(如: font-size

// ✅ 正確
<div style={{ color: 'red', fontSize: '16px' }} />

// ❌ 錯誤
<div style="color: red; font-size: 16px;" />  // HTML 寫法不支援

雙括號讓解讀困難,因此也把物件先儲存到一個變數中再傳給 style,效果完全一樣。

const config = { color: 'red', fontSize: '16px' };
const element = <div style={config} />

-----
6. JSX 裡只能回傳單一根元素

必須使用 Fragment

// ✅ 正確(使用 <></> Fragment)
return (
  <>
    <Header />
    <Content />
  </>
);

// ❌ 錯誤(JSX 中不能 return 兩個平行元素)
return (
  <Header />
  <Content />
);

-----
7. 事件寫法是駝峰命名,值是函式

非常容易與 HTML 原本的寫法混淆

// ✅ 正確
<button onClick={handleClick}>Click</button>

// ❌ 錯誤
<button onclick="handleClick()">Click</button>

-----
8. 條件渲染

在 JSX 中,沒有像 Vue.js 的 v-if 那樣的指令語法,但可以用 JavaScript 表達式來實現相同的功能,或是三元運算或邏輯 (&&) 來達到條件渲染。

{isLoading && <Loading />}
{isLoggedIn ? <Dashboard /> : <Login />}

-----
9. 條件式為 0 時,通常是非預期的顯示結果

像這樣 isLoading 為 boolean,True 顯示 Loading。

{isLoading && <Loading />}

'', null, False 代表否定、不會顯示任何內容,0 雖然也歸類成否定,對 jsx 卻是可以正確顯示在畫面上的值,務必要讓條件輸出成 boolean 來避免問題。

// ✅ 正確
{item.length > 0 && <List item={item} />}

// ❌ 錯誤
{item.length && <List item={item} />} // 得到的結果是 {0}

-----
10. 列表渲染

JSX 本質上就是 JavaScript + HTML 的混合語法,所有邏輯請交給 JS 處理,Vue.js 的 v-for 可以對應到 .map(),同樣要設定 key 屬性,其值必須唯一。

{items.map((item, index) => (
  <li key={index}>{item}</li>
))}

Vue 支援 JSX 的寫法,但可以直接使用使用 HTML attributes classfor

2024年3月28日 星期四

[Javascript] 四種併發 Promise 差異比較


Promise 代表非同步操作的物件,一個 Promise 可區分成三種狀態:

  • pending - 初始狀態,可以視為處理中
  • fulfilled - 表示操作成功
  • rejected - 表示操作失敗

Promise 的併發控制就是當我們傳入多個 Promise時,藉由達成不同的條件,返回不同狀態的 Promise。


Promise.all()

當輸入的所有 Promise 的狀態都為 fulfilled 時,回傳 Promise 也是 fulfilled、操作成功;可按照輸入 Promise 的順序取得其回傳值。若有任何一項 rejected,立即判定操作失敗。

Promise.all([requestA, requestB, requestC]).then(result => {
    const [resultA, resultB, resultC] = result;
    
    // 全部都成功
}).catch(err => {
    // 可取得第一個失敗原因 
    console.log(err);
})
全部成功才是成功

Promise.allSettled()

當輸入的所有 Promise 的執行完畢時,不論為 fulfilled、rejected,回傳 Promise 必為 fulfilled;可按照其輸入的順序,取得各別的狀態(status)、回傳值(value)或錯誤原因(reason)。

Promise.all([requestA, requestB, requestC]).then(result => {
    const [resultA, resultB, resultC] = result;
    
    // 操作成功時,可以取得回傳值
    // result = {status: 'fulfilled', value: 'Great Job!'}
    // 操作失敗時,可以取得原因
    // result = {status: 'rejected', reason: 'Because ....'}
})
全部完成比較重要,但誰輸誰贏很清楚

Promise.any()

當輸入的所有 Promise 有任一個操作成功時,回傳 Promise 狀態為 fulfilled,且可取得其回傳值。若沒有任何一項成功,則是 rejected,錯誤原因是AggregateError。

Promise.any([requestA, requestB, requestC]).then(result => {
  // 取得最快成功的回傳值
  console.log(result);
}).catch(err => {
  // AggregateError: No Promise in Promise.any was resolved
  console.log(err);
});
龜兔賽跑,爭取第一名

Promise.race()

當輸入的所有 Promise 有任一個操作完成時,根據其狀態決定回傳 Promise 狀態,若第一個操作結果為成功,則為回傳狀態為 fulfilled;反之是 rejected。

Promise.race([requestA, requestB, requestC]).then(result => {
  // 第一個人成功,走這條路
  console.log(result);
}).catch(err => {
  // 第一個人失敗,走這條路
  console.log(err);
});
成敗不是關鍵,速度才是絕對

2023年10月12日 星期四

npm 安裝不依賴 --legacy-peer-deps 解決 Conflicting Peer Dependency 錯誤

當執行 npm install 時,出現錯誤 Conflicting peer dependecy: XXX,並出現提示:Fix the upstream dependecy conflict, or retry this commaned with --force or --legacy-peer-deps

此時只要嘗試執行

npm install --legacy-peer-deps

確實能夠避免這個錯誤,然而卻無法保證套件運作都是正常的,這個方法只能當作緩解,更正確的作法是將套件更新以保證互相兼容,以避免未來引發其他潛在問題。


首先,列出目前套件版本落後的項目:

npm outdated

可以注意我們會得到哪些訊息,Current 為目前安裝的版本;Wanted則是 npm 自動安裝的版本,確保版號的第一碼一致,盡可能地安裝最新的版本;Lastest 則是目前最新的版本。例如下方這個設定,對照圖片上的訊息,npm會自動安裝版本 7.23.2。

{
  "devDependencies": {
    "@babel/core": "^7.16.12"
  }
}

因為下一步我們會將package-lock.json移除,因此若 Current 和 Wanted 不一致,必須確保 Wanted 顯示的版本並不會影響到目前的專案,根據版本的需求做出對應的調整。若確定不升級,請記得務必調整package.json,確保安裝正確的版本。

下一步,移除目錄node_modules/和檔案package-lock.json

最後重新安裝套件:

npm install

確認一下專案是否都正常,大功告成!


2023年8月26日 星期六

[Javascript] stopPropagation 停止事件捕捉及冒泡

近期工作上修正一個因為冒泡(bubbling) 導致的錯誤,神奇的是 chrome 異常但 safari 正常,因此想知道兩個瀏覽器為什麼會有這樣的差異,順便整理一下stopPropagation 的使用方法。

冒泡(bubbling) 是 Javacript 事件傳遞的方式,當一個 div 物件裡有個按鈕(button),也就是 div 為 button 的父元件,兩者都監聽點擊(click) 事件,當使用者點擊按鈕時,按鈕會先被觸發並進一步傳遞給 div 物件觸發點擊事件。

因此依據這樣的特性,可以將事件監聽 (addEventListener) 放在共同的父元件上,達到效能的優化,動態產生 DOM 元件時也不必額外處理事件監聽

<!-- 比較兩者差異 -->
<ul>
    <li onclick="doSomething()"> ... </li>
    <li onclick="doSomething()"> ... </li>
</ul>

<ul onclick="doSomething()">
    <li> ... </li>
    <li> ... </li>
</ul>

但總會有一些例外,例如只希望觸發目標元件(event.target) 的事件,而 stopPropagation 就是可以阻止事件傳播冒泡。

<div id="c">
    <div id="b">
        <button id="a">click</button>
    </div>
</div>

對每一層物件都加上監聽

<script>
document.querySelector("#a").addEventListener('click', event => {
    console.log('a');
});
document.querySelector("#b").addEventListener('click', event => {
    console.log('b');
});
document.querySelector("#c").addEventListener('click', event => {
    console.log('c');
});
</script>

若點擊按鈕,會依需印出 a b c


接下來,其他設定不變,我們稍微調整 #b 加上 stopPropagation

document.querySelector("#b").addEventListener('click', event => {
    event.stopPropagation(); // HERE!!!!

    console.log('b');
});

若點擊按鈕,會依需印出 a b,最外層並不會執行。


另外有 stopImmediatePropagation 極為相似,但不只是停止冒泡到父元件,同一個元件的相同事件也會被停止。舉例 #b 不只是一項 click 事件監聽:

document.querySelector("#b").addEventListener('click', event => {
    event.stopImmediatePropagation(); // HERE!!

    console.log('b');
});
document.querySelector("#b").addEventListener('click', event => {
    console.log('other');
});

若點擊按鈕,也是印出 a b,包含最外層 cother都不會執行。


最後,safari 冒泡的行為我參考 Mouse event bubbling in iOS 這篇文章,必須符合一些情境才會冒泡,ios chrome 也會是相同的實作,但不確定為什麼 116.0.5845.96 這個版本的 chrome 突然又會冒泡。

這次的情境是子元件可以點擊編輯、父元件可以點擊拖曳,因為冒泡所以最後都會進入拖曳的狀態而無法編輯。之前因為大多使用 ios 瀏覽器操作系統,所以沒發現這個 bug,windows 系統下,若子元件未加上 stopPropagation 一樣會遇到無法編輯的問題。


2023年4月29日 星期六

[Javascript] 潛藏 setTimeout 的陷阱


setTimeoutsetInterval 常用在倒數計時或是提醒等,一些時間有關的實作,然而精準校時卻是不可能的任務,只能盡可能減少誤差。


使用方法

說明與範例
非同步函式(Asynchronous function)

setTimeout不會使得任何執行暫停

console.log(new Date());

setTimeout(() => {
  console.log(new Date());
}, 5000);
setTimeout(() => {
  console.log(new Date());
}, 3000);
setTimeout(() => {
  console.log(new Date());
}, 1000);

可以視同三個Timer同時開始倒數,而非停止等候5秒完成執行後再往下一項執行,因此輸出內容:

Sat Apr 29 2023 21:58:34
Sat Apr 29 2023 21:58:35
Sat Apr 29 2023 21:58:37
Sat Apr 29 2023 21:58:39


零延遲 (Zero deplay)

setTimout 參數第二位置傳入 delay 代表指定時間後執行第一個位置的 function,先看下面這個例子:

console.log("This is first line");

setTimeout(() => {
	console.log("This is second line");
}, 0);

console.log("This is third line");

輸出的結果是

This is first line
This is third line
This is second line

當設定成 0 時,預期是「馬上」執行,但更精準地說其實是下一個 event loop,也就是 setTimeout 會被放到 queue 裡等待下一次執行。

以這個例子來看,delay只能當作最短的執行時間。

const s = new Date().getSeconds();

setTimeout(function() {
	// prints out "2", meaning that the callback is not called immediately after 500 milliseconds.
	console.log("Ran after " + (new Date().getSeconds() - s) + " seconds");
}, 500)

while (true) {
	if (new Date().getSeconds() - s >= 2) {
		console.log("Good, looped for 2 seconds")
		break;
    }
}

可以當作 setTimeout 地位是最低的,因此即使設定的 delay 時間雖然到了,只能等待 queue 其他事件處理完成。

Good, looped for 2 seconds
Ran after 2 seconds

2023年3月11日 星期六

原始碼解析 create-vue 快速建立 Vue 專案


Vue 可以透過下面的指令,接著詢問一系列的問題,按照設定快速初始一個專案。(目前版本為 3.6.1)

npm init vue@latest

實際是執行這個 create-vue,想透過原始碼的解析,來了解怎麼樣做一個類似的功能,這個專案架構是如何、如何達成建立專案的功能。


1. playground

運用 git submodules的功能,主要是將各種條件下的樣板做snapshot,形成另一個 create-vue-templates 專案。


2. scripts

顧名思義分別對應到 package.json 的 scripts 所執行的檔案名。

  • build
  • prepublish
  • snapshot
  • test

3. template

將程式碼依照性質分成不同的目錄,根據使用者的設定將對應的檔案複製或合成等,形成 Vue 的專案。

  • base: 基本必備的程式碼,主要套件為 vue, vite
  • code: HelloWorld.vue 元件以及 vue-router 範例程式碼,會分成有無使用 ts 版本。
  • config: 裡面每個目錄依照套件名稱命名,目錄包含:cypress-ct, cypress, jsx, pinia, playwright, router, typescript, vitest,目錄裡是安裝套件的設定檔。主要會有 package.json 設定安裝那些套件,後續會將內容與現有設定合併,再來以 cypress 為例,會有 cypress.config.jscypress.config.ts,屆時會根據是否有用 ts 來複製對應的檔案。
  • entry: 指的是 vite 打包的 entry main.js,執行 createApp 的功能,總共有預設, pinia, router, pinia+router 這四種版本。
  • eslint
  • tsconfig

4. utils

目錄及檔案合併等方法都在這個目錄裡,檔名命名已經相當清楚。


5. index

主要邏輯在這個檔案

  • 讀 argv 指令
  • 使用 prompts 詢問一連串問題
  • 依照專案名稱等,產生 package.json
  • 複製 base
  • 複製 config
  • 複製 tsconfig
  • 產生 eslint
  • 複製 entry
  • 清除 js or ts 多餘的檔案或重新命名
  • 產生 README.md
  • 專案已完成,顯示指令提示

拆解過後,我覺得最重要的是如何整理出 template/,讓不同的安裝需求可以拆解出來,有秩序地組成這個初始的專案。


2023年1月27日 星期五

[Jest+Testing Library] Vue + storybook interaction 元件測試範例


storybook 可以獨立建立元件,並搭配 @storybook/addon-controls 控制 props 輸入及 @storybook/addon-actions 顯示 emit 輸出的內容,當然可以透過手動開啟 GUI 來測試元件是否符合規格,storybook 已經完成 render 的步驟,自動化的測試只差一步了!

storybook 可以搭配 interaction 套件進行元件測試,先按照「[Vue.js] storybook安裝方式與環境建置」完成 vue+storybook 的安裝,文內還是使用 Vue2,如果使用 Vue3 其實步驟差異不大。


安裝

執行指令

npm install --save-dev @storybook/addon-interactions @storybook/jest @storybook/testing-library


設定

請開啟 .storybook/main.js,註冊這個 addon interactions 套件,@storybook/addon-interactions 一定要放在 @storybook/addon-actions@storybook/addon-essentials 的後面。

module.exports = {
    addons: [
        '@storybook/addon-actions', // or '@storybook/addon-essentials'
        '@storybook/addon-interactions',
    ],
    features: {
        interactionsDebugger: true,
    },
};


撰寫測試

寫測試前,要先了解測試元件的重點是「邏輯!」

第一視覺的邏輯,經由 props 或 slots 改變元件顯示上的差異,例如文字內容或是決定是否顯示哪些區域等;第二行為的邏輯,當使用者輸入或點擊按鈕等,此時畫面產生的變化或是 emit 的事件內容等。

使用 jest + testing library 做測試,testing library底層為 vue test utils,兩者相比 testing library 可以更聚焦於元件測試,不容易因為非邏輯的變更,連同測試都要一起做調整。


簡單寫一個元件 NameEditor.vue,有兩個 props,按下按鈕可以發出 event。

<template>
    <div>
        <div
            v-text="message" />
        <input
            type="text"
            placeholder="name"
            v-model.trim="name">
        <button
            type="button"
            @click="onButtonClick"
            v-text="buttonText" />
    </div>
</template>

<script>
import {ref} from 'vue';

export default {
    props: {
        message: {
            type: String,
            required: true,
        },
        buttonText: {
            type: String,
            required: true,
        },
    },
    setup(props, {emit}) {
        const name = ref(undefined);

        const onButtonClick = () => {
            emit('subit', name);
        };

        return {
            name,
            onButtonClick,
        };
    },
};
</script>

接著,NameEditor.stories.js story基本的內容:

import {userEvent, screen} from '@storybook/testing-library';
import {expect} from '@storybook/jest';
import NameEditor from './NameEditor';

export default {
    title: 'NameEditor',
    argTypes: {
        message: {
            control: 'text',
        },
        buttonText: {
            control: 'text',
        },
        onNameSubmit: {
            action: 'submit',
        },
    },
};

const Template = (args, {argTypes}) => ({
    props: Object.keys(argTypes),
    components: {
        NameEditor,
    },
    template: `
        <NameEditor
            :message="message"
            :button-text="buttonText"
            @submit="onNameSubmit" />
    `,
});

export const Default = Template.bind({});

Default.args = {
    message: 'Input your name',
    buttonText: 'Submit',
};

interaction 的測試,必須寫在 play 裡面,測試流程是先輸入文字後,按下按鈕:

Default.play = async ({args}) => {
    const mockName = 'Chenuin';
    const button = screen.getByRole('button');

    await userEvent.type(screen.getByPlaceholderText('name'), mockName); // input name
    await userEvent.click(button); // click button

    const {message, buttonText, onNameSubmit} = args;

    expect(onNameSubmit).toHaveBeenCalledTimes(1);
    expect(onNameSubmit).toBeCalledWith(mockName);

    expect(screen.getByText(message)).toBeTruthy();
    expect(button.textContent).toBe(buttonText);
};

可以透過 args 取得 argTypes 的內容,發出的 event 自動 mock 可以直接驗證,只要把握 testing library獲取Dom的方式,需要注意 getBy...queryBy... 兩者差別,前者若取不到任何相符條件的element,會拋出exception,後者不會。其他部分就是 jest 語法。



執行

開啟 storybook 就會自動執行測試內容,如果有錯誤也會將訊息顯示畫面。

npm run storybook

(畫面如下)


到這邊就告一段落,如果希望能夠導入CI,可以使用 @storybook/test-runner

npm install --save-dev @storybook/test-runner

開啟 package.json 加入 npm script

{
  "scripts": {
    "test-storybook": "npx test-storybook"
  }
}

預設 test runner 會找到 http://localhost:6006 進行測試,可以加上 --url 來改變路徑。

npm run test-storybook

如果不是本地啟用storybook,可以利用 https://www.chromatic.com/ 來管理 storybook,就可以透過 internet 進行。Chromatic 可以用來發布 storybook、主要方便團隊 UI Review,藉此進行 CI 測試整合會更加容易。



參考資料

storybook 套件


2023年1月14日 星期六

第一個 Vue3 元件測試從 Vitest + Vue Test Utils 開始

延續「mocha + webpack 的 Vue3 元件單元測試」,既然使用 mocha 測試太卡關,這次安裝 Vitest 來試試看!

一、安裝

先安裝 Vitest,另外 Vitest 需要使用 Node >=v14,並安裝 Vite >=v3.0.0,還有 vue3 對應的測試套件

npm install --save-dev vite vitest @vue/test-utils @vitejs/plugin-vue

下面這幾個根據需求來選擇是否安裝

npm install --save-dev jsdom

提供UI介面,可參考 Test UI

npm install --save-dev @vitest/ui


二、設定

先到package.json設定npm指令

"scripts": {
    "test": "npx vitest",
}

在根目錄新增檔案 vitest.config.js

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [
        Vue(),
    ],
    test: {
        globals: true,
        environment: 'jsdom',
    },
});

常用的設定像是include指定測試檔案的目錄或名稱等,和exclude排除檔案

export default defineConfig({
    test: {
        include: ['**/*.test.js'],
        exclude: ['**/node_modules/**'],
    },
});

設定路徑的alias

export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src/'),
        },
    },
});

或者可以設定 csssetupFiles來套用css style

export default defineConfig({
    test: {
        css: true,
        setupFiles: './src/vitest/setup.js',
    },
});

src/vitest/setup.js import css

// src/vitest/setup.js

import 'todomvc-app-css/index.css';
import 'todomvc-common/base.css';

其他設定可以參考官方文件

完成基本設定後,就可以開始寫測試囉!



三、測試

針對現有的元件 TodoListEditor 撰寫測試

import { mount } from '@vue/test-utils';
import { test, expect } from 'vitest';
import TodoListEditor from 'components/TodoListEditor.vue';

test('TodoListEditor', () => {
    expect(TodoListEditor).toBeTruthy()

    const wrapper = mount(TodoListEditor, {
        props: {
            todoList,
        },
    });

    expect(wrapper.vm.todoList).toStrictEqual(todoList);
    expect(wrapper.props('todoList')).toStrictEqual(todoList);
});

參考資料



四、執行
npm run test

執行後就可以看到所有的測試項目及結果,若有錯誤也會對應的訊息顯示

有安裝@vitest/ui,可以開啟ui試試看

npm run test -- --ui


五、CI/CD

有了測試之後,我們利用 github action 設定每次 push 分支時,執行 vitest 的測試,請新增檔案 .github/workflows/test.yml

name: Test

on:
  push:
    branches: main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Before srcipt
        run: npm install

      - name: Test
        run: npm run test -- --run

.github/workflows/gh-pages.yml內的設定:

on:
  workflow_run:
    workflows: ["Test"]
    types:
      - completed

jobs:
  build:
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    runs-on: ubuntu-latest

    steps:
      ....

我們的目標是當 Test 成功時,才會執行部屬,否則忽略。請注意 completed 指的是完成時,無論測試結果成功與否都會觸發。因此 if: ${{ github.event.workflow_run.conclusion == 'success' }} 的設定是必要的。

也可變化成 ${{ github.event.workflow_run.conclusion == 'failure' }},當測試結果失敗時可以發送通知,根據應用情境改寫。

workflows可以設定多項,只要有任何一項執行就會觸發。


安裝 Vitest 來進行 Vue3 測試十分容易。語法跟 jest 很相像,甚至原本的 mocha 寫的測試也一行都沒改,都能夠支援測試。以上的內容有上傳到 github 上(專案),可以點選下方連結了解執行的內容。