我有一个名为SugestiveInput的父组件，它有一个名为VueSimpleSuggest的子组件。我在测试中获得了子组件的存根，而不是其内容。
所以SugestiveInput组件就像这样：
<template >
<div class="suggestive-input">
<vue-simple-suggest ...>
</vue-simple-suggest>
</div>
</template>
<script>
import VueSimpleSuggest from "vue-simple-suggest";
import "vue-simple-suggest/dist/styles.css";
export default {
name: "suggestive-input",
props: {
...
},
components: {
VueSimpleSuggest
},
...和我的测试文件：
import chai from "chai";
import { createLocalVue, shallowMount } from "@vue/test-utils";
import SuggestiveInput from "@/components/input/SuggestiveInput";
import * as VueTestUtils from "@vue/test-utils";
const expect = chai.expect;
describe("SuggestiveInput", function() {
let wrapper;
const localVue = createLocalVue();
beforeEach(function() {
wrapper = shallowMount(SuggestiveInput, {
localVue,
propsData: {
suggestionList: ["Client One", "Client Two"],
value: ""
}
});
});
it("shows input element with Bootstrap style", function() {
expect(wrapper.html()).contains("input.form-control").to.be.true;
});
});@版本/测试工具版本**^1.0.0-测试版20**
版本版本2019年5月2日^2
我得到了以下输出：
AssertionError: expected '<div data-v-6aad8d64="" class="suggestive-input"><vue-simple-suggest-stub data-v-6aad8d64=""></vue-simple-suggest-stub></div>' to include 'input.form-control'它呈现了子组件的存根。我如何呈现子组件以获得父组件的纯HTML？
3条答案
按热度按时间nwo49xxi1#
我尝试了
mount()和shallowMount()，但没有得到我想要的。我使用了render()方法，该方法在幕后使用vue-server-renderer将组件呈现为静态HTML。render包含在@vue/server-test-utils包中。文档可以在here中找到。另一种方法是使用
shallowMount，但在测试中使用wrapper.find(ChildComponent)访问子组件。两种方法我都试过了，效果都很好。
20jt8wwn2#
要获取子组件的内容，需要使用
mount()，而不是shallowMount()。来自Vue测试实用程序文档：
Wrapper，其中包含已安装和渲染的Vue组件。”mount类似，它创建一个Wrapper，其中包含已装载和呈现的Vue组件，但具有存根子组件。bvn4nwqk3#
由于vue 3的Vue测试实用程序删除了
render()，我在他们的文档中发现了这一点，该文档允许您注册任何子组件全局源无需等待
$nextTick() or$forceUpdate（）'，如下所示：