vue.js - 浅山深一层

Question

我目前正在开发一个 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()上面的工作方式。

Answer 1

如果您查看 vue-test-utils 的文档，您可以阅读到 shallowMount 存根子组件但 mount 没有，因此您可以使用它。无论如何，我不得不质疑你考虑它： - 为什么你只为根 div 和另一个组件创建一个组件，这个 div 真的有必要吗？- 如果您要测试的行为与父组件无关，而是与 MyModal 组件相关，则应在其测试中而不是在父组件之一中测试其标记。