澳门新萄京8522Vue.js学习类别6 —— Vue单元测试Karma+Mocha学习笔记

澳门新萄京8522Vue.js学习类别6 —— Vue单元测试Karma+Mocha学习笔记

Click.vue

详解Vue单元测试Karma+Mocha学习笔记,karmamocha

在动用vue-cli创造项目标时候,会提醒要不要设置单元测试和e贰e测试。既然官方推荐大家利用那三个测试框架,那么大家就先河去读书试行一下他们呢。

简介

Karma

Karma是三个依据Node.js的JavaScript测试实践进度管理工科具(Test
Runner)。该工具在Vue中的重要成效是将品种运作在种种主流Web浏览器进行测试。

换句话说,它是二个测试工具,能让您的代码在浏览器意况下测试。须求它的因由在于,你的代码恐怕是设计在浏览器端实行的,在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>
 <div class="hello">
  <h1 class="hello-title">{{ msg }}</h1>
  <h2 class="hello-content">{{ content }}</h2>
 </div>
</template>

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

Hello.spec.js

import { destroyVM, createTest } from '../util'
import Hello from '@/components/Hello'

describe('Hello.vue', () => {
 let vm

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

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

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

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

输出结果

Hello.vue
  √ 测试获取成分内容
  √ 测试获取Vue对象中数量
  √ 测试获取DOM中是不是存在有个别class

示例二

示范2中大家采纳 createTest 创立测试组件测试点击事件,用 createVue
创设Vue示例对象测试组件 Click 的应用。这里根本能够看下到 createVue
方法的利用。

Click.vue

<template>
 <div>
  初始值为{{ InitNum }}<br>
  点击了{{ ClickNum }}次<br>
  最终结果为{{ ResultNum }}<br>
  <button @click="add">累加{{ AddNum }}</button>
 </div>
</template>

<script>
export default {
 name: 'Click',
 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('result', {
    ClickNum: this.ClickNum,
    ResultNum: this.ResultNum
   })
  }
 }
}
</script>

Click.spec.js

import { destroyVM, createTest, createVue } from '../util'
import Click from '@/components/Click'

describe('click.vue', () => {
 let vm

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

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

 it('测试创建Vue对象', () => {
  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('.el-breadcrumb').innerText

绝大多数意况下询问是或不是留存某些Class通过 classList.contains
方法获得,查找的结果为 true 或 false

vm.$el .classList.contains('el-button--primary')

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

贯彻按键点击:通过获得按钮成分 btn,试行 btn.click() 方法完毕。

鉴于 Vue 进行异步更新DOM 的景色,一些借助DOM更新结果的断言必须在
Vue.nextTick 回调中实行。

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

Vue.js学习连串项目地址:

上述就是本文的整体内容,希望对大家的求学抱有帮忙,也期待大家多多帮忙帮客之家。

在动用vue-cli创设项目标时候,会提示要不要设置单元测试和e二e测试。既然官方推荐我们运用那…

util.js

从Vue官方的demo能够见到,对于Vue的单元测试大家供给将零件实例化为1个Vue实例,临时还亟需挂载到DOM上。

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

以上写法只是简约的获得组件,有的时候候大家供给传递props属性、自定义方法等,还应该有希望大家须要用到第1方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) {}
(三) 然后运维
npm run unit

简介

Vue.js学习体系

由于前端知识碎片化严重,作者期望能够系统化的整治出一套关于Vue的学习连串博客。

Vue.js学习种类壹 ——
vue-router贰学习实行笔记(附DEMO)
Vue.js学习连串贰 ——
vuex学习实施笔记(附DEMO)
Vue.js学习系列三 ——
axios和网络传输相关文化的学习实践
Vue.js学习种类四 ——
Webpack打包工具的利用
Vue.js学习系列五 ——
从VUE-CLI来聊聊ESLint
Vue.js学习种类陆 ——
Vue单元测试Karma+Mocha学习笔记
Vue.js学习连串七 ——
Vue服务器渲染Nuxt学习
Vue.js学习连串捌 ——
Vue源码学习之State学习

在test/unit/specs目录下边创立一个MyComponent.psec.js文件,官方示例:
import Vue from 'vue'
import MyComponent from '@/components/MyComponent.vue'

describe('MyComponent.vue', () => {
  it('计数器在点击按钮时自增', () => {
    // 获取mount中的组件实例
    const vmComponent = new Vue(MyComponent).$mount();
    // 点击之前
    console.log('计数器点击之前的值:' + vmComponent.count);
    // 调用实例中的increment方法,点击计数器
    vmComponent.increment();
    // 点击之后
    console.log('计数器点击之后的值:' + vmComponent.count);
    // 判断最后的count是否为最后对应的值
    expect(vmComponent.count).toBe(1);
  })
})

click.vue
  √ 测试按键点击事件
  √ 测试创立Vue对象

示例二

演示2中我们使用 createTest 创设测试组件测试点击事件,用 createVue
制造Vue示例对象测试组件 Click 的运用。这里根本可以看下到 createVue
方法的选用。
Click.vue

<template>
  <div>
    初始值为{{ InitNum }}<br>
    点击了{{ ClickNum }}次<br>
    最终结果为{{ ResultNum }}<br>
    <button @click="add">累加{{ AddNum }}</button>
  </div>
</template>

<script>
export default {
  name: 'Click',
  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('result', {
        ClickNum: this.ClickNum,
        ResultNum: this.ResultNum
      })
    }
  }
}
</script>

Click.spec.js

import { destroyVM, createTest, createVue } from '../util'
import Click from '@/components/Click'

describe('click.vue', () => {
  let vm

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

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

  it('测试创建Vue对象', () => {
    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对象

一、创建项目

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

参照他事他说加以考查资料

  • 单元测试
  • Chai.js断言库API国语文书档案
  • Element
  • 前端单元测试之Karma景况搭建
  • 前端自动化测试是干嘛的?
  • 测试框架 Mocha
    实例教程
  • Karma官网
纵然把一–>二,则汇合世谬误,举个例子:
expect(vmComponent.count).toBe(1) ---> expect(vmComponent.count).toBe(2); 

作者们看下官方的例证(都用注释来讲南齐码意思了):

npm run unit 奉行进程

  1. 执行 npm run unit 命令
  2. 开启Karma运转条件
  3. 运用Mocha去每种测试用Chai断言写的测试用例
  4. 澳门新萄京8522,在终极展现测试结果
  5. 假定测试成功,karma-coverage 会在 ./test/unit/coverage
    文件夹中变化测试覆盖率结果的网页。
安装到位后,大家得以在档案的次序中找到一下索引:build、config、node_modules、src、static 、test。

示例二

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')  
  })
})

亟待通晓的知识点:

  • 测试脚本都要放在 test/unit/specs/ 目录下。
  • 本子命超情势为 [组件名].spec.js
  • 所谓断言,正是对组件做一些操作,并预见爆发的结果。假设测试结果与断言一样则测试通过。
  • 单元测试暗中同意测试 src 目录下除了 main.js 之外的享有文件,可在
    test/unit/index.js 文件中期维修改。
  • Chai断言库中,to be been is that which and has have with at of same
    那么些语言链是未有意义的,只是方便明白而已。
  • 测试脚本由两个 descibe 组成,每个 describe 由多个 it 组成。
  • 领会异步测试

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
});
(1) 大家演示一个最主题的(官方示例)
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' }
   ]
  }
 })
}

