Vuejs2 Vue.js插槽：<；模板>；标签用作插槽内容-我如何测试它？

我有两个主视图，它们使用一个共享布局组件，该组件有几个命名插槽。在许多情况下，我使用包装

标记传递插槽内容，因为这些标记不会导致不必要的div，这会严重破坏布局。我试图编写测试来测试这两个视图组件

这很好，但在执行

shallowMount（）

测试组件时，我看不到输出中的内容，因此我的所有测试都失败了。执行完整的

mount（）

在这里根本不是一个可行的解决方案，因为组件处于“页面”级别，并且有很多副作用（我无法测试需要测试的交互）。我也尝试过“渲染”作为一种替代方法，但这也没有用，因为我需要测试控制不同组件可见性的重要功能

这是很奇怪的行为

这是接收布局组件的一部分

<template>
    <aside :class="`layout-primary__aside ${this.rootClass}__aside`">
      <data-container :class="`layout-primary__aside__data ${this.rootClass}__aside__data`">
        <slot name="data" />
      </data-container>
      <slot name="aside" />
      <section :class="`layout-primary__cta ${this.rootClass}__cta`">
        <slot name="cta" />
      </section>
    </aside>
</template>

我希望看到这个

<layout-stub rootclass="plan-builder" title="Plan Builder"><data-item-stub label="Total"></data-item-stub> Some random content <branded-cta-tile-stub name="review" backbuttontext="Back a step" breakoutextended="true" buttontext="Review" showback="true" class="cta__tile"></branded-cta-tile-stub></<layout-stub>

---

一些随机内容这是使用
shallowMount
时的预期行为

它将所有子组件及其内容存根。由于
layout
是一个子组件，因此其内容包括模板。因此，当您将模板更改为
div
s时，您可以在快照中看到它们

如果要在快照中获取
布局
组件内容，可以单独测试它，并通过
shallowMount
和
mount
API的
slots
绑定插槽内容，或者使用
mount
这是使用
shallowMount
时的预期行为

它将所有子组件及其内容存根。由于
layout
是一个子组件，因此其内容包括模板。因此，当您将模板更改为
div
s时，您可以在快照中看到它们

如果要在快照中获取
布局
组件内容，可以单独测试它，并通过
shallowMount
和
mount
API的
slots
绑定插槽内容，或者在调用
shallowMount
时使用
mount
，子组件使用空模板存根，并且仅呈现默认插槽

您必须为
布局
提供一个包含命名插槽的模拟，以渲染它们

根据您的问题，我假设MyComponent是您正在测试的组件，并且您希望断言
布局
插槽正在呈现
，
一些随机内容
和
。
如果没有，请改进你的问题，因为我不太清楚。例如，您正在测试的视图组件的名称未知。我叫他们MyComponent

//MyComponent.vue
一些随机内容

//MyComponent.spec.js
从“/MyComponent.vue”导入MyComponent；
从“./DataItem.vue”导入数据项；
从“./BrandedCtaTile.vue”导入BrandedCtaTile；
浅山（MyComponent{
存根：{
布局：{
模板：`
'
}，//使用呈现命名插槽的模拟
DataItem，//如果还希望呈现此组件，请使用真实组件
BrandedCtaTile//Idem
}
});

它将用存根替换布局组件，存根是SUT中唯一的组件。如果不执行此操作，布局组件将不会呈现命名的插槽，而
shallowMount
将仅呈现
布局
组件的默认插槽（=无）。
当调用
shallowMount
时，子组件将使用空模板存根，并且只呈现默认插槽

您必须为
布局
提供一个包含命名插槽的模拟，以渲染它们

根据您的问题，我假设MyComponent是您正在测试的组件，并且您希望断言
布局
插槽正在呈现
，
一些随机内容
和
。
如果没有，请改进你的问题，因为我不太清楚。例如，您正在测试的视图组件的名称未知。我叫他们MyComponent

//MyComponent.vue
一些随机内容

//MyComponent.spec.js
从“/MyComponent.vue”导入MyComponent；
从“./DataItem.vue”导入数据项；
从“./BrandedCtaTile.vue”导入BrandedCtaTile；
浅山（MyComponent{
存根：{
布局：{
模板：`
'
}，//使用呈现命名插槽的模拟
DataItem，//如果还希望呈现此组件，请使用真实组件
BrandedCtaTile//Idem
}
});

它将用存根替换布局组件，存根是SUT中唯一的组件。如果不这样做，布局组件将不会呈现命名的插槽，而
shallowMount
将只呈现
布局组件的默认插槽（=无）。
您误解了问题-我不是在测试布局组件-我在测试它的父级/使用者，因此，需要测试我正在传递到布局的插槽中的内容。标记不属于“布局”，它们属于父级。问题可能更清楚。您误解了这个问题-我不是在测试布局组件-我在测试它的父级/使用者，因此需要测试我传递到布局插槽中的内容。标签不属于“布局”，它们属于父项。问题可能更清楚。正如其他答案一样，我认为您没有抓住重点。我不是在测试布局组件我是在测试组件
<layout-stub rootclass="plan-builder" title="Plan Builder"><template></template> <template></template> <branded-cta-tile-stub name="review" backbuttontext="Back a step" breakoutextended="true" buttontext="Review" showback="true" class="cta__tile"></branded-cta-tile-stub></<layout-stub>

<layout-stub rootclass="plan-builder" title="Plan Builder"><data-item-stub label="Total"></data-item-stub> Some random content <branded-cta-tile-stub name="review" backbuttontext="Back a step" breakoutextended="true" buttontext="Review" showback="true" class="cta__tile"></branded-cta-tile-stub></<layout-stub>