Vue中怎么利用case實現單元測試

Vue中怎么利用case實現單元測試，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

測試關注點

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

1. vue組件加載后，各數據模型是否符合預期

2. 定義的方法是否可用

3. filter是否可用

4. 帶有props的組件，數據能否正常傳遞

5. 異步更新DOM的情況

組件加載后的狀態

要測試組件加載后的狀態，首先我們需要將vue組件生成實例。并檢測掛載后實例的數據狀態。下面是個示例：

我們來看下src/app.vue組件的代碼：

<template>
 <div>
  <h2>{{title}}</h2>
  <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() 模擬掛載狀態
  let vm = new Vue(app).$mount();

  // 斷言組件的title是否變為了'Hello world'
  expect(vm.title).toEqual('Hello world');
 });
});

執行karma start我們能看到測試通過。

測試組件里面的方法

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

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

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

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

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

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

  // 斷言組件的message是否變為了'你好世界'
  expect(vm.message).toEqual('你好世界');
 });
});

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

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

filter測試

filter的測試就更簡單了。filter就是純函數，有固定的輸入輸出，我們只需要執行函數看預期結果就好了。我們為組件添加一個轉換大寫的filter:

<template>
...

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

...

</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出來的是個對象，我們直接用這個對象的屬性和方發就能調用到要測試的filter
  let appStr = app.filters.upperCase('app');

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

props測試

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

使用Vue.extend()將組件掛載Vue構造器上，用propsData加入props數據，之后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數據
 * @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來查看異步數據更新后dom是否變化

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

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

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

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

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

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

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。