目錄

前言

我們平常寫完程式碼後，為了確認自己寫的無誤，以往都是打開網頁實際操作一遍畫面，確認無誤後就把功能直接上線。但這樣其實會有些問題：

1. 為了測試一個小功能，做了一大堆操作，浪費時間

   1. 例如明明只是想要測試「上傳文件」的功能，手動測試的話還得先登入帳號、進入上傳頁、選取要上傳的檔案……等實現多個步驟後才能測試完畢，多次下來感覺超麻煩。

2. 出現 Bug 了！但很難找 Bug 藏在哪

   1. 假如是「從前端測試 API 功能」，因為 Bug 可能出現在前端也有可能在後端，用這種方式找很難第一時間找到錯誤點

      async function httpGetPosts() {
      	const response = await axios.get('/posts')   // 如果發生 error 了，你有辦法第一時刻找出問題在前端還是後端嗎
      }
      

   2. 假如用 Postman 測試後端，這會把整個 method 跑過一遍，但你可能只想測其中一小段程式碼而已

      /*
       * 假如我們實作一個新增文章的功能
       */
      function insert(Request $request)
      {
      	# insert data into database
      	$data = $request->data;
      	$this->storeIntoDB($data);	
      
      	# store file in storage
      	$file = $request->file;
      	$this->storInfoFolder($file); // 例如我只是想測試這個函式是否有誤，跑完整個 method 不太實際
      
      	# update some state in other table
      	$user = $request->user();
      	$this->updateState($user);
      }
      

3. 我改了部份程式碼後，同樣會用到這段程式碼的舊碼突然就不能跑了！

   1. 例如在 UserController 跟 PostController 都有用到一個共用的 function：getDate()，你可能修改它之後導致其中一個 controller 壞掉，可是你沒發覺。

      // in UserController.php
      
      use App\\Services\\DateService;
      
      class UserController
      {
      		// 略...
      
       	  public function show()
      		{
      				$date = $this->DateService->getDate();
      
      				// 略...
      		}
      
      		// 略...
      }
      

      // in PostController.php
      
      use App\\Services\\DateService;
      
      class PostController
      {
      		// 略...
      
       	  public function allPosts()
      		{
      				$date = $this->DateService->getDate();
      
      				// 略...
      		}
      
      		// 略...
      }
      

為了解決上述的問題而開始有了應該要來寫測試碼的風氣。不過，什麼是測試？

測試

什麼是測試？

• 測試是一個概念，指我們透過寫一段「程式碼」來改進我們的程式碼。
• 沒錯！我們額外寫一份程式，來運行我們之前寫好的開發程式 (例如：Controller, View, Vue components 等等都可以測試)，確認程式有沒有出問題、結果符不符合預期，這就是測試！繞口吧！

測試是必要的嗎？

• 到目前為止你可能從沒寫過測試，但你的網站還是照常能跑，所以嚴格來說是不必要的。它只是協助我們開發的一個手段，不是構成你網站或應用程式的核心。

怎麼寫測試？

1. 不論是前端、後端、硬體、還是其他軟體測試，基本的核心觀念都是一樣的，只是前、後端畢竟負責不同工作，所以測試的項目會稍有不同。先理解基礎理論知識後，再來熟悉各種領域的測試需要達成什麼樣的工作。
2. 需要安裝好測試環境還有 Library
   1. 測試工具並不是內建的，必須先安裝套件，且不同語言還得安裝不同工具。
   2. 後端 — Laravel 是個例外，它已內建 PHPUnit 套件讓你可以測試 PHP，不需額外安裝任何東西；如果你的後端是用 Node.js ，就得安裝 JS 的測試套件。其他語言亦同。
   3. 前端 — 前端常見的測試工具有 Jest, Mocha, Vitest，這三者都是單純針對 JS function 的 unit test 工具。如果你有使用前端框架，還需額外安裝該框架的測試工具。
   4. 到底該裝哪些工具、該怎麼使用工具、範例程式碼等等，都會再下一節提供教學。