vue3中單元測試主要是通過腳手架@vue/cli-plugin-unit-jest進(jìn)行一些列配置的〖跸欤現(xiàn)簡單羅列出整個(gè)過程炊豪。(新項(xiàng)目通過vue create 創(chuàng)建時(shí)直接加入單元測試即可，vite另外探索）
第一步：導(dǎo)入對應(yīng)的包，并添加運(yùn)行指令（注意版本依賴關(guān)系）
// 導(dǎo)入
npm i @vue/cli-plugin-unit-jest @vue/test-utils babel-jest@27.0.6 -D
// 創(chuàng)建指令并運(yùn)行
"test": "vue-cli-service test:unit"
第二步：運(yùn)行時(shí)會(huì)提示如下報(bào)錯(cuò)辖众，我們需要去添加預(yù)設(shè)解析
Test suite failed to run
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration
我們在根目錄下添加jest配置文件（jest.config.js）莽红，然后添加如下內(nèi)容來處理解析報(bào)錯(cuò)問題
module.exports = {
preset:'@vue/cli-plugin-unit-jest/presets/typescript'
}
首先，安裝解析包@vue/vue3-jest锈玉，出現(xiàn)報(bào)錯(cuò)是我們版本不對滤淳，我們根據(jù)提示安裝對應(yīng)的版本即可
npm i @vue/vue3-jest@^27.0.0-alpha.3 -D
其次，安裝jest包
npm i jest@27.1.0 -D
最后砌左，安裝解析包ts-jest
npm i @types/jest@27.0.4 ts-jest@27.0.4 -D
第三步：我們在跟目錄下創(chuàng)建單元測試文件脖咐，測試文件放在tests文件夾下，命名以.spec.ts結(jié)尾
第四步：運(yùn)行指令
npm run test
這時(shí)汇歹，控制臺(tái)會(huì)出現(xiàn)ts報(bào)錯(cuò)問題屁擅，我們需要在ts配置文件添加jest文件類型檢測即可，如下所示
"compilerOptions": {
"types": [
"jest"
]
}
成功運(yùn)行后結(jié)果顯示如下
