大綱

一、前端為什麼需要寫測試？
二、寫測試對開發人員有哪些幫助？
三、筆者的學習地圖

一、前端為什麼需要寫測試？

筆者自首，過去我只撰寫後端測試，總是忽略前端測試的重要性。

當初會這樣，是因為經手的專案規格變動頻繁，感覺測試寫完沒多久就要棄用；但近期與業界的朋友聊天時，他們跟我強調了 TDD（Test-Driven Development），也就是「測試驅動開發」的概念。

這名詞也不是第一次聽到，但是否對專案有幫助我也是心存懷疑。

針對這個疑問，朋友很認真的回應我，這邊整理概要如下：

規格之所以會頻繁變更，大多數的原因是前期規劃不良所導致。

有些 PM 甚至沒有技術背景只能當傳聲筒，在這種前提下訂出的規格往往非常模糊。

而工程師面對這種模糊的規格，他有兩條路，一條路是不管那麼多，先開發再說，如果選擇這條路，那日後頻繁的遇到規格變更實屬正常。

而另一條路則是「確定規格後」再開發，我們常常把沒寫測試歸咎於專案時程太緊；但其實在專案完成後做 Review 時，發現很多時候都是在白忙一場。

所以如果能先把模糊的地方定義清楚，並將其納入測試程式，有時反而是在節省時間，要是日後規格有異動時，也方便確認哪一塊需要調整。

每個人學習新技術的理由不盡相同，但我就是在這次聊天後開始學習的。

其實有時候也不是沒時間，只是因為自己不熟悉測試程式，而用其他藉口逃避。

二、寫測試對開發人員有哪些幫助？

系統會越來越複雜，公司的同事會來來去去，不管是為了自己還是同事，有測試程式對我們最直接的幫助有：

• 減少人工測試：如果每次 release 新的版本就要全部手動測試一次，你絕對會崩潰。
• 減少測試上的遺漏：如果是人工測試，那就可能有「啊！這功能之前都沒問題，這次就不用測了」的想法，然後上線後就爆了；不過交給機器跑就不會有這個問題。
• 避免調整程式後，一堆功能壞掉而不自知：無論是重構程式/新增功能/解決 Bug，你勢必都會動到程式邏輯，很有可能你完成了新功能，但上線後才發現其他相依的功能壞掉了（程式也是有蝴蝶效應的）。
• 未來的同事（自己）會感謝你：專案可能上線後一兩年都沒事，但當需要新增/調整功能時，如果維護的人發現前人沒有測試程式，那改程式就跟走鋼索一樣（那個人很可能是自己）。

三、筆者的學習地圖

把知識集中在一篇文章會讀得太辛苦，這邊筆者將其規劃成以下主題供大家閱讀。

認識 Jest 測試框架，開始動手寫測試程式：link

• 初始化專案、設定測試環境
• 了解單元測試的結構，撰寫程式
• 了解 Jest 常用的匹配器（Matchers）

Jest 框架進階應用（describe、Setup and Teardown、Mock function）：link

• 測試分組（describe）
• 在測試前、後要執行的任務（Setup and Teardown）
• 用 Mock Function 減少測試時的相依性
• VSCode 的 Jest 外掛

在 Vuetify（Vite & TypeScript）中導入單元測試 Unit Testing：link

• 初始化專案、安裝必要套件
• 調整專案各項設定檔，讓單元測試可以運行
• 撰寫第一隻測試程式
• 運行測試程式確認結果符合預期

透過實際案例了解在 Vuetify（Vite & TypeScript）中如何運用 @vue/test-utils：link

• 從測試的角度來設計頁面規格（以登入頁為範例）
• 撰寫登入頁程式
• 從測試案例了解 @vue/test-utils 常用的功能（ex：getComponent、setValue、wrapper.vm、trigger button、Vue Router）

這邊文章會跟你分享 6 種 console.log 的進階應用，並說明各自的使用情境，讓你在開發的路上更加順利。

大家可以在瀏覽器按下「F12」，於 Console 的分頁貼上文中的程式碼來驗證喔！

大鋼
ㄧ、在 console.log 加入 {}，讓資訊顯示的更友善
二、原來 console.log 竟然可以使用 CSS Style !
三、console.log 寫太多找不到重點？你該試試看 console.warn()！
四、錯誤訊息請用 console.error()，不要用 console.log() 來整自己
五、用 console.time() 追蹤程式執行時間，找出效能瓶頸
六、用 console.table() 將資訊轉成表格來閱讀

ㄧ、在 console.log 加入 {}，讓資訊顯示的更友善

如果想要將變數的內容印出來，我們通常會這麼做：

const name = "Dean";
const book = "給全端工程師的職涯生存筆記";

console.log(name, book);

原始碼：console-basic.js（GitHub Gist）

但這種作法在變數很多的時候，你就會搞不清楚各自對應的關係了，比如：

const name = "Dean";
const book = "給全端工程師的職涯生存筆記";
const skill = "Full-Stack";
const type = "Career";

