書(shū)接上文，karma+webpack搭建vue單元測(cè)試環(huán)境介紹了vue單元測(cè)試環(huán)境搭建及查看源文件的測(cè)試覆蓋覆蓋率。今天來(lái)說(shuō)一下vue單元測(cè)試思路和case的寫(xiě)法。測(cè)試框架使用jasmine，語(yǔ)法參考。

代碼地址：https://github.com/MarxJiao/vue-karma-test/tree/spec-demo

測(cè)試關(guān)注點(diǎn)

對(duì)于vue組件，單元測(cè)試測(cè)試主要關(guān)注以下幾點(diǎn)：

vue組件加載后，各數(shù)據(jù)模型是否符合預(yù)期 定義的方法是否可用 filter是否可用 帶有props的組件，數(shù)據(jù)能否正常傳遞 異步更新DOM的情況

組件加載后的狀態(tài)

要測(cè)試組件加載后的狀態(tài)，首先我們需要將vue組件生成實(shí)例。并檢測(cè)掛載后實(shí)例的數(shù)據(jù)狀態(tài)。下面是個(gè)示例：

我們來(lái)看下src/app.vue組件的代碼：

<template> <div>  <h1>{{title}}</h1>  <vc-message :message="message"></vc-message> </div></template><script> import child from './components/child.vue' export default {  data() {   return {    title: '標(biāo)題',    message: '這是子組件'   }  },  components: {   'vc-message': child  },  mounted() {   this.title = 'Hello world'  },  methods: {   setMessage(msg) {    this.message = msg;   }  } }</script>

組件加載后title的值應(yīng)該變成'Hello world'，所以我們這樣來(lái)寫(xiě)測(cè)試代碼

// 引用vueimport Vue from 'vue';// 引用要測(cè)試的組件import app from '../../src/app.vue';// 描述要測(cè)試的內(nèi)容describe('test app.vue', () => {  // 描述要測(cè)試的最小單元 it('組件加載后，title應(yīng)該是Holle world', () => {  // 這里將app生成vue實(shí)例，并使用 $mount() 模擬掛載狀態(tài)  let vm = new Vue(app).$mount();  // 斷言組件的title是否變?yōu)榱?Hello world'  expect(vm.title).toEqual('Hello world'); });});

執(zhí)行karma start我們能看到測(cè)試通過(guò)。

測(cè)試組件里面的方法

我們知道vue將data和methods都掛在了vue實(shí)例的根節(jié)點(diǎn)下，所以測(cè)試vue組件中的方法也和上面測(cè)試狀態(tài)一樣，直接調(diào)用vm的方法就行了。我們來(lái)測(cè)試以下setMessage方法：

// 引用vueimport Vue from 'vue';// 引用要測(cè)試的組件import app from '../../src/app.vue';// 描述要測(cè)試的內(nèi)容describe('test app.vue', () => {  // 描述要測(cè)試的最小單元 it('設(shè)置message為『你好世界』', () => {  // 這里將app生成vue實(shí)例，并使用 $mount() 模擬掛載狀態(tài)  let vm = new Vue(app).$mount();  // 執(zhí)行setMessage方法  vm.setMessage('你好世界');  // 斷言組件的message是否變?yōu)榱?你好世界'  expect(vm.message).toEqual('你好世界'); });});

執(zhí)行karma start，就會(huì)看到測(cè)試成功。如果剛才沒(méi)有關(guān)閉karma的話，在watch模式下，測(cè)試會(huì)自動(dòng)進(jìn)行。

怎么樣？有沒(méi)有感覺(jué)vue單元測(cè)試非常簡(jiǎn)單，趕緊做起來(lái)吧。