vue3 vue-test-utils 安裝環境建置紀錄

Vue Test Utils 主要是作為提供測試 Vue 元件的相關工具集，讓我們能更輕易的模擬操作元件來進行測試，但本身並沒有運行測試環境（test runner）的功能。

所以還需要安裝 Jest 測試框架及其他相關套件來撰寫的單元測試。

Jest 是一個流行的 JavaScript 測試框架。

安裝 @vue/test-utils

npm install --save-dev @vue/test-utils

安裝 jest 及 babel-jest

npm install --save-dev jest@27 babel-jest@27

babel-jest 是一個 Jest 插件，它允許 Jest 在運行 JavaScript 測試代碼之前，先通過 Babel 進行轉譯。

安裝vue3-jest （Jest transformer for Vue Single File Components.）

npm install --save-dev vue3-jest@27

vue3-jest 是一個 Jest 轉換器，專為 Vue 3 組件設計。它允許 Jest 在運行測試之前，將 Vue 3 組件的 .vue 文件轉換為 JavaScript 代碼。

在你的測試中，當你嘗試導入一個 .vue 文件時，Jest 並不知道如何處理這種類型的文件。這是因為 .vue 文件是一種特殊的文件類型，它包含了模板、腳本和樣式三個部分，並且需要特殊的處理方式。

vue3-jest 插件會告訴 Jest 如何處理 .vue 文件。它會將 .vue 文件轉換為 JavaScript 代碼，這樣 Jest 就可以正常運行測試了。

安裝 jest-environment-jsdom@27

npm install --save-dev jest-environment-jsdom@27

jest-environment-jsdom 是一個提供 JSDOM 測試環境的 Jest 插件。JSDOM 是一個在 Node.js 中模擬瀏覽器環境的 JavaScript 實現，它可以讓你在 Node.js 環境中使用像 document 或 window 這樣的瀏覽器 API。

當你在測試中需要使用 DOM 或者瀏覽器 API（例如，當你在測試一個 React 或 Vue 組件時），你就需要一個 DOM 環境。jest-environment-jsdom 插件就是為此目的提供的。

jest 、 babel-jest、 vue3-jest 版本最好一致

安裝@babel/preset-env

npm install --save-dev @babel/preset-env

@babel/preset-env 會根據你的目標環境自動決定需要轉換哪些語法特性。

運行 Jest 測試時，Jest 會使用 Babel 來轉換你的測試代碼。如果你的測試代碼中使用了最新的 JavaScript 語法，而你的運行環境不支援這些語法，那麼你的測試就會失敗。@babel/preset-env 可以自動檢測你的目標環境並轉換需要轉換的語法特性，這樣你就可以在你的測試代碼中自由地使用最新的 JavaScript 語法了

新增或調整 babel.config.cjs 設定檔

/* eslint-disable */

module.exports = api => {
  return {
    presets: [
      ["@babel/preset-env"],
    ]
  }
}

新增 jest.config.js 設定檔

module.exports = {
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.vue$': 'vue3-jest',
    '^.+\\js$': 'babel-jest',
  },
  moduleFileExtensions: ['vue', 'js', 'json', 'jsx', 'ts', 'tsx', 'node'],
};

package.json 相關設定

 "scripts": {
    "test": "jest",
  },  
 "devDependencies": {
    "@babel/preset-env": "^7.24.3",
    "@vue/test-utils": "^2.4.5",
    "babel-jest": "^27.5.1",
    "jest": "^27.5.1",
    "vue3-jest": "^27.0.0-alpha.1"
    "jest-environment-jsdom": "^27.5.1",
  }

檔案目錄

src
└── test
    └── unit
        └── first.spec.js

在 src 新建 test 資料夾，底下新建 unit 資料夾（如果未來有 e2e 測試，也可以在這邊建立 e2e 相關資料夾），底下建立測試檔，以 spec.js 或 test.js 結尾。

first.spec.js

import {describe, expect, it} from '@jest/globals';
import {mount} from '@vue/test-utils';
import App from '../../App.vue';

// 這段程式碼的目的是測試 App 組件是否可以正確地掛載，並且在掛載過程中不會出現錯誤。

// describe 函數是用來定義一個測試套件
describe('first test', () => {
  // it 函數是用來定義一個測試用例
  it('mounts without errors', () => {
    // mount 函數是用來掛載一個 Vue 組件並返回一個包裹器物件
    const wrapper = mount(App);

    expect(wrapper).toBeTruthy();
  });
});

執行測試

npm test

結果：

參考來源

官方文件