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

Question

我有一个名为 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？

Answer 1

我尝试了两者mount()，shallowMount()但没有得到我想要的。我使用了在后台将组件渲染为静态 HTML 的render()方法。包含在包装中。该文档可以在这里找到。vue-server-rendererrender@vue/server-test-utils

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

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