渲染儿童组件以在Vue-Test-Utils中获得其HTML

Question

我有一个称为suspiveInput的父组件，并且它具有称为vuesimplesuggest的子组件。我在测试中获得了儿童组件而不是其内容。

因此，SosusiveInput组件就像：

<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()，但没有得到我想要的。我使用了render()方法，该方法在引擎盖下使用vue-server-renderer将组件渲染为静态HTML。render包含在@vue/server-test-utils软件包中。该文档可以在这里找到。

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

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

Answer 2

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

来自VUE测试utils文档：

• mount((："创建一个包含已安装和渲染的vue组件的Wrapper。"

• shallowmount((："像 mount一样，它创建了一个包含已安装和渲染的vue组件的 Wrapper，但是带有固执的子components 。"

Answer 3

由于VUE3的Vue Test UTITS取出了render()，我在他们的文档中找到了这一点，该文档允许您注册任何儿童组件全球源

无需等待 $nextTick() or $ forceupdate((`，如下：

describe("SuggestiveInput", function() {
  let wrapper;
  const localVue = createLocalVue();
  beforeEach(function() {
    wrapper = shallowMount(SuggestiveInput, {
      localVue,
      globals: {
          components: { VueSimpleSuggest }
      }
    });
  });
  it("shows input element with Bootstrap style", function() {
    expect(wrapper.html()).contains("input.form-control").to.be.true;
  });
});