渲染子组件以在 vue-test-utils 中获取其 html答案

【问题标题】：Render child component to get its html in vue-test-utils渲染子组件以在 vue-test-utils 中获取其 html
【发布时间】：2019-11-14 21:04:03
【问题描述】：

我有一个名为 SuggestiveInput 的父组件，它有一个名为 VueSimpleSuggest 的子组件。我在测试中得到了子组件的存根，而不是它的内容。

所以 SuggestiveInput 组件是这样的：

<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;
  });
});

@vue/test-utils 版本 ^1.0.0-beta.20

vue版本^2.5.19

我得到以下输出：

 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？

【问题讨论】：

标签： vue.js vue-component vue-test-utils

【解决方案1】：

要获取子组件的内容，需要使用mount()，而不是shallowMount()。

来自 Vue Test Utils 文档：

mount()：“创建一个包含已安装和渲染的 Vue 组件的 Wrapper。”
shallowMount()：“与 mount 一样，它创建了一个 Wrapper，其中包含已安装和渲染的 Vue 组件，但带有存根子组件。”

【讨论】：

【解决方案2】：

我尝试了mount() 和shallowMount()，但没有得到我想要的。我使用了render() 方法，它在后台使用vue-server-renderer 将组件呈现为静态HTML。 render 包含在 @vue/server-test-utils 包中。可以在here找到文档。

另一种方法是使用shallowMount，但在测试中，使用wrapper.find(ChildComponent) 访问子组件。

我尝试了这两种方法，它们都正常工作。

【讨论】：