大家好，我是 Kagol。

作為一名前端，在做業務開發的過程中，你是否曾經：

因為擔心上線之後出bug，而反覆手工驗證自己負責的模組
不敢修改現有的「屎山」（別人寫的或者是自己1年前寫的）程式碼，從而不斷地編寫if/else
發現業務中有很多重複的程式碼，每次一改好多地方都要改，但又不敢重構，擔心重構之後出bug
戰戰兢兢地修復一個陳年bug，就怕引起N個新bug

如果你中了以上任何一條，說明你現在缺乏安全感，你擔心、你害怕、你不敢、你戰戰兢兢、你如履薄冰。

每天寫程式碼都處在擔驚受怕當中，程式設計師的尊嚴何在！

程式設計師的安全感要自己給自己，是時候改變現狀了！

我們有很多方法可以給自己安全感，比如：

設定程式碼檢測工具 ESLint
安裝拼寫檢查外掛 Code Spell Checker
程式碼評審 Code Review
結對程式設計 Pair programming
編寫單元測試 Unit Test

本文主要給大家介紹如何在 Vue 專案中編寫單元測試。

1 搭環境

我們的單元測試環境基於 vitest + @vue/test-utils。

前提：你需要有一個 Vue 專案，沒有的話可以參考 Vite 官網進行建立。

第一步，在你的 Vue 專案中安裝必要的依賴包。

npm i -D vitest @vue/test-utils happy-dom @vitest/coverage-v8

在 vite.config.ts 檔案中增加以下設定。

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],

  // 新增
  test: {
    environment: 'happy-dom'
  }
})

在 package.json 檔案中增加相應的指令碼命令


  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    
    // 新增
    "test": "vitest"
  },

我們嘗試執行以下命令：

npm test

會發現控制檯會列印以下紀錄檔：

$ npm test

> [email protected] test
> vitest


 DEV  v0.33.0 /vue3-vite-demo

include: **/*.{test,spec}.?(c|m)[jt]s?(x)
exclude:  **/node_modules/**, **/dist/**, **/cypress/**, **/.{idea,git,cache,output,temp}/**, **/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*
watch exclude:  **/node_modules/**, **/dist/**

No test files found, exiting with code 1

意思是：沒有找到單元測試檔案。

除此之外，我們還能獲取一些額外的資訊，比如 include 表明了單元測試檔案的命令格式：

**/*.{test,spec}.?(c|m)[jt]s?(x)

我們在 src/components 目錄下建立一個 HelloWorld.spec.ts 檔案。

import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import HelloWorld from './HelloWorld.vue'

describe('測試 HelloWorld 元件', () => {

  it('測試基本功能', async () => {
    const wrapper = mount(HelloWorld)
    expect(wrapper.exists()).toBeTruthy()
  })
})

再次執行 npm test 命令

$ npm test

 ✓ src/components/HelloWorld.spec.ts (1)
   ✓ 測試 HelloWorld 元件 (1)
     ✓ 測試基本功能

 Test Files  1 passed (1)
      Tests  1 passed (1)
   Start at  23:34:49
   Duration  126ms

會提示：有一個單元測試用例通過。

這樣我們的 Vue 專案單元測試環境就搭建成功，並且完成了第一個 Vue 單元測試用例

前端Vuer，請收好這份《Vue元件單元測試》寶典，給自己多一些安全感

1 搭環境