先說結論，我認為不適合用 mocha 進行 vue3 單元測試(@vue/test-utils)，反覆查了很久的資料，相關的套件支援度不足等有重重的障礙，根據 @vue/test-utils 目前提供的測試範例，選擇 Vitest 會更適合。
完整程式碼上傳至 Github (連結)。
一、安裝
首先，第一個問題就是 vue 的版本不能太新，目前只支援 3.0.7，因此對應安裝了相同版本的 @vue/server-renderer
1
npm install --save-dev @vue/server-renderer@3.0.7
再來請安裝 webpck 和 mocha，mochapack，mochapack 是用來讀取 webpack 設定將元件 render 出來的套件，可支援 webpack5 和 mocha 9
1
npm install --save-dev webpack mocha mochapack
其他有兩個類似的套件：
- mocha-webpack:
- mocha: ‘>=4 <=5’
- webpack: ‘^4.0.0’
- instant-mocha:
- mocha: ‘^6.1.4 || ^8.3.2’
- webpack: ‘^4.40.0 || ^5.0.0’
mochapack 是由 mocha-webpack 延伸而來的，三者用法都非常接近，但上述兩個對 webpack 和 mocha 版本的支援度都比 mochapack 差
再來請安裝 vue3 官方的元件測試套件 @vue/test-utils
1
npm install --save-dev @vue/test-utils
mocha 不像是 jest 已經內建支援 jsdom、assertion ，所以要另外安裝
1
2
npm install --save-dev webpack-node-externals jsdom-global
npm install --save-dev expect
二、設定
新增測試專用的 webpack 設定檔 webpack.config-test.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const nodeExternals = require('webpack-node-externals');
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode: 'development',
target: 'node', // webpack should compile node compatible code
externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
devtool: 'inline-cheap-module-source-map',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
],
},
plugins: [
new VueLoaderPlugin(),
],
};
設定 jsdom 設定檔 src/tests/setup.js
1
require('jsdom-global')();
最後，請到 package.json 設定 script 指令
1
2
3
4
5
{
"scripts": {
"test": "npx mochapack --webpack-config webpack.config-test.js --require src/tests/setup.js src/tests/**/*.spec.js",
}
}
Usage: mochapack [options] [<file|directory|glob> …]
Options
–webpack-config path to webpack-config file
–require, -r require the given module
三、執行
新增測試(範例請參考 Counter.spec.js)後,執行指令即可 npm run test
四、限制
無法支援最新 vue3
無法支援目前 vue 最新版本 3.2.37，發現底下錯誤訊息
ReferenceError: SVGElement is not defined
無法支援 SFC
無法支援 SFC ，發現底下警告訊息:
[Vue warn]: Component is missing template or render function.