vue 单元测试
单元测试
配置和工具
任何兼容基于模块的构建系统都可以正常使用,但如果你需要一个具体的建议,可以使用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 单元测试的更多相关文章
- Vue单元测试Karma+Mocha
Vue单元测试Karma+Mocha Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览 ...
- 使用Karma、Mocha实现vue单元测试
Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner).该工具在Vue中的主要作用是将项目运行在各种主流Web浏览器进行测试.换句话说,它是 ...
- Vue 单元测试 使用mocha+jest
目录 Vue 单元测试 mocha+jest jest 实例 mocha expect方法断言 示例代码 Vue 单元测试 官网:https://vue-test-utils.vuejs.org/zh ...
- 使用 Jest 进行 Vue 单元测试
本文介绍:1.vue-cli3下jest环境的搭建2.vue组件基本的测试方法 环境配置 vue-cli3 的插件使安装流程变得格外简单,通过 vue ui 启动可视化管理系统,在插件栏,点击 ‘添加 ...
- Vue单元测试vue2-jest-coverage的package.json 配置
依赖的版本很重要,不要出错了 devDependencies:{ "babel-core": "^6.26.3", "babel-jest" ...
- #单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(二)
学习对vue组件进行单元测试,先参照官网编写组件和测试脚本. 1.简单的组件 组件无依赖,无props 对于无需导入任何依赖,也没有props的,直接编写测试案例即可. /src/testSrc/si ...
- Vue.js—单元测试
Vue.js--测试 这里采用的是Vue官方工具(Vue-CLI)搭建出来的项目,在这个搭建工具中推荐的两种测试分别是 端到端的测试 E2E 单元测试 Unit Test 端到端的测试(E2E) E2 ...
- Vue.js——60分钟browserify项目模板快速入门
概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直 ...
- Vue.jsbrowserify项目模板
Vue.js——60分钟browserify项目模板快速入门 概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题. 首先,这限定 ...
随机推荐
- MFC中设置对话框/窗体大小固定
对话框:1.响应WM_GETMINMAXINFO消息(设置lpMMI->ptMinTrackSize和lpMMI->ptMaxTrackSize)2.响应消息WM_SYSCOMMAND,屏 ...
- [转载][概念]Storage Pool, Private RAID Group, Private LUN
Storage Pool的起源 ========================== Some time ago, EMC introduced the concept of Virtual Prov ...
- Ripple 水波纹效果
背景+波纹 对于有边界限制的Ripple,我们就需要给他提供一个范围,即添加一个item标签. 如果在一个ripple标签中,添加一个item标签,在item中添加如下属性: [android:dra ...
- java页面url传值中文编码&解码
URL参数中有中文值,传到服务端,在用request.getParameter()方法,得到的常常会是乱码. 这将涉及到字符解码操作,我们在应用中常常会用new String(fieldType.ge ...
- 解决 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 ...
- 【SSH 基础】SSH框架--struts深入具体解释(一)
学习了struts,可是对于它的由来,以及为什么使用action和struts.xml的方式而不採用曾经的servlet方式.有些疑问,究竟之前的方式有什么弊端,struts又给我们带来了什么便利? ...
- PHP的错误处理方式(开发和上线)
对于PHP开发人员来说,一旦某个产品投入使用.应该马上将 display_errors选项关闭.以免由于这些错误所透露的路径.数据库连接.数据表等信息而遭到黑客攻击. 可是.不论什么一个产品在投入使用 ...
- Android -- Messenger与Service
如果你需要你的service和其他进程通信,那么你可以使用一个Messenger来提供这个接口. 这种方法允许你在不使用 AIDL的情况下,进行跨进程通信IPC. 实现步骤 下面是一个如何使用 Mes ...
- Thinkphp学习笔记6-redirect 页面重定向
ThinkPHP redirect 方法可以实现页面的重定向(跳转)功能.redirect 方法语法如下: $this->redirect(string url, array params, i ...
- RS报表设计采用Total汇总过滤出错
错误信息: DMR 子查询计划失败,并产生意外错误.: java.lang.NullPointerException 如图 原因是在RS过滤器中添加了: total([门诊人次] for [明细科室] ...