Setup Jest Testing Environment for Vue

8 min readJul 3, 2021

前幾天想要準備 vue 的測試環境，想說就是裝個 vue/test-utils 套件，結果弄了一個晚上，搞死自己。因為 Vue Test Utils 只是 mount Vue Componentd library，測試環境還是要自行準備。不但文件說不清楚， vue2 和 vue3還有點不同，決定要寫筆記，避免下次安裝環境又再搞到自己快瘋掉。

以下都只筆記由 vue-cli 所建立的專案
1. Vue CLI 版號 4.5.13
2. 本文章寫在 2021七月初。所以一切版號文件以這時間點為主。

不論 vue2 或 vue3 最簡單的方式，都是在建立專案時，就把 Unit Testing的選項納入。一次搞定。

如果是已經既有的專案，那就可以同樣用 vue-cli 再新增 unit test 的plugin 。不論 vue2 或 vue3 都一樣，只要執行 vue add unit-jest 就全部搞定。

這邊就要開始說 Vue Test Utils 分別在 vue2 和 vue3 的Installation，完全沒有介紹到這種簡單的方式。

Vue Test Utils for Vue3的文件完全沒有提到可以使用 vue add unit-jest ，但實際上是完全可以的，從Jest到 Vue Test Utils都一鍵完成。

Vue Test Utils for Vue2 的文件，則特別推薦使用 vue add unit-jest。文件上說需要再接著安裝 Vue Test Utils。但 Vue CLI 其實在執行 vue add unit-jest時，也安裝好 Vue Test Utils了，不需要再安裝一次。

Vue Test Utils for Vue2 推薦使用 Vue CLI建立 Unit test 環境

既然這麼簡單，那我為什麼還要寫成筆記？因為我當初太天真，想要自己手動安裝呀!!! 記取這些經驗的教訓，總結兩個手動安裝要點：

順序：
第一步. 安裝 jest，寫個最簡易的單元測試，驗證安裝是否正確
第二步. 安裝 vue-jest, babel-jest 等compile用的套件，讓Jest 認識 vue
第三步才是安裝 @vue/test-utils
版本：
不論 vue2或 vue3 對應的package的版本都不同，每個 package之間的版本要對應正確。這才是手動安裝時最容易噴錯的地方。

以下先記錄vue2的測試環境手動安裝。

使用 Vue CLI 建立的 vue2 專案，預設 src下的components 中有 HelloWorld.vue 會用來做為本文測試用的component；然後目前package.json的 dependencies 和 devDependencies 如下

{
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
}

值得注意的是 vue-template-compiler 已經裝進來了，網路上很多文章在介紹建立環境時，是要另外再安裝的。

第一步先安裝 Jest npm install --save-dev jest ，安裝完後在 devDependecies 中可以看到現在 Jest 的版本 "jest": "^27.0.6"

在專案中新增資料夾 test ，並寫第一支測試檔 HelloWorld.spec.js

然後手動修改 package.json 在 scripts中增加新的指令 test: jest

{
  "scripts": {
    ...
    "test":"jest",
}

這樣就可以執行 npm run test 順利的話會有一項測試成功，代表Jest 安裝與執行成功

第二步就是要安裝很多 package讓 Jest 認識 Babel 和 Vue

npm install --save-dev vue-jest babel-jest babel-core

此時的 package.json 就會多很多東西，其中要注意的是bable-jest會和剛安裝完的 jest在同一個major版號。以目前為例就是 27.x.x

{
  "devDependencies": {
    ...
    "babel-core": "^6.26.3",
    "babel-jest": "^27.0.6",
    "vue-jest": "^3.0.7",
  },
}

然後新增一支給 Jest 用的 config jest.config.js 讓它放在跟 package.json 同一層級

module.exports = {
  verbose: true,
  roots: ["<rootDir>/test/"],
  moduleFileExtensions: ['js', 'vue'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1',
  },
  transform: {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "vue-jest",
  }
}

這時，我們調整剛才的 HelloWorld.spec.js

import HelloWorld from '@/components/HelloWorld';it('HelloWorld', () => {
  console.log(HelloWorld);
});

然後同樣執行 npm run test

現在來安裝 Vue3 的測試環境，第一步與 Vue2 相同。但第二步就要注意很多。

首先是 Vue 3 不再使用 vue-template-compiler ，所以 vue-jest 會跟 Vue2 使用不同的版號，不然會噴錯。目前是Vue3 要搭配的版號是 5.x ，安裝時只需要改成 npm install --save-dev vue-jest@next 即可。但執行後還是會噴錯：

網路不管怎麼找都沒有正面對決的解法，後來將 jest 降版就解決了。也就是要將 Jest 27.x 降成 Jest 26.x。同樣也要將 babel-jest這的版號降為 26.x，也是為什麼前面要提到 babel-jest 的主版要跟 Jest 相同，不然還是會錯。

npm install --save-dev jest@^26 babel-jest@^26

安裝完後 package.json 會如下：

{
  "devDependencies": {
    ...
    "jest": "^26.6.3",
    "babel-jest": "^26.6.3",
    "vue-jest": "^5.0.0-alpha.10"
  }
}

運行就會是正常的了

接下來才是安裝 Vue Test Utils

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

Vue3 npm install --sve-dev @vue/test-utils@next

調整一下 HelloWorld.spec.js

import HelloWorld from '@/components/HelloWorld';
import { mount } from '@vue/test-utils';it('HelloWorld', () => {
  const wrapper = mount(HelloWorld, {
    props: {
      msg: 'Hi, I am Jayson'
    }
  });  expect(wrapper.html()).toContain('Hi, I am Jayson');
});

大功告成

Setup Jest Testing Environment for Vue

Written by Jayson Chiang