本文序

經過昨天的練習後，我們現在已經可以對一些透過預設匯出（default export）或具名匯出（named export）的函式、方法或類別等等邏輯進行單元測試了。

接著，若我們想進一步在專案中測試 Vue 元件的話，我們除了基於前面的概念與語法之外，還得依靠能夠幫助能夠解析 Vue 元件並與其模擬互動的工具：

• Vue Test Utils
• Cypress
• Vue Testing Library

而本系列文將著重在介紹要怎麼透過 Vue Test Utils 來進行與 Vue 元件有關的「元件測試」，因此本文要來介紹一下 Vue Test Utils 與元件測試是在做什麼，又這又跟單元測試有什麼關係呢。

本文序

回顧目前語法章節的部分我們已經學了有關於：

• 測試案例與情境：describe、it
• 測試案例中 Setup 與 Teardown 環節有關的語法： beforeEach、beforeAll、afterEach 與 beforeAll
• 測試斷言中的各種 Matchers 與快照

而基於上述幾個語法加上先前的測試概念，我們已經滿足了撰寫基本單元測試的條件了！所以現在是⋯⋯測驗時間！！！

在測驗章節我們主要流程將會是：

• 閱讀故事與題目，釐清需求與規則。
• 規劃測試情境與測試案例，並列好描述的部分。
• 撰寫測試程式碼（Testing Code），並執行測試時得到測試案例失敗。
• 按照題目要求完成產品程式碼（Production Code）
• 再次執行測試確保測試通過。

而本文撰寫測試程式碼與產品程式碼的環節我也會提供 demo 的範例供參考與撰寫思路，那麼就讓我們開始吧！

本文序

昨天有關斷言（Assertion）的部分我們已經瞭解到「斷言風格」（Assertion Style）在寫法上有非常大的差異，並且也從裡頭選擇介紹了 Jest 的斷言 expect 相關的 Matcher：

• 常用：toBe, not
• 純值比對（Primitive）類型: String, Number, Boolean…, etc.
• 陣列比對與檢查
• 物件比對與檢查

而剩下還沒介紹到的 Matcher ，每個部分除了語法本身之外，都有一些值得一提的地方，因此特地拆成另一篇來介紹他們有哪些不同之處！

本文序

斷言（Assertion）在程式設計領域中主要指的是「針對一個結果指出為真（true）或假（false）」的邏輯判斷式。

而在測試中斷言主要指的部分如先前提到的 3A 模式中的（Assert）步驟：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

describe('', () => {
    it('', () => {
      // 準備：Arrange
      const wrapper = mount(component, {
        props: {
            content: 'Hello, Unit-test!'
        }
      })
      // 操作：Act
      wrapper.find('[data-test="button"]').click()
      // 斷言：Assert
      expect(wrapper.find('[data-test="content"]')).toBe('Hello, Unit-test!')
    })
})

其中斷言（Assert）階段中在語法的部分則會使用到所謂的「Matchers」，以上方程式碼為例的話就會是 expect() 後方的 toBe() 這個語法，而不同的「Matchers」能比對的東西也不太一樣，瞭解什麼時候該選什麼 Matchers 基本上寫斷言的時候就能信手捻來。

準備（Setup）與清理（Teardown）

經過了基本的測試情境與測試案例語法，加上簡單的斷言語法 expect().toBe() 就能夠測試許多簡單的東西了，然而在測試過程中有時會遇到大量重複的「前置操作」或是每次測試後「需要清理測試中的環境」，這時我們可以透過 Vitest 提供的 Setup & Teardown API 來處理：

本文序

本文可利用系列文專用專案來一邊學習，快來安裝吧！

今天要進入測試程式碼語法的第一篇哩，接下來每天語法章節都會出個一題來讓大家練習，若還沒安裝專案的快去安裝！！！

本文序

回顧目前我們經歷過的測試脈絡章節，我們一路上談到了：

1. 根據測試金字塔模型思考測試類型
2. 根據測試類型透過需求表單選擇好測試工具
3. 瞭解測試情境與測試案例的結構思維
4. 瞭解測試案例內部應有的架構

為什麼要大費周章提測試脈絡呢？

主要是單純的學習測試程式碼只會讓你學到如何用測試程式碼來測試你的實作，但是有脈絡的學習測試將概念與語法抽離開來，才不會在撰寫測試遇到各種心境上的阻礙，所以我們要先排除心魔，確認測試是對我們有益的，那麼接下來就能放心的學習測試語法了。

而今天要來談談最後一部分，那就是關於撰寫測試程式碼前須知的基本觀念！

本文序

接續昨天的測試情境與測試案例章節後，我們大致上瞭解了測試情境與測試案例的基本架構要如何設立，而今天要提的部分則是關於測試案例執行流程與測試案例撰寫架構。

本文序

經過測試金字塔模型的協助後，我們大致上瞭解要怎麼替專案加入對應的測試類型；並且在上一章節中我們也提到了針對「單元測試」類型做測試工具挑選時，可以從需求表中拉出各種工具做比較。

而接下來我們要談談在選擇這些工具後，我們要如何來思考針對「單元測試」的部分，測試情境與測試案例要怎麼撰寫以及需要注意的地方。

本文序

正所謂「工欲善其事必先利其器」，決定好專案中要運用哪些測試類型後，接下來就要挑選合適的測試工具來輔助我們執行測試的內容。