<div
id="app"
>
<!---->
</div>
`;
可以看出来，子组件没有被渲染，这时候针对App.vue的单元测试就从组件树中被完全隔离了。��
测试测试DOM结构结构
通过mount、shallow、find、findAll方法都可以返回一个包裹器对象，包裹器会暴露很多封装、遍历和查询其内部的Vue组件
实例的便捷的方法。
其中，find和findAll方法都可以都接受一个选择器作为参数，find方法返回匹配选择器的DOM节点或Vue组件的
Wrapper，findAll方法返回所有匹配选择器的DOM节点或Vue组件的Wrappers的WrapperArray。
一个选择器可以是一个CSS选择器、一个Vue组件或是一个查找选项对象。
CSS选择器：可以匹配任何有效的CSS选择器
标签选择器 (div、foo、bar)
类选择器 (.foo、.bar)
特性选择器 ([foo]、[foo=”bar”])
id 选择器 (#foo、#bar)
伪选择器 (div:first-of-type)
符合选择器（div > #bar > .foo、div + .foo)
Vue组件：Vue 组件也是有效的选择器。
查找选项对象：
Name：可以根据一个组件的name选择元素。wrapper.find({ name: ‘my-button’ })
Ref：可以根据$ref选择元素。wrapper.find({ ref: ‘myButton’ })
这样我们就可以对DOM的结构进行验证：
describe('Test for Test1 Component', () => {
let wrapper,
vm;
beforeEach(() => {
// wrapper = mount(App);
wrapper = shallow(Test1, {
propsData: {
messages: ['bye'] }
});
});
it('is a Test1 component', () => {
// 使用Vue组件选择器
expect(wrapper.is(Test1)).toBe(true);
// 使用CSS选择器
expect(wrapper.is('.outer')).toBe(true);
// 使用CSS选择器
expect(wrapper.contains('p')).toBe(true)
});
});
还可以进行一步对DOM结构进行更细致的验证：
// exists()：断言 Wrapper 或 WrapperArray 是否存在。
it('不存在img', () = > {
expect(wrapper.findAll('img').exists()).toBeFalsy()
});
// isEmpty()：断言 Wrapper 并不包含子节点。
it('MyButton组件不为空', () = > {
expect(wrapper.find(MyButton).isEmpty()).toBeFalsy()
});
剩余17页未读，继续阅读
weixin_38694141
- 粉丝: 4
- 资源: 960
我的内容管理
展开
最新资源
- Vue实现iOS原生Picker组件：详细解析与实现思路
- Arduino蓝牙小车：参数调试与功能控制
- 百度Java面试精华：200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南：CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略：44步详解流程
- RecyclerView全面解析：替代ListView的新选择
- Android开发：自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发：BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0：Android事件总线详解与实战应用
- Android FileUtil：全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
