Vue專案單元自測

jest 包含了 karma + mocha + chai + sinon 的所有常用功能，零配置開箱即用。

1.安裝依賴（預設已有bable依賴）

npm install jest vue-jest babel-jest @vue/test-utils -d

2.編寫 jest 配置檔案

// ./test/unit/jest.conf.js
const path = require('path');
module.exports = ,
transform: ,
setupfiles: ['/test/unit/setup'], // 類似 webpack.entry
coveragedirectory: '/test/unit/coverage', // 類似 webpack.output
collectcoveragefrom: [ // 類似 webpack 的 rule.include
'src/**/*.',
'!src/main.js',
'!src/router/index.js',
'!**/node_modules/**',
],};

3編寫啟動檔案 setup.js

// ./test/unit/setup.js
import vue from 'vue';
vue.config.productiontip = false;

4.在package.json裡加入啟動 jest 的 npm script

"scripts": ,

5.編寫第乙個測試檔案

有乙個元件

// ./src/components/hello-world/hello-world.vue

對該元件進行測試

// ./src/components/hello-world/hello-world.spec.js
import  from '@vue/test-utils';
import helloworld from './hello-world';
describe('', () => );
});

6.啟動測試

npm run unit

遇到的報錯：

test suite failed to run
/users/molunerfinn/desktop/work/web/vue-koa-demo/test/sever/todolist.test.js:1(}]
],"env": ]]
}}}

報錯：

test suite failed to run

cannot find module 'babel-core'

however, jest was able to find:

解決：package.json 的devdependencies裡增加 "babel-core": "^7.0.0-bridge.0"

npm i 後正常啟動了。

參考：

vue專案中新增單元測試

從網上找了很多例子關於單元測試，都是如何新建專案的時候的新增單元測試，用vue cli中怎麼新增，但是我的專案已經生成了，不能再一次重新初始化，這時如何新增單元測試，這裡面遇到了好多坑，寫在這裡記錄一下心得。1 用vue cli生成乙個新的專案，把單元測試需要的檔案直接複製到你的專案中 2 安裝ka...

VUE 單元測試

官網上推薦的是karma和jasmine,這裡我寫的是我們自己的手動單元測試.我們都知道,乙個專案在完成之後會進入後期的更新迭代和維護.而單元測試雖然在前期寫起來會相對麻煩,但是在後期的維護過程中會簡單很多,可以明顯的看出是後台埠的問題還是前端自己的問題.我們現在工程目錄裡建立乙個測試的資料夾這裡...

vue 單元測試

vue cli 擁有開箱即用的通過 jest 或 mocha 進行單元測試的內建選項。我們還有官方的 vue test utils 提供更多詳細的指引和自定義設定。你不必為了可測性在元件中做任何特殊的操作，匯出原始設定就可以了然後隨著 vue test utils 匯入元件，你可以使用許多常見的斷...

Vue專案單元自測

vue專案中新增單元測試

VUE 單元測試

vue 單元測試

相關推薦