iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 110 瀏覽

鐵人賽 Modern Web DAY 21

30 天製作工作室 SaaS 產品 (前端篇) 系列第 21 篇

技術 Day 21: 30天打造SaaS產品前端篇 - React Testing Library 與元件測試策略

前情提要在 Day 20 完成前端架構盤點後，我們發現測試覆蓋率還需要提升。今天我們將使用 Vitest + React Testing Library 建立...

Moscle.dev ‧ 2025-10-05

0 Like 0 留言 83 瀏覽

鐵人賽 Modern Web DAY 11

不只是登入畫面！一起打造現代化登入系統系列第 11 篇

技術屋況驗收[ 2 / 2 ]：Vitest 覆蓋率 & 整合測試

在上一篇，我們已經完成了 Vitest 的初始化，並撰寫了第一個單元測試。但光有測試檔還不夠，我們也要透過覆蓋率來檢視測試是否完整，避免有些功能被遺漏沒檢查到。...

阿杰 ‧ 2025-09-25 ‧團隊夢幻公牛

0 Like 0 留言 73 瀏覽

鐵人賽 Modern Web DAY 10

不只是登入畫面！一起打造現代化登入系統系列第 10 篇

技術屋況驗收[ 1 / 2 ]：Vitest 初始化 & 單元測試

在上一篇的「房門與門鎖」篇章中，我們已經完成了登入 / 註冊表單的設計，讓使用者能夠順利進出這棟「房子」🙂。但光是蓋好門，還不足以保證整體的品質。接下來就要進入...

阿杰 ‧ 2025-09-24 ‧團隊夢幻公牛

0 Like 0 留言 135 瀏覽

鐵人賽佛心分享-SideProject30 DAY 21

熟悉的網聊最對味？來做個匿名聊天室吧！系列第 21 篇

技術 [Day-21] 單元測試-前端篇

前端的單元測試大多是透過 props 和內部狀態的變化來測試不同狀況的元件，不過事前準備稍微多一點！環境設定 Next 對於 Vitest 的設定說明有點...

Shin ‧ 2025-09-22 ‧團隊火箭隊 v2025

0 Like 0 留言 116 瀏覽

鐵人賽佛心分享-SideProject30 DAY 20

熟悉的網聊最對味？來做個匿名聊天室吧！系列第 20 篇

技術 [Day-20] 單元測試-後端篇：模組差異

做完 service 的測試後，接下來要對 model 與 socket 這些同樣重要的業務邏輯做測試，雖然測試的寫法很固定，但當中也會有和 service...

Shin ‧ 2025-09-21 ‧團隊火箭隊 v2025

0 Like 0 留言 58 瀏覽

鐵人賽佛心分享-SideProject30 DAY 19

熟悉的網聊最對味？來做個匿名聊天室吧！系列第 19 篇

技術 [Day-19] 單元測試-後端篇：起手式

不論是手動去操作產品，或是寫單元測試、腳本來測試，做出來的東西都需要被經過「驗證」，才算是做完了。在比較嚴格的委託中，乙方也會被要求專案必須通過一定程度的測試...

Shin ‧ 2025-09-20 ‧團隊火箭隊 v2025

0 Like 0 留言 226 瀏覽

鐵人賽 Modern Web DAY 25

要不要 Vue 點酷酷的元件？系列第 25 篇

技術 D25 - 固執的滑動條：單元測試

