vue.js - 如何为 vue-components 模拟 $parent

Question

我如何为我的规范模拟 $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, {});
  });

Answer 1

parentComponent 安装选项需要一个组件对象:

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

此外，尝试将 vue-test-utils 的版本固定为“^1.0.0-beta.28”。这应该允许您的测试完成，但 clientWidth/Height 仍然是 0x0

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