console.log(name, book, skill, type);

原始碼：console-complex.js（GitHub Gist）

有沒有覺得上面的資訊閱讀起來很不友善？其實我們只要在 console.log 中，把這些變數用 {} 包起來，它就會以物件的類型來顯示嚕！

const name = "Dean";
const book = "給全端工程師的職涯生存筆記";
const skill = "Full-Stack";
const type = "Career";

console.log({ name, book, skill, type });

原始碼：console-object.js（GitHub Gist）

二、原來 console.log 竟然可以使用 CSS Style !

如果你在 Facebook 的頁面按下「F12」，於 Console 的分頁中應該會看到如下警告：

當時我就很好奇這種特殊的 Style 是怎麼呈現的，後來發現只要在前面加上「%c」就可以了：

const text = "大寶寶";
const style = "color: blue;font-size:40px";

console.log(`使用 CSS Style %c${text}`, style);

原始碼：console-css.js（GitHub Gist）

三、console.log 寫太多找不到重點？你該試試看 console.warn()！

遇到 Bug 時，我們常常需要沿著線索下 console.log 找問題，但如果 console.log 寫太多，我們會無法找到哪個才是我們需要的資訊，下面就舉一個極端點的例子：

for (let i = 0; i < 30; i++) {
  if (i === 13) {
    console.log(`i ---: ${i}`);
  } else {
    console.log(`i -+-: ${i}`);
  }
}

原始碼：console-no-warn.js（GitHub Gist）

我相信大多數人第一眼是不會發現「i === 13」時印出的東西不同，但如果透過 console.warn() 來輔助就會一目瞭然：

for (let i = 0; i < 30; i++) {
  if (i === 13) {
    console.warn(`i ---: ${i}`);
  } else {
    console.log(`i -+-: ${i}`);
  }
}

原始碼：console-warn.js（GitHub Gist）

四、錯誤訊息請用 console.error()，不要用 console.log() 來整自己

筆者發現有些工程師在 try…catch 的撰寫上，是用 console.log() 來印錯誤訊息的 😅

這會導致錯誤訊息被其他 console.log() 的訊息淹沒，運氣不好就是系統出包後才發現，因此建議乖乖使用 console.error() 來印錯誤訊息，這樣自己比較方便 Debug。

try {
  // 直接拋錯誤訊息讓 catch 來接
  throw "Something went wrong.";
} catch (err) {
  console.error(err);
}

原始碼：console-error.js（GitHub Gist）

五、用 console.time() 追蹤程式執行時間，找出效能瓶頸

有時我們發現某些頁面跑的特別慢，為了確定問題到底出哪裡，「console.time() & console.timeEnd()」就是一個很好的方案：

console.time();

setTimeout(function () {
  console.timeEnd();
}, 2000);

原始碼：console-time.js（GitHub Gist）

但一個功能裡面可能用到多個 api，當你想釐清到底是哪個 api 效率有問題時，就可以給 console.time() 加上標記(flag)。

console.time("api-1");

setTimeout(function () {
  console.timeEnd("api-1");
}, 2000);

console.time("api-2");

setTimeout(function () {
  console.timeEnd("api-2");
}, 1000);

原始碼：console-time-multi.js（GitHub Gist）

六、用 console.table() 將資訊轉成表格來閱讀

Backend 很常回傳 Table 格式的資訊，如果我們使用 console.log() 直接將結果印出來，在需要比對資料的時候會不好閱讀：

const users = [
  {
    name: "Dean",
    email: "dean_lin@test.com",
    department: "Cloud",
    job_title: "Manager",
    age: 33,
    hire_date: "2016-06-06",
  },
  {
    name: "Ray",
    email: "ray_chen@test.com",
    department: "Cloud",
    job_title: "Engineer",
    age: 31,
    hire_date: "2019-06-06",
  },
  {
    name: "Davy",
    email: "davy_chang@test.com",
    department: "Cloud",
    job_title: "Designer",
    age: 35,
    hire_date: "2017-06-06",
  },
];

console.table(users);

原始碼：console-array.js（GitHub Gist）

在上圖中，我們可以看到如果想要知道個別 user 的詳細資訊，需要自己手動展開 object，不過如果我們將最後的 console.log(users); 改寫成 console.table(users);，資料就會像下圖一樣變成表格很好閱讀嚕！

希望這篇文章對 Frontend 開發人員有所幫助，透過 console.log 的靈活使用，資料就會更清晰、準確地呈現！

參考資源：It’s 2022, Please Don’t Just Use “console.log” Anymore

事前準備

1. 你有GCP的帳戶(沒有就直接去開一個)
2. 你有信用卡(因為GCP serverless服務一定要綁信用卡，就算你一塊錢都沒花，你還是得綁定)
3. 你會用git(如果不會你要抄襲前人的成果都很難)
4. 如果有mac電腦會是最棒的，因為作者的操作都是在mac的環境

文章目標

