寫Vue組件單元測試的關(guān)鍵是選對工具、掌握基本套路。 1. Vitest適合現(xiàn)代項目，速度快；Jest生態(tài)成熟，兼容性好。 2. 安裝配置Vitest需添加插件並設(shè)置腳本；Jest需創(chuàng)建配置文件並安裝相關(guān)依賴。 3. 編寫測試用例時使用mount模擬真實行為，注意異步操作要用await。 4. 測試時要mock外部依賴、處理異步渲染、避免過度測試樣式、拆分複雜邏輯。 5. 堅持每次修改後運(yùn)行測試可有效減少bug。

寫Vue 組件的單元測試其實並不難，關(guān)鍵是要選對工具、掌握基本套路。 Vitest 和Jest 都是主流選擇，用好了能幫你發(fā)現(xiàn)很多潛在問題，也能提升代碼質(zhì)量。

安裝配置Vitest 或Jest

先確定你要用哪個測試框架。 Vitest 是基於Vite 的，速度快，適合現(xiàn)代項目；Jest 更成熟，生態(tài)更豐富，兼容性更好。

Vitest：

1. 安裝依賴：

   

    npm install -D vitest @vitejs/plugin-vue vue-test-utils

2. 在vite.config.js中添加插件：

    import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [vue()]
   })

3. 添加script 到package.json ：

    "scripts": {
     "test:unit": "vitest"
   }

Jest：

1. 安裝依賴：

    npm install -D jest @vue/test-utils@next vue-jest babel-jest

2. 創(chuàng)建jest.config.js文件：

    module.exports = {
     testEnvironment: 'jsdom',
     transform: {
       '^. \\.vue$': 'vue-jest',
       '^. \\.js$': 'babel-jest'
     },
     moduleNameMapper: {
       &#39;^@/(.*)$&#39;: &#39;<rootDir>/src/$1&#39;
     }
   }

3. 添加script：

    "scripts": {
     "test:unit": "jest"
   }

編寫第一個組件測試

以一個簡單的按鈕組件為例：點擊後數(shù)字增加。

 <!-- CounterButton.vue -->
<template>
  <button @click="count ">Clicked {{ count }} times</button>
</template>

<script setup>
import { ref } from &#39;vue&#39;

const count = ref(0)
</script>

對應(yīng)的測試文件：

 // CounterButton.test.js
import { mount } from '@vue/test-utils'
import CounterButton from './CounterButton.vue'

test('increments count when clicked', async () => {
  const wrapper = mount(CounterButton)
  await wrapper.trigger('click')
  expect(wrapper.text()).toContain('Clicked 1 times')
})

幾點注意：

• 使用mount而不是shallowMount可以更真實地模擬行為。
• 異步操作要用await ，比如事件觸發(fā)、數(shù)據(jù)更新等。
• 不要只測渲染結(jié)果，也要覆蓋交互邏輯。

測試技巧與註意事項

• Mock 掉外部依賴：如果你的組件調(diào)用了API 或者使用了Vuex/Pinia，記得mock 掉這些部分，確保測試專注在組件本身。

  示例（mock axios）：

   jest.mock('axios', () => ({
    get: jest.fn(() => Promise.resolve({ data: 'mocked data' }))
  }))

• 處理異步渲染：Vue 更新DOM 是異步的，所以需要用await nextTick()或await flushPromises()來等待更新完成。

• 避免過度測試樣式：不要測試字體顏色或margin 這種容易變化的東西，重點測結(jié)構(gòu)和邏輯。

• 拆分複雜邏輯到可測試函數(shù)中：如果組件裡有很多業(yè)務(wù)邏輯，建議抽離成單獨函數(shù)，這樣更容易做單元測試。

---

基本上就這些。寫好Vue 組件的單元測試不復(fù)雜，但很容易忽略細(xì)節(jié)。只要堅持每次改完都跑一遍測試，就能大大減少bug 出現(xiàn)的概率。

以上是用vitest/jest的單位測試VUE組件的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！