首頁 >web前端 >js教程 >詳細講解Vue單元測試中Karma+Mocha

詳細講解Vue單元測試中Karma+Mocha

亚连
亚连原創
2018-06-08 16:56:331983瀏覽

本篇文章主要介紹了詳解Vue單元測試Karma Mocha學習筆記,現在分享給大家,也給大家做個參考。

在使用vue-cli建立專案的時候,會提示要不要安裝單元測試和e2e測試。既然官方推薦我們使用這兩個測試框架,那麼我們就動手去學習實踐一下他們吧。

簡介

Karma

#Karma是基於Node.js的JavaScript測試執行程式管理工具(Test Runner) 。該工具在Vue中的主要作用是將專案運行在各種主流網頁瀏覽器進行測試。

換句話說,它是一個測試工具,能讓你的程式碼在瀏覽器環境下測試。需要它的原因在於,你的程式碼可能是設計在瀏覽器端執行的,在node環境下測試可能有些bug暴露不出來;另外,瀏覽器有相容問題,karma提供了手段讓你的程式碼自動在多個瀏覽器(chrome,firefox,ie等)環境下運作。如果你的程式碼只會運行在node端,那麼你不需要用karma。

Mocha

Mocha是一個測試框架,在vue-cli中配合chai斷言函式庫實作單元測試。

而Chai斷言庫可以看Chai.js斷言庫API中文文檔,很簡單,多查多用就能很快掌握。

我對測試框架的理解

npm run unit 執行過程

  1. 執行npm run unit 指令

  2. 開啟Karma運行環境

  3. #使用Mocha去逐一測試用Chai斷言寫的測試案例

  4. #在終端機顯示測試結果

  5. 如果測試成功,karma-coverage 會在./test/unit/coverage 資料夾中產生測試覆蓋率結果的網頁。

Karma

對於Karma,我只是了解了一下它的設定選項。

下面是Vue的karma配置,簡單註釋了下:

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function (config) {
 config.set({
  // 浏览器
  browsers: ['PhantomJS'],
  // 测试框架
  frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
  // 测试报告
  reporters: ['spec', 'coverage'],
  // 测试入口文件
  files: ['./index.js'],
  // 预处理器 karma-webpack
  preprocessors: {
   './index.js': ['webpack', 'sourcemap']
  },
  // Webpack配置
  webpack: webpackConfig,
  // Webpack中间件
  webpackMiddleware: {
   noInfo: true
  },
  // 测试覆盖率报告
  // https://github.com/karma-runner/karma-coverage/blob/master/docs/configuration.md
  coverageReporter: {
   dir: './coverage',
   reporters: [
    { type: 'lcov', subdir: '.' },
    { type: 'text-summary' }
   ]
  }
 })
}

#Mocha和chai

我們看下官方的例子(都用註釋來解釋程式碼意思了):

import Vue from 'vue' // 导入Vue用于生成Vue实例
import Hello from '@/components/Hello' // 导入组件
// 测试脚本里面应该包括一个或多个describe块,称为测试套件(test suite)
describe('Hello.vue', () => {
 // 每个describe块应该包括一个或多个it块,称为测试用例(test case)
 it('should render correct contents', () => {
  const Constructor = Vue.extend(Hello) // 获得Hello组件实例
  const vm = new Constructor().$mount() // 将组件挂在到DOM上
  //断言:DOM中class为hello的元素中的h1元素的文本内容为Welcome to Your Vue.js App
  expect(vm.$el.querySelector('.hello h1').textContent)
   .to.equal('Welcome to Your Vue.js App') 
 })
})

需要知道的知識點:

  1. 測試腳本都要放在test/unit/specs/ 目錄下。

  2. 腳本命名方式為  [元件名稱].spec.js。

  3. 所謂斷言,就是對元件做一些操作,並預言產生的結果。如果測試結果與斷言相同則測試通過。

  4. 單元測試預設測試 src 目錄下除了 main.js 之外的所有文件,可在 test/unit/index.js 檔案中修改。

  5. Chai斷言庫中,to be been is that which and has have with at of same 這些語言鍊是沒有意義的,只是便於理解而已。

  6. 測試腳本由多個  descibe 組成,每個 describe 由多個 it 組成。

  7. 了解非同步測試

it('异步请求应该返回一个对象', done => {
  request
  .get('https://api.github.com')
  .end(function(err, res){
   expect(res).to.be.an('object');
   done();
  });
});

了解describe 的鉤子(生命週期)

describe('hooks', function() {

 before(function() {
  // 在本区块的所有测试用例之前执行
 });

 after(function() {
  // 在本区块的所有测试用例之后执行
 });

 beforeEach(function() {
  // 在本区块的每个测试用例之前执行
 });

 afterEach(function() {
  // 在本区块的每个测试用例之后执行
 });

 // test cases
});

