如何使用 vue-test-utils 在 vue 中模拟和测试 this.$parents

Question

我正在尝试测试一个在其中使用 this.$parents.props 的 vue 组件。

例如

export default class item extends Vue {
  private point = this.$parent.$props.point;
}

我认为我需要模拟 this.$parents.$props 的原因是因为我收到这样的错误。

TypeError: Cannot read property 'point' of undefined

我试过挂载选项 parentComponent，但它抛出一个错误，说“[vue-test-utils]：options.parentComponent 应该是一个有效的 Vue 组件选项对象”。

这是我用于测试的代码。

import Parent from "@/components/Parent.vue";

let wrapper: any;
describe("item.vue", () => {
  it("item vue testing", () => {
    wrapper = mount(item, {
        propsData: {
            num: 1,
        },
        parentComponent: Parent
      });

  });
});

我应该怎么做才能模拟 this.$parent.$props？ 上述测试代码中的错误是什么？

Answer 1

你可以这样嘲笑

    describe("item.vue", () => {
      it("item vue testing", () => {
        wrapper = mount(item, {
            propsData: {
                num: 1,
            },
            parentComponent: Parent
          });
    
        
        //with functions
        wrapper.vm.$parent= jest.fn().mockResolvedValue("return")
        //or property
        wrapper.vm.$parent.$props.point = "value"
      });
    });