詳解Vue單元測試case寫法

更新時間：2018年05月24日 10:25:52 作者：MarxJiao

這篇文章主要介紹了詳解Vue單元測試case寫法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

測試關注點

對于vue組件，單元測試測試主要關注以下幾點：

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

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

要測試組件加載后的狀態(tài)，首先我們需要將vue組件生成實例。并檢測掛載后實例的數(shù)據狀態(tà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: '標題',
    message: '這是子組件'
   }
  },
  components: {
   'vc-message': child
  },
  mounted() {
   this.title = 'Hello world'
  },
  methods: {
   setMessage(msg) {
    this.message = msg;
   }
  }
 }
</script>

組件加載后title的值應該變成'Hello world'，所以我們這樣來寫測試代碼

// 引用vue
import Vue from 'vue';

// 引用要測試的組件
import app from '../../src/app.vue';

// 描述要測試的內容
describe('test app.vue', () => {
 
 // 描述要測試的最小單元
 it('組件加載后，title應該是Holle world', () => {

  // 這里將app生成vue實例，并使用 $mount() 模擬掛載狀態(tài)
  let vm = new Vue(app).$mount();

  // 斷言組件的title是否變?yōu)榱?Hello world'
  expect(vm.title).toEqual('Hello world');
 });
});

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

測試組件里面的方法

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

// 引用vue
import Vue from 'vue';

// 引用要測試的組件
import app from '../../src/app.vue';

// 描述要測試的內容
describe('test app.vue', () => {
 
 // 描述要測試的最小單元
 it('設置message為『你好世界』', () => {

  // 這里將app生成vue實例，并使用 $mount() 模擬掛載狀態(tài)
  let vm = new Vue(app).$mount();

  // 執(zhí)行setMessage方法
  vm.setMessage('你好世界');

  // 斷言組件的message是否變?yōu)榱?你好世界'
  expect(vm.message).toEqual('你好世界');
 });
});

執(zhí)行karma start，就會看到測試成功。如果剛才沒有關閉karma的話，在watch模式下，測試會自動進行。

怎么樣？有沒有感覺vue單元測試非常簡單，趕緊做起來吧。

filter測試

filter的測試就更簡單了。filter就是純函數(shù)，有固定的輸入輸出，我們只需要執(zhí)行函數(shù)看預期結果就好了。我們?yōu)榻M件添加一個轉換大寫的filter:

<template>
...

 <h1>{{title | upperCase}}</h1>

...

</template>

<script>

...

 filters: {
  upperCase(str) {
   return str.toUpperCase();
  }
 }

...
</script>

測試這個filter

// 引用要測試的組件
import app from '../../src/app.vue';

// 描述要測試的內容
describe('test app.vue', () => {

 it('upperCase過濾器能把app轉換為APP', () => {

  // vue 組件export出來的是個對象，我們直接用這個對象的屬性和方發(fā)就能調用到要測試的filter
  let appStr = app.filters.upperCase('app');

  // 斷言組件的appStr是為'APP'
  expect(appStr).toEqual('APP');
 });
})

props測試

props依賴父組件，這個怎么測試呢。我們來看下vue官方提供的方法

使用Vue.extend()將組件掛載Vue構造器上，用propsData加入props數(shù)據，之后new一個Vue實例，這樣就生成了一個獨立的帶props的vm和前面的實例一樣，可以進行各種測試。

我們的child組件：

<template>
 <div>
  <div>{{message}}</div>
 </div>
</template>

<script>
 export default {
  props: ['message']
 }
</script>

測試child組件

// 引用vue
import Vue from 'vue';

// 引用要測試的組件
import child from '../../src/components/child.vue';

/**
 * 獲取生成的vm
 *
 * @param {Object} Component 組件
 * @param {Object} propsData props數(shù)據
 * @return {Object} vue實例
 */
function getRenderedVm (Component, propsData) {
 const Ctor = Vue.extend(Component)
 const vm = new Ctor({ propsData }).$mount()
 return vm
}

// 描述要測試的內容
describe('test child.vue', () => {
 
 // 描述要測試的最小單元
 it('組件加載后，child組件的message應該是「這是子組件」', () => {
  let childvm = getRenderedVm(child, {
   message: '這是message'
  });

  // 斷言組件的child組件的props是否生效
  expect(childvm.message).toEqual('這是message');
 });
});

是不是so easy.

異步更新DOM的情況

異步更新DOM的情況，參考vue官網的示例

使用Vue.nextTick來查看異步數(shù)據更新后dom是否變化

// 引用vue
import Vue from 'vue';

// 引用要測試的組件
import app from '../../src/app.vue';

// 描述要測試的內容
describe('test app.vue', () => {
 
 // 異步數(shù)據更新
 it('數(shù)據更新后，視圖應該改變', done => {

  // 這里將app生成vue實例，并使用 $mount() 模擬掛載狀態(tài)
  let vm = new Vue(app).$mount();

  // 掛載后改變title
  vm.title = 'APP';

  Vue.nextTick(() => {
   let title = vm.$el.getElementsByTagName('h1')[0]
   expect(title.textContent).toEqual('APP')
   done();
  })
 });
});

以上就是對vue組件單元測試的用例編寫的介紹，例子舉得比較簡單，主要是介紹各種情況的測試方法。

相關鏈接

karma+webpack搭建vue單元測試環(huán)境

Vue官網單元測試介紹

Jasmine introduction

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: