vue接入單元測試Jest,配置花了點時間,相對於selenium+mocha+karma那套配置簡單多了
1.安裝vue
npm install --save-dev jest @vue/test-utils
npm install --save-dev vue-jest
npm install --save-dev babel-jest
npm install --save-dev jest-serializer-vue
2.配置babelnode
babel配置能夠寫在package.json,也能夠寫在.babelrc文件,個人項目是寫在.babelrc,而且是分環境,這裏不能直接參考網上給出的~坑就在這裏,翻閱了內外網資料,仔細看代碼才寫正確,而且因爲報錯:Unexpected Token Import for ES6 modulesgit
終於在https://github.com/facebook/j...,須要增長babel插件github
"test": { "presets": [ ["env", { "targets": { "node": "current" }, "modules": false }] ], "plugins": ["transform-es2015-modules-commonjs"] }
至此,三套環境的配置以下,官網那個配置簡單環境用用就好了,複雜環境仍是要多試試:npm
3.配置package.json,增長jest的配置json
"jest": { "moduleFileExtensions": [ "js", "json", "vue" ], "moduleNameMapper": { "^src/(.*)$": "<rootDir>/src/$1" }, "transform": { "^.+\\.js$": "<rootDir>/node_modules/babel-jest", ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" }, "snapshotSerializers": [ "<rootDir>/node_modules/jest-serializer-vue" ], "coverageDirectory": "<rootDir>/test/unit/coverage", "collectCoverageFrom": [ "src/**/*.{js,vue}", "!src/index.js", "!src/router/index.js", "!**/node_modules/**" ] }
官網默認存放目錄以下babel
5.運行 npm run test ,控制檯執行結果以下app
參考:單元測試
Vue Test Utils測試
Jest