L1：學習 Unit Test 的部分

這部分我是先跟著導師的直播影片來一邊操作一邊理解 Unit Test。先從碰到的問題開始，然後一步一步找線上資源來了解 npm、Jest。

先說實作遇到的問題：

狀況 1：跑 Unit Test 時，顯示 SecurityError 錯誤訊息

SecurityError: localStorage is not available for opaque origins

參考這則 issue 及 Stack Overflow 討論，大概得知要透過修改 Jest 的 configuration，添加一個 URL 來解決。

我採用直接在 package.json 裡添加：

{
  "jest": {
    "verbose": true,
    "testURL": "<http://localhost/>"
  }
}

結果：SecurityError 問題解決！

關於這個 error 的可能原因：這則 Bug Report 整理了簡要的敘述：與 JSDom 11.12 這個版本更新有關。

我對這則 Bug Report 的理解是：JSDom 11.12 支援了 window.localStorage 等其他功能。推測 Jest 採用了這個新版本，使得既有版本的預設 URL 造成錯誤。

狀況 2：跑 Unit Test 時，顯示 SyntaxError 錯誤訊息

SyntaxError: Unexpected token import

解決了上一個問題，Unit Test 又遇到了錯誤訊息。不過這個錯誤在課程教學影片中導師有提到，所以知道是 node.js 不認識 JavaScript ES6 的 export 和 import 造成的，所以要另外安裝 Babel 套件。

依照 Babel 官網的教學文件安裝，問題成功解決，Test 總算顯示 Pass 訊息！

學習補充相關的基礎觀念

查詢以上問題解法的同時，感受到自己其實缺乏許多概念，所以需要一面補足相關的觀念，例如：

了解 npm 是什麼？

套件管理工具。類似的還有：Yarn

透過這篇文章與這系列文章大致了解 npm 的運作及操作，例如：

為什麼下載套件後專案裡會產生一個 node_modules 資料夾。
開新專案後，下 npm init 指令，會產生 package.json檔案：用來記錄專案的資訊、裝過哪些套件等等。
因為 npm 會把套件載在每個專案下的 node_modules資料夾，.gitignore 裡會設定忽略不必要被 Git 記錄的 node_modules 資料夾。之前學 Git 看到的狀況題就更能理解了。

了解 Jest 是什麼？

Unit Test 框架。類似的還有：Mocha

關於 Unit Test 的作用？

教學影片裡提到 Unit Test 測試條件要一個一個寫出來測試，我其實有一些疑問，就是：如果條件沒寫好，或工程師自己沒發現漏寫了一些關鍵條件，測試豈不是沒有意義？

找到了一篇文章，簡單談 Unit Test 的優缺點與導入取捨，大概可以理解 Unit Test 的應用。我的疑問似乎也得到解答：所以 Unit Test 的 code 「品質」很重要。（我好像在說廢話…XD）

config 檔到底是什麼？

找問題解答跟參考套件的官方文件時，常常看到要去修改 config 檔，但是對 config 檔根本沒有概念。直到在這裡看到一些說明與句子：

Configure some options in the settings.

就可以心領神會 config 檔在做什麼了。

關於學習方式的想法

培養仔細閱讀官方文件的習慣：

不管是開始安裝前，或是查詢問題的時候，發現透過閱讀官方文件，可以獲得正確的方向與建議，也比較不容易出錯。

盡量不要閃避問題與試著補足概念。

雖然解決問題的過程寫起來很簡短，但是「理解問題」及「動手執行」的過程，需要依靠一些背景知識，否則完全沒有概念。因此背景知識不足，就要花時間去找資源來理解，結論就是要費好大一番功夫。雖然會花點時間，但是有些觀念若直接忽略，好像也不太行。這也是決定學習程式之前，就想過會面臨的學習情境。也就是「本科與非本科生」因有無受過理論基礎訓練所可能造成的情境差異。雖然不認爲這種差異會造成絕對的劣勢，只是在學習的過程大概要有隨時補概念或是自修理論的自覺。