第一個 Vue3 元件測試從 Vitest + Vue Test Utils 開始

延續「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);
});

參考資料

• Vitest (hook & assertion...)
• Vue Test Utils

四、執行

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 上(專案)，可以點選下方連結了解執行的內容。

• Create vitest component testing
• Using Github Action workflow for testing