单元测试

配置和工具

任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用Karma进行自动化测试。它有很多社区版的插件,包括对webpack和browserify的支持。

简单的断言

在测试的代码结构方面,你不必为了可测试在你的组件中做任何特殊的操作。只要导出原始设置就可以

<template>

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

</template>

<script>

export default {

data(){

return {

message:'hello!'

}

},

created(){

this.message ='bye!'

}

}

</script>

当测试的组件时,所要做的就是导入对象和Vue,然后使用许多常见的断言:

//导入vue..js和组件进行测试

import Vue from 'vue'

import MyComponent from 'path/to/MyComponent.vue'

// 这里是一些 Jasmine 2.0 的测试,你也可以使用你喜欢的任何断言库或测试工具。

describe('MyComponent',() => {

//检查原始组件选项

it('has a created hook', () => {

expect(type of MyComponent.created).toBe('function')

})

//评估原始组件选项中的函数的结果

it('sets the correct default data',() => {

expect(type of MyComponent.data).toBe('function')

const defaultData = MyComponent.data()

expect(defaultData.message).toBe('hello!')

})

//检查mount中的组件实例

it('correctly sets the message when created',() => {

const vm = new Vue(MyComponent).$mount(),

expect(vm.message).toBe('bye!')

})

//创建一个实例并检查渲染输出

it('renders the correct message',() => {

const Ctor = Vue.extend(MyComponent)

const vm  = new Ctor().$mount()

expect (vm.$el.textContent).toBe('bye!')

})

})

编写可被测试的组件

很多组件的渲染输出由它的props决定,事实上,如果一个组件的渲染输出完全取决于它的props,那么它会让测试变得简单,就好像断言不同参数的纯函数的返回值。看下面的这个例子:

<template>

<p>{{message}}</p>

</template>

<script>

export default{

props:['msg']

}

</script>

你可以在不同的props中,通过propsData选项断言它的渲染输出:

import Vue from 'vue'

import MyComponent from './MyComponent.vue'

//挂载元素并返回已渲染的文本的工具函数

function getRenderedText(Component,propsData){

const Ctor  = new Vue.extent(Component)

const vm = new Ctor({propsData:propsData}).$mount()

return vm.$el.textContent

}

describe('MyComponent',() => {

it('renders correctly with different props',() => {

expect(getReneredText(MyComponent,{msg:'hello'})).toBe('hello')

expect(getReneredText(MyComponent,{msg:'bye'})).toBe('bye')

})

})

断言异步更新

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

//在状态更新后检查生产的HTML

it('updates the rendered message when vm.message updates',done => {

const vm = new Vue(MyComponent).$mount()

vm.message = 'foo'

//在状态改变后和断言DOM更新前等待一刻

Vue.nextTick(() => {

expect(vm.$el.textContent).toBe('foo')

done()

})

})

vue 单元测试的更多相关文章

  1. Vue单元测试Karma+Mocha

    Vue单元测试Karma+Mocha Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览 ...

  2. 使用Karma、Mocha实现vue单元测试

    Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试.换句话说,它是 ...

  3. Vue 单元测试 使用mocha+jest

    目录 Vue 单元测试 mocha+jest jest 实例 mocha expect方法断言 示例代码 Vue 单元测试 官网:https://vue-test-utils.vuejs.org/zh ...

  4. 使用 Jest 进行 Vue 单元测试

    本文介绍:1.vue-cli3下jest环境的搭建2.vue组件基本的测试方法 环境配置 vue-cli3 的插件使安装流程变得格外简单,通过 vue ui 启动可视化管理系统,在插件栏,点击 ‘添加 ...

  5. Vue单元测试vue2-jest-coverage的package.json 配置

     依赖的版本很重要,不要出错了 devDependencies:{ "babel-core": "^6.26.3", "babel-jest" ...

  6. #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(二)

    学习对vue组件进行单元测试,先参照官网编写组件和测试脚本. 1.简单的组件 组件无依赖,无props 对于无需导入任何依赖,也没有props的,直接编写测试案例即可. /src/testSrc/si ...

  7. Vue.js—单元测试

    Vue.js--测试 这里采用的是Vue官方工具(Vue-CLI)搭建出来的项目,在这个搭建工具中推荐的两种测试分别是 端到端的测试 E2E 单元测试 Unit Test 端到端的测试(E2E) E2 ...

  8. Vue.js——60分钟browserify项目模板快速入门

    概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...

  9. Vue.jsbrowserify项目模板

    Vue.js——60分钟browserify项目模板快速入门   概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定 ...

随机推荐

  1. MFC中设置对话框/窗体大小固定

    对话框:1.响应WM_GETMINMAXINFO消息(设置lpMMI->ptMinTrackSize和lpMMI->ptMaxTrackSize)2.响应消息WM_SYSCOMMAND,屏 ...

  2. [转载][概念]Storage Pool, Private RAID Group, Private LUN

    Storage Pool的起源 ========================== Some time ago, EMC introduced the concept of Virtual Prov ...

  3. Ripple 水波纹效果

    背景+波纹 对于有边界限制的Ripple,我们就需要给他提供一个范围,即添加一个item标签. 如果在一个ripple标签中,添加一个item标签,在item中添加如下属性: [android:dra ...

  4. java页面url传值中文编码&解码

    URL参数中有中文值,传到服务端,在用request.getParameter()方法,得到的常常会是乱码. 这将涉及到字符解码操作,我们在应用中常常会用new String(fieldType.ge ...

  5. 解决 Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:compile (default-compile)

    在项目构建的时候遇到了这样的问题:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:2.3.2:compile ...

  6. 【SSH 基础】SSH框架--struts深入具体解释(一)

    学习了struts,可是对于它的由来,以及为什么使用action和struts.xml的方式而不採用曾经的servlet方式.有些疑问,究竟之前的方式有什么弊端,struts又给我们带来了什么便利? ...

  7. PHP的错误处理方式(开发和上线)

    对于PHP开发人员来说,一旦某个产品投入使用.应该马上将 display_errors选项关闭.以免由于这些错误所透露的路径.数据库连接.数据表等信息而遭到黑客攻击. 可是.不论什么一个产品在投入使用 ...

  8. Android -- Messenger与Service

    如果你需要你的service和其他进程通信,那么你可以使用一个Messenger来提供这个接口. 这种方法允许你在不使用 AIDL的情况下,进行跨进程通信IPC. 实现步骤 下面是一个如何使用 Mes ...

  9. Thinkphp学习笔记6-redirect 页面重定向

    ThinkPHP redirect 方法可以实现页面的重定向(跳转)功能.redirect 方法语法如下: $this->redirect(string url, array params, i ...

  10. RS报表设计采用Total汇总过滤出错

    错误信息: DMR 子查询计划失败,并产生意外错误.: java.lang.NullPointerException 如图 原因是在RS过滤器中添加了: total([门诊人次] for [明细科室] ...