延續「mocha + webpack 的 Vue3 元件單元測試」，既然使用 mocha 測試太卡關，這次安裝 Vitest 來試試看！
一、安裝
先安裝 Vitest，另外 Vitest 需要使用 Node >=v14，並安裝 Vite >=v3.0.0，還有 vue3 對應的測試套件
npm install --save-dev vite vitest @vue/test-utils @vitejs/plugin-vue
下面這幾個根據需求來選擇是否安裝
npm install --save-dev jsdom
提供UI介面，可參考 Test UI
npm install --save-dev @vitest/ui
二、設定
先到package.json設定npm指令
"scripts": {
"test": "npx vitest",
}
在根目錄新增檔案 vitest.config.js
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
Vue(),
],
test: {
globals: true,
environment: 'jsdom',
},
});
常用的設定像是include指定測試檔案的目錄或名稱等，和exclude排除檔案
export default defineConfig({
test: {
include: ['**/*.test.js'],
exclude: ['**/node_modules/**'],
},
});
設定路徑的alias
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src/'),
},
},
});
或者可以設定 css和setupFiles來套用css style
export default defineConfig({
test: {
css: true,
setupFiles: './src/vitest/setup.js',
},
});
由 src/vitest/setup.js import css
// src/vitest/setup.js import 'todomvc-app-css/index.css'; import 'todomvc-common/base.css';
其他設定可以參考官方文件
完成基本設定後，就可以開始寫測試囉！
三、測試
針對現有的元件 TodoListEditor 撰寫測試
import { mount } from '@vue/test-utils';
import { test, expect } from 'vitest';
import TodoListEditor from 'components/TodoListEditor.vue';
test('TodoListEditor', () => {
expect(TodoListEditor).toBeTruthy()
const wrapper = mount(TodoListEditor, {
props: {
todoList,
},
});
expect(wrapper.vm.todoList).toStrictEqual(todoList);
expect(wrapper.props('todoList')).toStrictEqual(todoList);
});
參考資料
四、執行
npm run test
執行後就可以看到所有的測試項目及結果，若有錯誤也會對應的訊息顯示
有安裝@vitest/ui，可以開啟ui試試看
npm run test -- --ui
五、CI/CD
有了測試之後，我們利用 github action 設定每次 push 分支時，執行 vitest 的測試，請新增檔案 .github/workflows/test.yml
name: Test
on:
push:
branches: main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Before srcipt
run: npm install
- name: Test
run: npm run test -- --run
.github/workflows/gh-pages.yml內的設定：
on:
workflow_run:
workflows: ["Test"]
types:
- completed
jobs:
build:
if: ${{ github.event.workflow_run.conclusion == 'success' }}
runs-on: ubuntu-latest
steps:
....
我們的目標是當 Test 成功時，才會執行部屬，否則忽略。請注意 completed 指的是完成時，無論測試結果成功與否都會觸發。因此 if: ${{ github.event.workflow_run.conclusion == 'success' }} 的設定是必要的。
也可變化成 ${{ github.event.workflow_run.conclusion == 'failure' }}，當測試結果失敗時可以發送通知，根據應用情境改寫。
workflows可以設定多項，只要有任何一項執行就會觸發。
安裝 Vitest 來進行 Vue3 測試十分容易。語法跟 jest 很相像，甚至原本的 mocha 寫的測試也一行都沒改，都能夠支援測試。以上的內容有上傳到 github 上(專案)，可以點選下方連結了解執行的內容。