#實作

上面簡單介紹了單元測試的用法,以下來動手在Vue中進行單元測試!

util.js

從Vue官方的demo可以看出,對於Vue的單元測試我們需要將元件實例化為一個Vue實例,有時還需要掛載到DOM上。

 const Constructor = Vue.extend(Hello) // 获得Hello组件实例
 const vm = new Constructor().$mount() // 将组件挂载到DOM上

以上寫法只是簡單的取得元件,有時候我們需要傳遞props屬性、自訂方法等,還有可能我們需要用到第三方UI框架。所以以上寫法非常麻煩。

這裡推薦Element的單元測試工具腳本Util.js,它封裝了Vue單元測試中常用的方法。下面demo也是根據該 Util.js來寫的。
這裡簡單註解了下各方法的用途。

/**
 * 回收 vm,一般在每个测试脚本测试完成后执行回收vm。
 * @param {Object} vm
 */
exports.destroyVM = function (vm) {}

/**
 * 创建一个 Vue 的实例对象
 * @param {Object|String} Compo   - 组件配置,可直接传 template
 * @param {Boolean=false} mounted  - 是否添加到 DOM 上
 * @return {Object} vm
 */
exports.createVue = function (Compo, mounted = false) {}

/**
 * 创建一个测试组件实例
 * @param {Object} Compo     - 组件对象
 * @param {Object} propsData   - props 数据
 * @param {Boolean=false} mounted - 是否添加到 DOM 上
 * @return {Object} vm
 */
exports.createTest = function (Compo, propsData = {}, mounted = false) {}

/**
 * 触发一个事件
 * 注: 一般在触发事件后使用 vm.$nextTick 方法确定事件触发完成。
 * mouseenter, mouseleave, mouseover, keyup, change, click 等
 * @param {Element} elm   - 元素
 * @param {String} name   - 事件名称
 * @param {*} opts      - 配置项
 */
exports.triggerEvent = function (elm, name, ...opts) {}

/**
 * 触发 “mouseup” 和 “mousedown” 事件,既触发点击事件。
 * @param {Element} elm   - 元素
 * @param {*} opts     - 配置选项
 */
exports.triggerClick = function (elm, ...opts) {}

範例一

範例一中我們測試了Hello 元件的各種元素的數據,學習  util.js 的destroyVM 和createTest 方法的用法以及如何取得目標元素進行測試。取得DOM元素的方式可查看DOM 物件教學。

Hello.vue

<template>
 <p class="hello">
  <h1 class="hello-title">{{ msg }}</h1>
  <h2 class="hello-content">{{ content }}</h2>
 </p>
</template>

<script>
export default {
 name: &#39;hello&#39;,
 props: {
  content: String
 },
 data () {
  return {
   msg: &#39;Welcome!&#39;
  }
 }
}
</script>

Hello.spec.js

import { destroyVM, createTest } from &#39;../util&#39;
import Hello from &#39;@/components/Hello&#39;

