在深入技術前,可以先閱讀Vue官方的測試建議
以下,會介紹幾個在專案中撰寫測試搭配的套件及其初始範例,詳細寫法還請參考個別的官方文件。
jest 官方文件
Jest 是一個由Facebook 開發的 test runner,它提供許多豐富的功能,例如:斷言、分析測試涵蓋率、 mock 功能與良好的錯誤提示訊息等。
Jest 可以測試的範圍涵蓋了 JavaScript 相關的技術,包含後端的 Node.js 與前端的 Vue 、 Angular 或 React ,是個完善的測試框架。
Vue Test Utils 是Vue.js 官方所維護的單元測試套件,它提供了一系列的API 使我們很容易去操作存取元件
$ vue create vue-test -m npm
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Unit
? Choose a version of Vue.js that you want to start the project with 2.x
? Pick a unit testing solution: Jest
...
它會直接幫你建立測試的範例檔
運行後可以得到
$ npm run test:unit
$ vue add unit-jest
@/components/Counter.vue
<template>
<div>
<h1>Count: {{ count }}</h1>
<button id="increment-btn" @click="count++"> +1 </button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
}
},
}
</script>
會長得像這樣:
預期初始值會是0,點擊一下之後會變成1
tests/unit/counter.spec.js
import { mount } from '@vue/test-utils'
import Counter from '@/components/Counter.vue'
describe('Counter.vue', () => {
it('click once', async () => {
// 驗證初始值
const wrapper = mount(Counter)
expect(wrapper.vm.count).toBe(0)
// 獲取元件
const button = wrapper.find('button')
const h1 = wrapper.find('h1')
// 測試互動
await button.trigger('click')
expect(h1.text()).toContain('1')
})
})
基本上用 vue-create
建專案的話都會內建,沒有的話可以用下列指令安裝
$ npm install -D vitest
$ npm i @vitejs/plugin-vue
建立設定檔 vitest.config.ts
import { fileURLToPath, URL } from "node:url"
import { defineConfig } from "vite"
import type { UserConfig as VitestUserConfigInterface } from "vitest/config"
import vue from "@vitejs/plugin-vue"
const vitestConfig: VitestUserConfigInterface = {
test: {
globals: true,
environment: "jsdom", // 也可以用happy-dom之類的
},
}
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
test: vitestConfig.test,
})
配置 package.json
"scripts": {
"test": "vitest",
"coverage": "vitest --coverage" // 稍後覆蓋率會用到
},
配置方式參考
vue 官方建議
一篇來自 stackoverflow 的建議
要先安裝 Vue Test Utils
$ npm install @vue/test-utils --save-dev
建立基本測試,檔名須遵照 xxx.test.js
規則
code和上面jest的寫法一樣
@/tests/example.test.js
import { mount } from "@vue/test-utils";
import HelloWorld from "@/components/HelloWorld.vue";
import { describe, expect, test } from "vitest";
describe('HelloWorld.vue', () => {
test('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = mount(HelloWorld, {
propsData: { msg } // Mocking Props
})
expect(wrapper.text()).toMatch(msg)
})
})
運行測試,本指令會自動 watch
$ npm test
設定 vitest.config.ts
const vitestConfig: VitestUserConfigInterface = {
test: {
globals: true,
environment: "jsdom",
/* 新增以下設定 */
coverage:{
all: true,
provider: 'c8', // 也可以用istanbul
reporter: ['text', 'json', 'html'],
},
include: ['**/tests/*.js'], // 測試檔案路徑,也可以不設定預設抓所有
/* ---------- */
},
}
...
安裝覆蓋率套件
$ npm i -D @vitest/coverage-c8@{你的vitest版本號}
運行指令
$ npm run coverage
運行覆蓋率指令後,會自動生成 /converage
資料夾
打開html網頁後,可以查看詳細的報告
testing-library 官方文件
$ npm install --save-dev @testing-library/vue
vitest APIs
Jest 的指令基本上和 Vitest 是兼容的