vue單元測試實踐

目的：

    在已有vue項目上追加單元測試功能

爲了利用vue-cli自帶生成的一系列配置，新起一個vue-cli項目，在vue init時候選擇單元測試項，最終追查到需要新增的一些npm包，均安裝到devDependencies：

"@vue/test-utils": "^1.0.0-beta.29",   
"babel-plugin-istanbul": "^5.2.0",
"chai": "^4.1.2",
"cross-env": "^6.0.0",
"expect": "^24.9.0",
"jsdom": "^15.1.1",
"jsdom-global": "^3.0.2",
"karma": "^1.4.1",
"karma-chrome-launcher": "^3.1.0",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^4.0.2",
"mocha": "^6.2.0",
"mocha-webpack": "^1.1.0",
"sinon": "^4.0.0",
"sinon-chai": "^2.8.0",
"supertest": "^4.0.2",
"webpack-merge": "^4.2.2",
"webpack-node-externals": "^1.7.2"

package.json

"scripts"新增腳本 //   test/unit/karma.conf.js是放配置文件的地址

    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",

    "test": "npm run unit"

---

根目錄增加一個文件夾

（可以從vue-cli項目中拷過來，根據實際項目 修改下部分配置文件）deviceList.spec.js是我自己的一個單元測試用例，之後按需新增即可

倒數第二個index.js打開如下，按需修改

因爲我本地/public/src/entry文件夾下有main.js

是webpack打包入口文件指定的那個，裏面有new Vue({})

---

倒數第一個配置文件打開如下，按需修改

標註1對應的文件是webpack.config.js的一個拷貝

const merge = require('webpack-merge')

const devEnv = require('./webpack.config')

module.exports = merge(devEnv)

---

接下來是對 *.spec.js文件對應的編寫

import deviceWrapper from '@/views/main/deviceWrapper'

import App from '@/App'

import {shallowMount, mount, createLocalVue} from '@vue/test-utils'

import VueRouter from "vue-router"

import router from "@/router/main.js"

import store from '@/store/main/index.js'


// const router = new VueRouter({
//   routes: [
//     {
//       path: '/', name: 'ss', component: HelloWorld
//     },
//     {
//       path: '/device/list', name: 'aa', component: deviceWrapper
//     }
//   ]
// })

const localVue = createLocalVue()

localVue.use(VueRouter)



describe('Layout.vue', () => {

  it('Layout sdsdsd OK不OK ?', () => {

    const wrapper = mount( App, { // mount, 不是shallowmount

      localVue, 

      router,

      store

     });

    router.push("/device/list");

  /* wrapper.find找到的是對應路由中當前的component，不包括子路由中的組件
   * 會查不到而用例不通過，例如/device中指定component是layout，其children中又包含 
   * 了/list，它的組件又是devicewapper，那我在路由/device中是匹配不到devicewrapper 的， 
   * 而只能匹配到layout
   */
    expect(wrapper.find(deviceWrapper).exists()).to.equal(true)

  })

})

router文件是動態生成的，這裏也已經解決了，注意點:網上很多都是new了一個Router把配置放進去，其實會跑不通，因爲導出的已經是Router的實例了，不需要重新new，除非你導出的是routers的數組 修飾掉的第14行到23行，是重新當前文件模擬的一個router實例，修飾掉第9行，改用當前方式，也是可以的