没有合适的资源?快使用搜索试试~ 我知道了~
书接上文,karma+webpack搭建vue单元测试环境介绍了vue单元测试环境搭建及查看源文件的测试覆盖覆盖率。今天来说一下vue单元测试思路和case的写法。测试框架使用jasmine,语法参考。 代码地址:https://github.com/MarxJiao/vue-karma-test/tree/spec-demo 测试关注点 对于vue组件,单元测试测试主要关注以下几点: vue组件加载后,各数据模型是否符合预期 定义的方法是否可用 filter是否可用 带有props的组件,数据能否正常传递 异步更新DOM的情况 组件加载后的状态 要测试组件加载后的状态,
资源详情
资源评论
资源推荐
详解详解Vue单元测试单元测试case写法写法
书接上文,karma+webpack搭建vue单元测试环境介绍了vue单元测试环境搭建及查看源文件的测试覆盖覆盖率。今天来说一
下vue单元测试思路和case的写法。测试框架使用jasmine,语法参考。
代码地址:https://github.com/MarxJiao/vue-karma-test/tree/spec-demo
测试关注点测试关注点
对于vue组件,单元测试测试主要关注以下几点:
vue组件加载后,各数据模型是否符合预期
定义的方法是否可用
filter是否可用
带有props的组件,数据能否正常传递
异步更新DOM的情况
组件加载后的状态组件加载后的状态
要测试组件加载后的状态,首先我们需要将vue组件生成实例。并检测挂载后实例的数据状态。下面是个示例:
我们来看下src/app.vue组件的代码:
<template>
<div>
<h1>{{title}}</h1>
<vc-message :message="message"></vc-message>
</div>
</template>
<script>
import child from './components/child.vue'
export default {
data() {
return {
title: '标题',
message: '这是子组件'
}
},
components: {
'vc-message': child
},
mounted() {
this.title = 'Hello world'
},
methods: {
setMessage(msg) {
this.message = msg;
}
}
}
</script>
组件加载后title的值应该变成’Hello world’,所以我们这样来写测试代码
// 引用vue
import Vue from 'vue';
// 引用要测试的组件
import app from '../../src/app.vue';
// 描述要测试的内容
describe('test app.vue', () => {
// 描述要测试的最小单元
it('组件加载后,title应该是Holle world', () => {
// 这里将app生成vue实例,并使用 $mount() 模拟挂载状态
let vm = new Vue(app).$mount();
weixin_38591615
- 粉丝: 8
- 资源: 908
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0