Vue.js学习种类项目地址

本文源码已入账到GitHub中,以供参谋,当然能留给三个star更加好啊
https://github.com/violetjack/VueStudyDemos

好吧,Let’s do it!

您只怕感兴趣的小说:

  • 详解Vue单元测试case写法
  • karma+webpack搭建vue单元测试遭遇的方法言传身教
  • vue二单元测试情形搭建
  • 有关Vue
    Webpack2单元测试示例详解
  • vue项目中加多单元测试的章程

在选用vue-cli创造项指标时候,会唤醒要不要设置单元测试和e二e测试。既然官方推荐我们运用这多少个测试框架,那么我们就动手去学学实行一下他们啊。

总结

上边是Vue的karma配置,轻易注释了下:

实践

地点简介了单元测试的用法,下边来动手在Vue中进行单元测试!

运作结果(准确):

澳门新萄京8522 1

111.png

vm.$el.querySelector('.el-breadcrumb').innerText

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' }
      ]
    }
  })
}
(1) 利用vue-cli来创制vueJS项目,它帮大家包办1切。运转 npm install 来设置注重:
npm install -g vue-cli
vue init webpack projectName

具有示例代码都放Github仓库中有益查看。若是想查看越多好的测试用例,建议配合Util.js 看一下 Element
的单元测试脚本的写法,里面有无数测试脚本得以供我们上学。作为被布满Vue用户使用的UI组件库,测试脚本分明也写很很不错的~以至能够将这几个本子照抄一次,相信那会对读书Vue组件的单元测试有极大帮扶。

自己对测试框架的明白

(3) 实行下边包车型地铁下令,那一个命令将会在本土运营你的施用并在浏览器中开发:
npm run dev

Mocha是多个测试框架,在vue-cli中相称chai断言库达成单元测试。

简介

推荐介绍Vue.js 官方的单元测试实用工具库Vue Test Utils,在这里面你能够学学的更加多。
describe('hooks', function() {

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

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

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

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

 // test cases
});

Mocha

Mocha是二个测试框架,在vue-cli中相称chai断言库落到实处单元测试。
Mocha的常用命令和用法不算太多,看阮一峰先生的测试框架 Mocha
实例教程就足以大概驾驭了。
而Chai断言库能够看Chai.js断言库API国语文书档案,极粗略,多查多用就能够飞快精晓。

三、最后

Mocha和chai

至于笔者