1. 根據官方文件建立Nuxt專案
2. 開啟GCP App Engine
3. 將Nuxt專案deploy到GCP

SETP 1/5 : 建立Nuxt專案

這裡是官方安裝說明文件，根據我的個人經驗，你每個禮拜都會得到不一樣的錯誤訊息(感覺他們工程師根本沒有qa就直接上正式版本了…)，以下為我操作的及遇到的錯誤及相關解決方案。

創建nuxt專案，project-name請自由發揮

$ yarn create nuxt-app <project-name>

接下來會問你一堆問題，根據我之後會撰寫的文章類型，你可以跟我做一樣的設定

只要你運氣夠差，你就會遇到這個錯誤：

throw new SAOError(`Failed to install ${packageName} in ${cwd}`)

別怕，仔細看錯誤訊息，你會發現是因為local端的node版本過低，最新的nuxt需要你的node版本保持在13.7以上，建議你可以使用nvm這個套件來做local端node的版本控制

調整完node版本後再下一樣建立nuxt的指令

$ yarn create nuxt-app <project-name>

這次就會通過嚕～接著下指令確認使否正常跑

cd nuxt_baobao
yarn dev

如果成功出現下面的畫面就恭喜你嚕～

SETP 2/5 : 將nuxt專案build起來

因為實際運行你總不可能把整個專案丟到GCP，所以要下指令build這個專案，那他變小一點

yarn build

如果沒發生意外應該會build失敗(我真的懷疑他們到底有沒有做過上線測試…)

因為很多人遇到這個問題，有興趣可以參考這篇文章，不然就複製下面指令執行

nvm use 14.4
yarn add autoprefixer@9.8.1

安裝完套件再下一次yarn build指令就能順利完成

SETP 3/5 : 開啟GCP App Engine

我建議你先建立一個GCP新的專案來做這次的操作，建立好專案去App Engine建立應用程式

SETP 4/5 : 下載Google Cloud SDK

如果你可以根據官方文件操作，裡面有提供各式各樣的安裝方法，一開始我是直接下載壓縮檔來安裝，但遇到各種悲劇…

Welcome to the Google Cloud SDK!
ERROR:root:code for hash md5 was not found.

然後網路上你查到大部分的答案都是唬爛你的

所以我個人建議你使用homebrew安裝吧

brew cask install google-cloud-sdk

安裝後你可以嘗試看看

gcloud init

如果不發生意外應該又是一大串的錯誤…這個時候的問題通常是python版本的問題，請指定你執行gcp的python版本

export CLOUDSDK_PYTHON=python3

之後再執行gcloud init應該就是一路通暢了，裡面會有一些讓你登入以及選擇專案的選項就按造個人需求調整即可

SETP 5/5 : deploy Nuxt專案到GCP App Engine

如果你上面的操作都很順利，你接下來就可以嘗試把本地的nuxt專案發布到GCP上面了，首先你要在nuxt專案做以下調整，這裡是官方文件(跟著照做會錯誤)：

新增app.yaml檔案，這個檔案是在deploy的時候使用的

PS.在這裡我要特別提醒一件事情，一但你的環境(env)設定為flex，你醒來的時候帳單就有可能爆掉，所以這個部分請謹慎，這是我端午連假完打開GCP帳單發現的慘痛經驗，使用標準環境才會有免費配額，但還是會扣一點費用(ex: Google Storage、Could Build…)。

runtime: nodejs12

instance_class: F1

automatic_scaling:
  max_instances: 1

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

env_variables:
  HOST: '0.0.0.0'
  NODE_ENV: 'production'

原始碼：nuxt_baobao_app.yaml（GitHub Gist）

調整package.json檔案，要在dependencies加上“@nuxtjs/vuetify”，並加上這個專案nodejs的版本(本範例為14.4)

{
  "name": "nuxt_baobao",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "export": "nuxt export",
    "serve": "nuxt serve",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "yarn lint:js"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.11.0",
    "@nuxtjs/vuetify": "^1.11.2",
    "autoprefixer": "9.8.1",
    "chart.js": "^2.9.3",
    "hchs-vue-charts": "^1.2.8",
    "nuxt": "^2.13.0",
    "vue-chartjs": "^3.5.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/vuetify": "^1.11.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.2.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "prettier": "^2.0.5"
  },
  "engines": {
    "node": "^12"
  }
}

原始碼：nuxt_baobao_package.json（GitHub Gist）

完成以上設定後在專案目錄下指令

gcloud init

這裡會讓你再次確認自己的設定檔(是否初始化、新增)，登入的google帳號，選擇雲端專案(就是你剛剛新增的那個專案)

在完成上述設定後就可以輸入以下指令來deploy啦(這裡會讓你在確認一下deploy發布的專案位置)

gcloud app deploy

如果你看到以下畫面就要恭喜你了

輸入下面指令可以檢視你的網頁是否發布成功嚕～

gcloud app browse

如果有問題歡迎在下方回覆，如果這篇文章有讓你少走彎路請用力拍手喔～