Vitest

Vitest 測試框架使用指南

1. Vitest 說明

• Vitest 是一個快速且輕量的 JavaScript 測試框架，專為現代前端開發環境設計，特別是配合 Vue 3、React 等框架使用。它的設計理念是專注於性能和易用性，並且具有高度的並行測試執行能力。

• 主要特點：

  • 快速執行：使用 Vite 作為基礎，加速測試運行。
  • 開箱即用：自動識別測試環境，並支援 ES 模組。
  • 內建模擬 (mock)、間諜 (spy)、快照測試等功能，讓測試更加簡便。
  • 與 Vue 3、React 等框架兼容，並支持 TypeScript。

---

2. 簡單範例

// Counter.test.js
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import Counter from '../src/components/Counter.vue'

describe('Counter.vue', () => {
  it('初始顯示為 0', () => {
    const wrapper = mount(Counter)
    expect(wrapper.text()).toContain('Count is: 0')
  })

  it('點擊後應為 1', async () => {
    const wrapper = mount(Counter)
    await wrapper.find('button').trigger('click')
    expect(wrapper.text()).toContain('Count is: 1')
  })
})

• mount(Counter) : 就像在「測試環境中真的打開一個網頁，掛上一個 Vue 元件」，然後你可以對它做任何互動、驗證、模擬用戶行為。

• describe 的功能

describe 是用來將相關測試分組的工具 它的語法結構是：

describe('測試名稱', () => {
  // 一組測試邏輯，這裡面可以有多個測試（it）
})

• describe 不是「連續操作」，而是「測試區塊」

雖然 describe 包含了多個 it 測試，但是它本身並不是一個操作，它只是一個容器，用來組織和分隔測試。

每個 it 都是獨立執行的，並且會依照測試用例的描述來執行。

describe 定義測試區塊的範圍和上下文。

it 是具體的測試用例，裡面寫具體的測試邏輯。

• it 和 describe 之間的關係：

describe 是「一個大的測試套件」，將測試邏輯組織在一起。

it 則是「一個個具體的測試項目」，它用來測試某個特定功能或行為。