维尔莉特Jack,高效学习前端程序猿,喜欢切磋提升功效的方法,也只顾于Vue前端相关文化的上学、整理。
接待关怀、点赞、斟酌留言~小编将不断出现Vue相关优质内容。

腾讯网今日头条:
http://weibo.com/u/2640909603
掘金:https://gold.xitu.io/user/571d953d39b0570068145cd1
CSDN:
http://blog.csdn.net/violetjack0808
简书:
http://www.jianshu.com/users/54ae4af3a98d/latest\_articles
Github:
https://github.com/violetjack

那一个是汉语官方文书档案:https://vue-test-utils.vuejs.org/zh-cn/。

示范第22中学大家运用 createTest 成立测试组件测试点击事件,用 createVue
创设Vue示例对象测试组件 Click 的应用。这里关键能够看下到 createVue
方法的利用。

其他

具有示例代码都放Github仓库中有益查看。假如想查看越多好的测试用例,提出协作
Util.js 看一下 Element
的单元测试脚本的写法,里面有过多测试脚本能够供大家上学。作为被广大Vue用户选用的UI组件库,测试脚本显明也写很很准确的~以至足以将这几个本子照抄二回,相信那会对学习Vue组件的单元测试有异常的大扶持。

下边是作者看Element单元测试的笔记,供参照他事他说加以考察。

  • Util.js 方法包涵了繁多Vue组件化的测试供给。
  • vm.$el vm.$nextTickvm.$ref
    都以在测试进度中比较常用的一对Vue语法糖。
  • 急需注意: vm.$nextTick 方法是异步的,所以必要在其间使用done方法。
  • 异步断言,方法参数需要是 _ 或者 done
  • 绝大多数时候查询元素通过 querySelector 方法查询class获得
    • vm.$el.querySelector(‘.el-breadcrumb’).innerText
  • 大多数景况下询问是或不是留存某些Class通过 classList.contains
    方法得到,查找的结果为 true 或 false

    • vm.$el .classList.contains(‘el-button–primary’)
  • 异步测试必须以 done() 方法结尾。setTimeoutvm.$nextTick
    是常用的异步测试。
  • 落实按键点击:通过猎取开关成分 btn,执行 btn.click() 方法达成。
  • 由于 Vue 进行
    异步更新DOM
    的图景,一些依附DOM更新结果的断言必须在 Vue.nextTick 回调中举行。

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

单元测试是何许

维基百科:单元测试是针对 先后的微乎其卡片机元
来拓展科学核准的测试专业。程序单元是采取的细小可测试部件。一个单元恐怕是单个程序、类、对象、方法等。
浅显百科:单元测试,是为了测试某二个类的某七个措施是或不是经常办事,而写的测试代码。

npm run unit 施行进度

Karma

Karma是1个基于Node.js的JavaScript测试试行进度管理工科具(Test
Runner)。该工具在Vue中的主要成效是将品种周转在各类主流Web浏览器举办测试。
换句话说,它是多少个测试工具,能让您的代码在浏览器意况下测试。必要它的来头在于,你的代码大概是安顿在浏览器端施行的,在node意况下测试也有一点点bug揭发不出来;其它,浏览器有包容难点,karma提供了一手让您的代码自动在多少个浏览器(chrome,firefox,ie等)蒙受下运维。纵然您的代码只会运作在node端,那么你没有须要用karma。

单元测试的含义

压缩bug、进步代码品质、急速稳固bug、收缩调节和测试时间、放心重构。

<template>
 <div>
  初始值为{{ InitNum }}<br>
  点击了{{ ClickNum }}次<br>
  最终结果为{{ ResultNum }}<br>
  <button @click="add">累加{{ AddNum }}</button>
 </div>
</template>

<script>
export default {
 name: 'Click',
 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('result', {
    ClickNum: this.ClickNum,
    ResultNum: this.ResultNum
   })
  }
 }
}
</script>

示例一

演示一中大家测试了 Hello 组件的种种要素的数码,学习 util.js
destroyVMcreateTest
方法的用法以及怎么样获取目标成分举办测试。获取DOM成分的艺术可查阅DOM
对象教程。
Hello.vue

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

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

Hello.spec.js

import { destroyVM, createTest } from '../util'
import Hello from '@/components/Hello'

describe('Hello.vue', () => {
  let vm

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

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

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

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

输出结果

Hello.vue
  √ 测试获取元素内容
  √ 测试获取Vue对象中数据
  √ 测试获取DOM中是否存在某个class

搭建基于vue框架的单元测试

在创建项目事先,你还索要了然Mocha和Chai。
Mocha是七个 JavaScript
测试框架,就是运转测试的工具。通过它,可以为JavaScript应用增加测试,从而确认保障代码的质量,mocha里的常用命令和用法不算太多,能够看阮老师的《测试框架
Mocha
实例教程》就足以差不离通晓。
Chai是一个 Mocha
能够采纳的断言库,正是决断源码的其实实施结果与预期结果是还是不是同样。具体能够参照《简书·Chai.js断言库API华语文档》。


发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图