#單元測試#以karma+mocha+chai 爲測試框架的Vue webpack項目（二）

學習對vue組件進行單元測試，先參照官網編寫組件和測試腳本。

 

一、簡單的組件

組件無依賴，無props

對於無需導入任何依賴，也沒有props的，直接編寫測試案例便可。

/src/testSrc/simpleComp.vue

<template>
  <span>{{ message }}</span>
</template>

<script>
  export default {
    data () {
      return {
        message: 'hello!'
      }
    },
    created () {
      this.message = 'bye!'
    }
  }
</script>

 

/test/unit/specs/simpleComp.secs.js

import Vue from 'vue'
import simpleComp from '@/testSrc/simpleComp.vue'

describe('simpleComp', () => {
  // 檢查原始組件選項
  it('has a created hook', () => {
    expect(typeof simpleComp.created).to.eql('function')
  })

  // 評估原始組件選項中的函數結果
  it('sets the correct default data', () => {
    expect(typeof simpleComp.data).to.eql('function')
    const defaultData = simpleComp.data()
    expect(defaultData.message).to.eql('hello!')
  })

  // 檢查 mount 中的組建實例
  it('correctly sets the message when created', () => {
    const vm = new Vue(simpleComp).$mount()
    expect(vm.message).to.eql('bye!')
  })

  // 建立一個實例並檢查渲染輸出
  it('renders the correct message', () => {
    const Constructor = Vue.extend(simpleComp)
    const vm = new Constructor().$mount()
    expect(vm.$el.textContent).to.eql('bye!')
  })
})

　describe('', () => {// describe塊

　　it('', () => {  //一個it塊表明一個測試用例

　　})

      // 多個it塊構成了test suite【測試套件】

   })

　我在測試的時候是一個it塊一個it塊的增長，每編寫完成一個it塊，就保存並查看【#karma start】監控的運行結果。大概就是webpack compile 成功與否，測試用例在各瀏覽器的運行狀況，代碼覆蓋率總結報告。

     

     這裏應該是 8 SUCCESS, 忘記截圖了。Statements表示「聲明」，Branches表示分支，Functions表示方法，Lines表示行的覆蓋率。　

　

二、有入參的組件

組件有props

對於組件須要props，編寫單元測試時，經過propsData傳遞該參數。

/src/testSrc/propComp.vue

<template>
  <p>{{ msg }}</p>
</template>

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

　　

/test/unit/specs/propComp.specs.js

/**
 * 組件須要 props 時，經過 propsData 傳遞該參數
 */
import Vue from 'vue'
import propComp from '@/testSrc/propComp.vue'

function getRenderedText (Component, propsDataMsg) {
  const Ctor = Vue.extend(Component)
  const vm = new Ctor({ propsData: propsDataMsg }).$mount()
  return vm.$el.textContent
}

describe('propComp', () => {
  it('renders correctly with different props', () => {
    expect(getRenderedText(propComp, {
      msg: 'Hello'
    })).to.eql('Hello')

    expect(getRenderedText(propComp, {
      msg: 'Bye'
    })).to.eql('Bye')
  })
})

 

三、有依賴其餘組件的組件【TODO-->未解決，會報錯還沒理解】

若組件存在依賴，則可經過inject-loader解決。inject-loader可將任意依賴項注入到*.vue組件中。

/src/testSrc/dependencyComp.vue

<template>
  <div class="msg">
    {{ msg }}
  </div>
</template>

<script>
  // this dependency needs to be mocked
  import SomeService from '../service'

  export default {
    data () {
      return {
        msg: SomeService.msg
      }
    }
  }
</script>

/test/unit/specs/dependencyComp.specs.js

import Vue from 'vue'

// "!!"表示禁用全局配置的全部loaders。「vue-loader?inject!」表示使用vue-loader，傳入inject參數
const ExampleInjector = require('!!vue-loader?inject!./example.vue')
// 運行ExampleInjector函數返回一個denpendencyComp的實例，該實例中denpendencyComp組件的依賴項已被模擬
const ExampleWithMocks = ExampleInjector({
  // mock it
  '../service': {
    msg: 'Hello from a mocked service!'
  }
})

describe('dependencyComp', () => {
  it('should render', () => {
    const vm = new Vue({
      template: '<div><test></test></div>',
      components: {
        'test': ExampleWithMocks
      }
    }).$mount()

    expect(vm.$el.querySelector('.msg').textContent).to.eql('Hello from a mocked service!')
  })
})

 

四、有異步操做的組件

對於異步操做，it塊執行的時候，須要傳入一個回調函數，一般該函數被命名爲done。當測試結束的時候，必須顯式調用這個函數【done()】，告訴Mocha測試結束了。不然，Mocha就沒法知道，測試是否結束，會一直等到超時報錯。

就用以前編寫的簡單的組件，增長測試用例 —— it塊就好了。

/src/testSrc/simpleComp.vue

【見一、簡單的組件】

 

更新 /test/unit/specs/simpleComp.specs.js

// 新增一個it塊
// 異步操做：在狀態更新後檢查生成的 HTML
it('updates the rendered message when vm.message updates', done => {
  const vm = new Vue(simpleComp).$mount()
  vm.message = 'foo'
  // 在狀態改變後和斷言 DOM 更新前等待一刻
  Vue.nextTick(() => {
    expect(vm.$el.textContent).to.eql('foo')
    done()   //顯示調用結束函數done()，告訴mocha異步操做結束
  })
})

#karma start

  

實際上總共只有7個測試用例（即7個it塊），可是我配置瀏覽器的時候配置了兩個（Chrome、FireFox），每一個而是用例都會在它們兩個瀏覽器運行，故而總共運行了14個。　　

 

資料：

一、Vue單元測試---Karma+Mocha+Chai實踐