30 篇文件帶有標籤「IT Home 2023」

雖然在上一篇提到使用 MSW 能幫助我們寫測試更方便，不過在使用 copilot chat 時，反而是一個阻礙，因為 copilot chat 本來就會自動給你他模擬的資料，現在變成需要跟他說模擬的資料在哪。

因為 RTK Query 在結構上就比較複雜，在進行 copilot chat 測試的時候，會需要手動修改很多地方。

終於來到最後一天了！！我們從為什麼要寫測試，到測試語法的介紹，以及本系列的主題 「React 測試 x AI：探索測試新境界，測試不再枯燥乏味！」，引入了 copilot chat 來為我們撰寫測試，並且實作了各個常見的項目測試，也示範了使用 AI 寫測試的優缺點，最後介紹了我在寫測試時的一些心得，希望大家都能夠從這系列中有所收穫！

為什麼要寫測試？

前面講了為什麼要寫測試，再來要來介紹 JavaScript 有哪些常用的測試框架。

上一篇介紹了 Jest 的基本語法，接下來要來介紹 Jest 的進階模擬語法。

前幾篇介紹完 JavaScript 的測試框架，今天要來介紹 React 測試安裝。我會以目前最常用的 React 開發工具 CRA、Vite 及 Next.js 來介紹。

前面提到 Jest 本身有提供很多測試方法，但在測試上都比較偏向邏輯測試，像是 a + b 是否等於 c。而實際上我們所需要的測試有一大部分也包含 UI 的測試，像是畫面上有沒顯示正確文字，或是使用者點擊有沒有跳出視窗等等，這時候就需要使用 Testing Library 。

介紹完基本的測試後，終於到了主題的 AI 部分，現在 AI 工具有如雨後春筍般，每天都有新的工具，真的要講的話有太多可以介紹了，所以我會就我常用的 AI 工具來做介紹。

從這篇開始我會使用 Vite + React + Jest + Testing Library 來做各個項目測試，而實作的部分就不會詳細說明只會大概講解流程，主要會著重在如何寫測試。那所有項目的程式碼都會放在 Practice Test，想要看各個項目可以切換 branch 來看。

上一篇講了怎麼使用 Jest + Testing Library 來測試表單驗證，這一篇要來讓 AI 來幫我們寫測試吧！

這一篇要來介紹怎麼使用 Jest + Testing Library 來測試路徑，我是使用 React Router 來做路徑管理。

在使用 copilot chat 產出路徑測試時，比起跟他詳細說明你要的測試條件，像是使用 jest.mock 模擬元件回傳，或是使用 history 套件模擬路由行為等等，我這邊提供一個更好的方法，讓 copilot chat 可以完美的達成你的需求。

在專案中幾乎都會有彈窗的功能，我這邊使用 react-modal 來實作彈窗，並且使用 useContext 來管理彈窗的狀態，所以這邊分成兩個部分來測試，一個是 ModalPage 頁面開啟 Modal，以及 Modal 元件關閉的測試。

copilot chat 的部分一樣依照兩個檔案分別做測試

這邊我串接 https://jsonplaceholder.typicode.com/ API 來做測試，並且使用 @tanstack/react-query

使用 copilot chat 基本上只要下 /tests 就可以產出完整的 API 測試。

前面兩篇介紹了 API 的測試方法，不過可以發現在測試上，會需要自己模擬回傳的測試資料，假設前端在開發時，還有另外建立一個 mock server 來進行開發，就會變成需要建立兩份假資料，一個是給 mock server 用的，一個是給測試用的，這樣就會非常的耗時，而且一旦資料有變動，就需要同步更新兩份資料，這樣在維護上就會方長不方便。

上篇講了如何在開發上導入 MSW，這篇要來介紹如何在測試上使用 MSW。

這一篇的測試比較偏專屬 React 的 Redux Toolkit 測試，如果沒有使用 Redux 的話，可以跳過這一篇～

在使用 copilot chat 做 Redux Toolkit 測試時，因為基本上都把邏輯跟 UI 分開，所以在測試時，就不需要多提供資訊，就可能得到完整且正確的測試程式碼。

在 Day14 有提到串接 API 使用 @tanstack/react-query 來管理狀態，而在 redux toolkit 也有提供 redux toolkit query 來管理狀態，這邊就來看一下如何使用 redux toolkit query 來測試。

單元測試的測試功能都介紹了差不多了，其實到後來可以發現，基本上單元測試能測的都大同小異，就是一些寫法跟語法的不同而已，介紹完了單元測試，我們來看看要怎麼撰寫端對端 (End-to-end) 的測試吧！

這一篇來把之前寫的程式碼挑選 itemListPage 跟 formPage 來使用 Cypress 寫測試，並且順便介紹一些基本的語法。

上一篇介紹了 Cypress 的基本用法，跟一些實際的測試流程，這篇來試著用 Copilot chat 來幫我們寫測試吧！

從 Day08 到 Day25 實作結束，我們測試了很多在開發上會使用到的功能，並在每一項的功能測試都導入 Copilot Chat 來幫我們產生測試，這一篇就來整理這個系列的實作，以及我在使用上的一些心得。

在我們前面在實作測試的時候，不知道大家有沒有覺得 Jest 跑測試好像有點慢欸～雖然公認 Jest 跑測試的速度比 Mocha 跟 Karma 還要快，但是在跑 React 測試的時候，還是會覺得有點慢，尤其是在你的專案越大的時候，測試的時間就會越長，那有沒有什麼方法可以讓測試的速度變快一點呢？

本系列逐漸來到尾聲～測試也介紹了差不多了，這一篇來談談在寫測試的時候應該要注意的事情，以下都是我個人的經驗，大家可以參考看看～

在我們前面的實作測試時，都是手動的下指令去跑測試，但是如果忘記去跑測試，那我們寫出來的測試都是白費工，所以接下來就是要試著將測試整合到 CI/CD 流程中，讓測試更加自動化！

：「這個功能我測試過了，怎麼又壞了？」