describe(&#39;Hello.vue&#39;, () => {
 let vm

 afterEach(() => {
  destroyVM(vm)
 })

 it(&#39;测试获取元素内容&#39;, () => {
  vm = createTest(Hello, { content: &#39;Hello World&#39; }, true)
  expect(vm.$el.querySelector(&#39;.hello h1&#39;).textContent).to.equal(&#39;Welcome!&#39;)
  expect(vm.$el.querySelector(&#39;.hello h2&#39;).textContent).to.have.be.equal(&#39;Hello World&#39;)
 })

 it(&#39;测试获取Vue对象中数据&#39;, () => {
  vm = createTest(Hello, { content: &#39;Hello World&#39; }, true)
  expect(vm.msg).to.equal(&#39;Welcome!&#39;)
  // Chai的语言链是无意义的,可以随便写。如下:
  expect(vm.content).which.have.to.be.that.equal(&#39;Hello World&#39;) 
 })

 it(&#39;测试获取DOM中是否存在某个class&#39;, () => {
  vm = createTest(Hello, { content: &#39;Hello World&#39; }, true)
  expect(vm.$el.classList.contains(&#39;hello&#39;)).to.be.true
  const title = vm.$el.querySelector(&#39;.hello h1&#39;)
  expect(title.classList.contains(&#39;hello-title&#39;)).to.be.true
  const content = vm.$el.querySelector(&#39;.hello-content&#39;)
  expect(content.classList.contains(&#39;hello-content&#39;)).to.be.true
 })
})

輸出結果

Hello.vue
  √ 測試取得元素內容
√ 測試取得Vue物件中資料
  √ 測試取得DOM中是否存在某個class

範例二

##範例二中我們使用createTest 建立測試元件測試點選事件,用createVue 建立Vue範例物件測試元件Click 的使用。這裡主要可以看下到 createVue 方法的使用。

Click.vue

<template>
 <p>
  <span class="init-num">初始值为{{ InitNum }}</span><br>
  <span class="click-num">点击了{{ ClickNum }}次</span><br>
  <span class="result-num">最终结果为{{ ResultNum }}</span><br>
  <button @click="add">累加{{ AddNum }}</button>
 </p>
</template>

<script>
export default {
 name: &#39;Click&#39;,
 props: {
  AddNum: {
   type: Number,
   default: 1
  },
  InitNum: {
   type: Number,
   default: 1
  }
 },
 data () {
  return {
   ClickNum: 0,
   ResultNum: 0
  }
 },
 mounted () {
  this.ResultNum = this.InitNum
 },
 methods: {
  add () {
   this.ResultNum += this.AddNum
   this.ClickNum++
   this.$emit(&#39;result&#39;, {
    ClickNum: this.ClickNum,
    ResultNum: this.ResultNum
   })
  }
 }
}
</script>

Click.spec.js

import { destroyVM, createTest, createVue } from &#39;../util&#39;
import Click from &#39;@/components/Click&#39;

describe(&#39;click.vue&#39;, () => {
 let vm

 afterEach(() => {
  destroyVM(vm)
 })

 it(&#39;测试按钮点击事件&#39;, () => {
  vm = createTest(Click, {
   AddNum: 10,
   InitNum: 11
  }, true)
  let buttonElm = vm.$el.querySelector(&#39;button&#39;)
  buttonElm.click()
  buttonElm.click()
  buttonElm.click()
  // setTimeout 的原因
  // 在数据改变之后,界面的变化会有一定延时。不用timeout有时候会发现界面没有变化
  setTimeout(done => {
   expect(vm.ResultNum).to.equal(41)
   expect(vm.$el.querySelector(&#39;.init-num&#39;).textContent).to.equal(&#39;初始值为11&#39;)
   expect(vm.$el.querySelector(&#39;.click-num&#39;).textContent).to.equal(&#39;点击了3次&#39;)
   expect(vm.$el.querySelector(&#39;.result-num&#39;).textContent).to.equal(&#39;最终结果为41&#39;)
   done()
  }, 100)
 })

 it(&#39;测试创建Vue对象&#39;, () => {
  let result
  vm = createVue({
   template: `
    <click @click="handleClick"></click>
   `,
   props: {
    AddNum: 10,
    InitNum: 11
   },
   methods: {
    handleClick (obj) {
     result = obj
    }
   },
   components: {
    Click
   }
  }, true)
  vm.$el.click()
  vm.$nextTick(done => {
   expect(result).to.be.exist
   expect(result.ClickNum).to.equal(1)
   expect(result.ResultNum).to.be.equal(21)
   done()
  })
})

輸出結果

click.vue

  √ 測試按鈕點選事件
√ 測試建立Vue物件

其他

所有範例程式碼都放Github倉庫中方便查看。如果想查看更多好的測試案例,建議配合 Util.js 看一下 Element 的單元測試腳本的寫法,裡面有很多測試腳本可以供我們學習。作為廣大Vue用戶使用的UI元件庫,測試腳本肯定也寫很不錯的~甚至可以將這些腳本照抄一遍,相信這會對學習Vue組件的單元測試有很大幫助。

下面是本人看Element單元測試的筆記,供參考。

Util.js 方法包含了大多数Vue组件化的测试需求。

vm.$el vm.$nextTick 和 vm.$ref 都是在测试过程中比较常用的一些Vue语法糖。

需要注意: vm.$nextTick 方法是异步的,所以需要在里面使用done方法。

异步断言,方法参数需要是 _ 或者 done

大多数时候查询元素通过 querySelector 方法查询class获得

vm.$el.querySelector(&#39;.el-breadcrumb&#39;).innerText

大多数情况下查询是否存在某个Class通过 classList.contains 方法获得,查找的结果为 true 或 false

vm.$el .classList.contains(&#39;el-button--primary&#39;)

异步测试必须以 done() 方法结尾。setTimeout 和 vm.$nextTick 是常用的异步测试。

实现按钮点击:通过获取按钮元素 btn,执行 btn.click() 方法实现。

由于 Vue 进行异步更新DOM 的情况,一些依赖DOM更新结果的断言必须在 Vue.nextTick 回调中进行。

triggerEvent(vm.$refs.cascader.$el, &#39;mouseenter&#39;);
vm.$nextTick(_ => {
   vm.$refs.cascader.$el.querySelector(&#39;.el-cascader__clearIcon&#39;).click();
   vm.$nextTick(_ => {
    expect(vm.selectedOptions.length).to.be.equal(0);
    done();
   });
});

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在mint-ui中使用时间插件及获取选择值

VUE2实现二级省市联动选择

使用react实现分页组件

以上是詳細講解Vue單元測試中Karma+Mocha的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn