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()。

来自Vue Test Utils文档：

mount()：“创建一个Wrapper，其中包含已安装并呈现的Vue组件。”
shallowMount()：“与mount类似，它会创建一个Wrapper，其中包含已安装和渲染的Vue组件，但带有残存的子组件。 “

Answer 2

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

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

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

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

2 个答案: