📄️ [Day01] 寫測試好無聊，可以不要寫測試嗎？
：「這個功能我測試過了，怎麼又壞了？」
📄️ [Day 02] 為什麼要寫測試？有哪些測試？
為什麼要寫測試？
📄️ [Day 03] JavaScript 測試框架介紹 & Jest 基本語法
前面講了為什麼要寫測試，再來要來介紹 JavaScript 有哪些常用的測試框架。
📄️ [Day 04] Jest 進階模擬語法
上一篇介紹了 Jest 的基本語法，接下來要來介紹 Jest 的進階模擬語法。
📄️ [Day 05] React 測試安裝介紹 ( CRA / Vite / Next.js )
前幾篇介紹完 JavaScript 的測試框架，今天要來介紹 React 測試安裝。我會以目前最常用的 React 開發工具 CRA、Vite 及 Next.js 來介紹。
📄️ [Day 06] React Testing Library 語法介紹
前面提到 Jest 本身有提供很多測試方法，但在測試上都比較偏向邏輯測試，像是 a + b 是否等於 c。而實際上我們所需要的測試有一大部分也包含 UI 的測試，像是畫面上有沒顯示正確文字，或是使用者點擊有沒有跳出視窗等等，這時候就需要使用 Testing Library 。
📄️ [Day 07] 寫測試 AI 工具推薦
介紹完基本的測試後，終於到了主題的 AI 部分，現在 AI 工具有如雨後春筍般，每天都有新的工具，真的要講的話有太多可以介紹了，所以我會就我常用的 AI 工具來做介紹。
📄️ [Day 08] React + Jest 表單驗證測試
從這篇開始我會使用 Vite + React + Jest + Testing Library 來做各個項目測試，而實作的部分就不會詳細說明只會大概講解流程，主要會著重在如何寫測試。那所有項目的程式碼都會放在 Practice Test，想要看各個項目可以切換 branch 來看。
📄️ [Day 09] React + Jest 表單驗證測試 (AI)
上一篇講了怎麼使用 Jest + Testing Library 來測試表單驗證，這一篇要來讓 AI 來幫我們寫測試吧！
📄️ [Day 10] React + Jest 路徑測試
這一篇要來介紹怎麼使用 Jest + Testing Library 來測試路徑，我是使用 React Router 來做路徑管理。
📄️ [Day 11] React + Jest 路徑測試 (AI)
在使用 copilot chat 產出路徑測試時，比起跟他詳細說明你要的測試條件，像是使用 jest.mock 模擬元件回傳，或是使用 history 套件模擬路由行為等等，我這邊提供一個更好的方法，讓 copilot chat 可以完美的達成你的需求。
📄️ [Day 12] React + Jest 彈窗測試
在專案中幾乎都會有彈窗的功能，我這邊使用 react-modal 來實作彈窗，並且使用 useContext 來管理彈窗的狀態，所以這邊分成兩個部分來測試，一個是 ModalPage 頁面開啟 Modal，以及 Modal 元件關閉的測試。
📄️ [Day 13] React + Jest 彈窗測試 (AI)
copilot chat 的部分一樣依照兩個檔案分別做測試
📄️ [Day 14] React + Jest API 測試
這邊我串接 https://jsonplaceholder.typicode.com/ API 來做測試，並且使用 @tanstack/react-query
📄️ [Day 15] React + Jest API 測試 (AI)
使用 copilot chat 基本上只要下 /tests 就可以產出完整的 API 測試。
📄️ [Day 16] MSW 介紹
前面兩篇介紹了 API 的測試方法，不過可以發現在測試上，會需要自己模擬回傳的測試資料，假設前端在開發時，還有另外建立一個 mock server 來進行開發，就會變成需要建立兩份假資料，一個是給 mock server 用的，一個是給測試用的，這樣就會非常的耗時，而且一旦資料有變動，就需要同步更新兩份資料，這樣在維護上就會方長不方便。
📄️ [Day 17] React + Jest API (MSW) 測試
上篇講了如何在開發上導入 MSW，這篇要來介紹如何在測試上使用 MSW。
📄️ [Day 18] React + Jest API (MSW) 測試 (AI)
雖然在上一篇提到使用 MSW 能幫助我們寫測試更方便，不過在使用 copilot chat 時，反而是一個阻礙，因為 copilot chat 本來就會自動給你他模擬的資料，現在變成需要跟他說模擬的資料在哪。
📄️ [Day 19] React + Jest Redux Toolkit 測試
這一篇的測試比較偏專屬 React 的 Redux Toolkit 測試，如果沒有使用 Redux 的話，可以跳過這一篇～
📄️ [Day 20] React + Jest Redux Toolkit 測試 (AI)
在使用 copilot chat 做 Redux Toolkit 測試時，因為基本上都把邏輯跟 UI 分開，所以在測試時，就不需要多提供資訊，就可能得到完整且正確的測試程式碼。
📄️ [Day 21] React + Jest Redux Toolkit Query 測試
在 Day14 有提到串接 API 使用 @tanstack/react-query 來管理狀態，而在 redux toolkit 也有提供 redux toolkit query 來管理狀態，這邊就來看一下如何使用 redux toolkit query 來測試。
📄️ [Day 22] React + Jest Redux Toolkit Query 測試 (AI)
因為 RTK Query 在結構上就比較複雜，在進行 copilot chat 測試的時候，會需要手動修改很多地方。
📄️ [Day 23] E2E 測試套件 Cypress 介紹
單元測試的測試功能都介紹了差不多了，其實到後來可以發現，基本上單元測試能測的都大同小異，就是一些寫法跟語法的不同而已，介紹完了單元測試，我們來看看要怎麼撰寫端對端 (End-to-end) 的測試吧！
📄️ [Day 24] React + Cypress 測試
這一篇來把之前寫的程式碼挑選 itemListPage 跟 formPage 來使用 Cypress 寫測試，並且順便介紹一些基本的語法。
📄️ [Day 25] React + Cypress 測試 (AI)
上一篇介紹了 Cypress 的基本用法，跟一些實際的測試流程，這篇來試著用 Copilot chat 來幫我們寫測試吧！
📄️ [Day 26] Copilot Chat 測試心得
從 Day08 到 Day25 實作結束，我們測試了很多在開發上會使用到的功能，並在每一項的功能測試都導入 Copilot Chat 來幫我們產生測試，這一篇就來整理這個系列的實作，以及我在使用上的一些心得。
📄️ [Day 27] 嫌 Jest 太慢？來看看 SWC 跟 Vitest 吧！
在我們前面在實作測試的時候，不知道大家有沒有覺得 Jest 跑測試好像有點慢欸～雖然公認 Jest 跑測試的速度比 Mocha 跟 Karma 還要快，但是在跑 React 測試的時候，還是會覺得有點慢，尤其是在你的專案越大的時候，測試的時間就會越長，那有沒有什麼方法可以讓測試的速度變快一點呢？
📄️ [Day 28] 測試守則：如何讓測試更有規範
本系列逐漸來到尾聲～測試也介紹了差不多了，這一篇來談談在寫測試的時候應該要注意的事情，以下都是我個人的經驗，大家可以參考看看～
📄️ [Day 29] 測試搭配 CI/CD 更自動！
在我們前面的實作測試時，都是手動的下指令去跑測試，但是如果忘記去跑測試，那我們寫出來的測試都是白費工，所以接下來就是要試著將測試整合到 CI/CD 流程中，讓測試更加自動化！
📄️ [Day 30] 完賽心得
終於來到最後一天了！！我們從為什麼要寫測試，到測試語法的介紹，以及本系列的主題 「React 測試 x AI：探索測試新境界，測試不再枯燥乏味！」，引入了 copilot chat 來為我們撰寫測試，並且實作了各個常見的項目測試，也示範了使用 AI 寫測試的優缺點，最後介紹了我在寫測試時的一些心得，希望大家都能夠從這系列中有所收穫！