vue.js - 浅山深一层
问题描述
我目前正在开发一个 Vue.Js 项目,我们有很多这样编写的模态组件:
<template>
<div class="root">
<MyModal width="650px" height="300px" :hasShadow="false">
... some logic that needs to be tested.
</MyModal>
</div>
</template>
<script> ... </script>
<style scoped> ... </style>
所以本质上,我要测试的 HTML 逻辑是一层深的,这意味着我不能使用 vue-test-util shallowMount。它只会删除 MyModal 组件。
有没有一种方法可以让我获取 vue 文件本身的纯 HTML?我正在考虑仅解析该<MyModal>...</MyModal>
部分并以这种方式对其进行测试:
let myModalHtmlString = getHtmlString(myComponent);
component = shallowMount(myComponent, {
propsData: myPropsData,
store: myStore,
template: myModalHtmlString
});
本质上,我正在寻找getHtmlString()
上面的工作方式。
解决方案
如果您查看 vue-test-utils 的文档,您可以阅读到 shallowMount 存根子组件但 mount 没有,因此您可以使用它。无论如何,我不得不质疑你考虑它: - 为什么你只为根 div 和另一个组件创建一个组件,这个 div 真的有必要吗?- 如果您要测试的行为与父组件无关,而是与 MyModal 组件相关,则应在其测试中而不是在父组件之一中测试其标记。
推荐阅读
- javascript - 根据动态表中的另一个选择选项选择选项值
- javascript - 每次点击时按 Amount 增加 div 宽度
- python - 从经理那里获取字典作为全局变量
- angular - 如何在我的 Angular app.module 中导入我的 package.json?
- ruby-on-rails - 如何在 Rails 5 中使用 text_field 发送搜索查询(URL 参数)?
- c# - 检测活动 RDP 会话
- php - 使用数组和 PHP 查找匹配的相等顺序
- angular - 错误 TS2339:“Promise”类型上不存在属性“finally”
' - angular - 如何在 Angular 6 中使用 Observables 而不是 document.querySelector
- java - 引起:org.springframework.data.redis.serializer.SerializationException:无法反序列化;嵌套异常是 org.springframework.core.seriali