Как смоделировать $ parent для vue-компонентов - PullRequest
Новая
       13

Как смоделировать $ parent для vue-компонентов

0 голосов
/ 29 января 2019

Как я могу смоделировать $ parent для моих спецификаций?При использовании shallowMount с моим компонентом, я всегда получаю clientWidth / clientHeight неопределенного.Я уже пытался смоделировать $ parent как объект с $ el в качестве ключа и еще двумя вложенными ключами для clientWidth и clientHeight, но это не работает, как ожидалось.Я не могу понять, как правильно использовать parentComponent.

У меня есть один файловый компонент, как показано ниже: 

<template>
  <img :src="doSomething">
</template>

<script>
export default {
  name: "Foobar",
  data() {
    return {
      size: null
    };
  },
  computed: {
    doSomething() {
      # here is some string concatenation etc.
      # but not necessary for example
      return this.size;
    }
  },
  created() {
    let parent = this.$parent.$el;
    this.size = `size=${parent.clientWidth}x${parent.clientHeight}`;
  }
};
</script>

создание приложения vue выглядит следующим образом: 

import Vue from "vue";
import Foobar from "./Foobar";

const vueEl = "[data-vue-app='foobar']";
if (document.querySelector(vueEl)) {
  new Vue({
    el: vueEl,
    components: {
      "foo-bar": Foobar
    }
  });
}

и комбинация использования slim с моим компонентом выглядит следующим образом: 

div data-vue-app="foobar"
  foo-bar

Это моя тестовая установка: 

import { shallowMount } from "@vue/test-utils";
import Foobar from "@/store/Foobar";

describe("Foobar.vue", () => {
  let component;

  beforeEach(() => {
    component = shallowMount(Foobar, {});
  });

1 Ответ

0 голосов
/ 13 февраля 2019

Опция монтирования parentComponent ожидает объект компонента: 

import Parent from "../Parent.vue";
...
beforeEach(() => {
  component = shallowMount(Foobar, {
   parentComponent: Parent
  });
});

Также попробуйте закрепить версию vue-test-utils на «^ 1.0.0-beta.28».Это должно позволить завершить ваши тесты, но clientWidth / Height все равно будет 0x0

ref: https://vue -test-utils.vuejs.org / api / options.html # parentcomponent

...