Визуализация дочернего компонента для получения его html в vue-test-utils - PullRequest
Новая
       50

Визуализация дочернего компонента для получения его html в vue-test-utils

0 голосов
/ 04 июля 2019

У меня есть один родительский компонент с именем 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-бета.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 родительского компонента?

1 Ответ

0 голосов
/ 10 июля 2019

Чтобы получить содержимое дочерних компонентов, вам нужно использовать mount(), а не shallowMount().

Из документов Vue Test Utils:

  • mount () : «Создает Wrapper, который содержит смонтированный и обработанный компонент Vue.»

  • shallowMount () : «Like mount, он создает Wrapper, который содержит подключенный и визуализированный компонент Vue, но с дочерними компонентами с заглушками . "

...