第一步來新增測試檔案。 src\components\slider-stubborn\slider-stubborn.spec.ts import { moun...

鱈魚 ‧ 2024-10-08 ‧團隊鐵齒不信寫不完

1 Like 0 留言 330 瀏覽

鐵人賽 Modern Web DAY 20

要不要 Vue 點酷酷的元件？系列第 20 篇

技術 D20 - 物理包裝器：單元測試

開始測試前，讓我們在元件中新增一些對外屬性，方便進行測試吧。( ´ ▽ ` )ﾉ src\components\wrapper-physics\wrapper-...

鱈魚 ‧ 2024-10-03 ‧團隊鐵齒不信寫不完

2 Like 0 留言 1629 瀏覽

鐵人賽 Modern Web DAY 15

要不要 Vue 點酷酷的元件？系列第 15 篇

技術 D15 - 拉炮：單元測試

開始測試前，讓我們在 defineExpose 追加資料，方便進行測試。 src\components\util-party-popper\util-party...

鱈魚 ‧ 2024-09-28 ‧團隊鐵齒不信寫不完

2 Like 0 留言 585 瀏覽

鐵人賽 Modern Web DAY 25

Vue 和 TypeScript 的最佳實踐：成為前端工程師的進階利器系列第 25 篇

技術 Day 25: 使用 Vitest 測試異步行為與 API 請求邏輯

簡介在現代 Vue.js 應用程序開發中，處理異步操作和 API 請求是常見且關鍵的任務。本文將深入探討如何使用 Vitest 來全面測試這些異步行為和 A...

MichaelHo ‧ 2024-10-09

1 Like 0 留言 439 瀏覽

鐵人賽 Modern Web DAY 10

要不要 Vue 點酷酷的元件？系列第 10 篇

技術 D10 - 逐字轉場：單元測試

開始單元測試前，先讓我們設定一下測試範圍，避免執行到 e2e 測試的部分。 vitest 可以和 vite 共用設定檔，所以我們在 vite 新增設定即可。 v...

鱈魚 ‧ 2024-09-23 ‧團隊鐵齒不信寫不完

1 Like 1 留言 444 瀏覽

鐵人賽 Modern Web DAY 6

要不要 Vue 點酷酷的元件？系列第 6 篇

技術 D06 - 調皮的按鈕：更多範例

元件測試完成後，讓我們新增更多範例吧！( ‧ω‧)ノ╰(‧ω‧ ) 新增範例與其使用大量文字描述參數用途，不如提供情境完整的範例，可以讓使用者有更具體的理解。...

鱈魚 ‧ 2024-09-19 ‧團隊鐵齒不信寫不完

1 Like 0 留言 446 瀏覽

鐵人賽 Modern Web DAY 5

要不要 Vue 點酷酷的元件？系列第 5 篇

技術 D05 - 調皮的按鈕：單元測試

現在讓我們對元件進行單元測試吧單元測試的原則為「把待測物當成黑盒子，專注於測試公開介面」，也就是說我們只會針對元件的 template、props、event...

鱈魚 ‧ 2024-09-18 ‧團隊鐵齒不信寫不完

4 Like 3 留言 1080 瀏覽

鐵人賽 Modern Web DAY 1

要不要 Vue 點酷酷的元件？系列第 1 篇

技術 D01 - 行前須知

緣起源自公司內部練習專案，靈感來自於以前看到一個名為「最糟糕音量控制設計大賽」的有趣比賽。簡單來說就是設計奇奇怪怪的元件。別看這些元件好像很沒用，實作起來...

鱈魚 ‧ 2024-09-14 ‧團隊鐵齒不信寫不完

2 Like 0 留言 1436 瀏覽

技術闡述單元測試、元件測試，並學習在自己的 Vue3 專案中加入 Vitest！

文章出處網站建置不是件簡單的事，我們都知道網站做好之後，有好多細節需要兼顧，所以許多公司花了大量的時間與金錢，耗用人力對維護中的網站進行不斷的、重複的人...

Wayne ‧ 2023-02-09

1 Like 3 留言 2091 瀏覽

鐵人賽 Modern Web

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 35 篇

技術【雜談ノ章】那些沒說到的內容、完賽感言、TOC 與參考資料們

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-20

1 Like 0 留言 2619 瀏覽

鐵人賽 Modern Web

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 34 篇

技術【進階ノ章】寫測試的最佳實踐（Testing Best Practice）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-19

1 Like 0 留言 9572 瀏覽

鐵人賽 Modern Web

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 33 篇

技術【進階ノ章】覆蓋率（Coverage）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-18

0 Like 0 留言 3007 瀏覽

鐵人賽 Modern Web

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 32 篇

技術【進階ノ章】Vitest UI

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-17

1 Like 0 留言 3019 瀏覽

鐵人賽 Modern Web

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 31 篇

技術【語法ノ章】Vue Ecosystem 篇：Pinia 測試

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-16

0 Like 0 留言 2553 瀏覽

鐵人賽 Modern Web DAY 30

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 30 篇

技術【語法ノ章】Vue Ecosystem 篇：Vue Router 測試

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-15

0 Like 0 留言 3218 瀏覽

鐵人賽 Modern Web DAY 30

分手前端菜雞之旅@非洲30天系列第 30 篇

技術測試自己寫，QA不用謝。Vue3 測試入門-D30

測試自己寫，QA不用謝單壓欸，我好棒。為什麼要測試測試可以幫我們衡量程式的質量、是不是能達到設計要求，幫我們進行評估。你總不會什麼東西寫完自己不檢查就送...

Global Rachel ‧ 2022-10-15 ‧團隊還不給我加薪

2 Like 0 留言 5063 瀏覽

鐵人賽 Modern Web DAY 29

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 29 篇

技術【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Function, Globals & Modules）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-14

2 Like 0 留言 2859 瀏覽

鐵人賽 Modern Web DAY 28

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 28 篇

技術【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Date, Timer）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-13

0 Like 0 留言 1792 瀏覽

鐵人賽 Modern Web DAY 27

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 27 篇

技術【語法ノ章】測試替身（Test Double）feat. Vue Test Utils

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-12

0 Like 1 留言 3149 瀏覽

鐵人賽 Modern Web DAY 26

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 26 篇

技術【概念ノ章】測試替身（Test Double）：Dummy, Stub, Spy, Fake & Mock

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-11

0 Like 0 留言 1110 瀏覽

鐵人賽 Modern Web DAY 25

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 25 篇

技術【試験ノ章】第二個測驗：容器（Wrapper）與容器方法（Wrapper methods）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-10

0 Like 0 留言 1384 瀏覽

鐵人賽 Modern Web DAY 24

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 24 篇

技術【語法ノ章】元件測試：模擬 Vue APIs（slots, custom directives）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-09

0 Like 0 留言 1810 瀏覽

鐵人賽 Modern Web DAY 23

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 23 篇

技術【語法ノ章】元件測試：模擬 Vue APIs（emit, provide/inject）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-08

0 Like 0 留言 1680 瀏覽

鐵人賽 Modern Web DAY 22

「你知道這是什麼嗎？」小白也能輕鬆瞭解的 Vue3 單元測試！Feat. Vitest + Vue Test Utils 系列第 22 篇

技術【語法ノ章】元件測試：模擬 Vue APIs（data, props）

本系列文已重新編排並新增內容出版成冊，若您喜歡透過書籍來閱讀的話，歡迎至天瓏書局下單選購唷！ ShawnL - Vue.js 3前端測試入門從這裡開始...

ShawnL ‧ 2022-10-07

技術 Day 21: 30天打造SaaS產品前端篇 - React Testing Library 與元件測試策略

技術 屋況驗收[ 2 / 2 ]：Vitest 覆蓋率 & 整合測試

技術 屋況驗收[ 1 / 2 ]：Vitest 初始化 & 單元測試

技術 [Day-21] 單元測試-前端篇

技術 [Day-20] 單元測試-後端篇：模組差異

技術 [Day-19] 單元測試-後端篇：起手式

技術 D25 - 固執的滑動條：單元測試

技術 D20 - 物理包裝器：單元測試

技術 D15 - 拉炮：單元測試

技術 Day 25: 使用 Vitest 測試異步行為與 API 請求邏輯

技術 D10 - 逐字轉場：單元測試

技術 D06 - 調皮的按鈕：更多範例

技術 D05 - 調皮的按鈕：單元測試

技術 D01 - 行前須知

技術 闡述單元測試、元件測試，並學習在自己的 Vue3 專案中加入 Vitest！

技術 【雜談ノ章】那些沒說到的內容、完賽感言、TOC 與參考資料們

技術 【進階ノ章】寫測試的最佳實踐（Testing Best Practice）

技術 【進階ノ章】覆蓋率（Coverage）

技術 【進階ノ章】Vitest UI

技術 【語法ノ章】Vue Ecosystem 篇：Pinia 測試

技術 【語法ノ章】Vue Ecosystem 篇：Vue Router 測試

技術 測試自己寫，QA不用謝。Vue3 測試入門-D30

技術 【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Function, Globals & Modules）

技術 【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Date, Timer）

技術 【語法ノ章】測試替身（Test Double）feat. Vue Test Utils

技術 【概念ノ章】測試替身（Test Double）：Dummy, Stub, Spy, Fake & Mock

技術 【試験ノ章】第二個測驗：容器（Wrapper）與容器方法（Wrapper methods）

技術 【語法ノ章】元件測試：模擬 Vue APIs（slots, custom directives）

技術 【語法ノ章】元件測試：模擬 Vue APIs（emit, provide/inject）

技術 【語法ノ章】元件測試：模擬 Vue APIs（data, props）

標記使用者

技術屋況驗收[ 2 / 2 ]：Vitest 覆蓋率 & 整合測試

技術屋況驗收[ 1 / 2 ]：Vitest 初始化 & 單元測試

技術闡述單元測試、元件測試，並學習在自己的 Vue3 專案中加入 Vitest！

技術【雜談ノ章】那些沒說到的內容、完賽感言、TOC 與參考資料們

技術【進階ノ章】寫測試的最佳實踐（Testing Best Practice）

技術【進階ノ章】覆蓋率（Coverage）

技術【進階ノ章】Vitest UI

技術【語法ノ章】Vue Ecosystem 篇：Pinia 測試

技術【語法ノ章】Vue Ecosystem 篇：Vue Router 測試

技術測試自己寫，QA不用謝。Vue3 測試入門-D30

技術【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Function, Globals & Modules）

技術【語法ノ章】測試替身（Test Double）feat. Vitest Mocking API（Date, Timer）

技術【語法ノ章】測試替身（Test Double）feat. Vue Test Utils

技術【概念ノ章】測試替身（Test Double）：Dummy, Stub, Spy, Fake & Mock

技術【試験ノ章】第二個測驗：容器（Wrapper）與容器方法（Wrapper methods）

技術【語法ノ章】元件測試：模擬 Vue APIs（slots, custom directives）

技術【語法ノ章】元件測試：模擬 Vue APIs（emit, provide/inject）

技術【語法ノ章】元件測試：模擬 Vue APIs（data, props）