Question

方法一：

const mixin = {
  beforeCreate() {
    // do something
  }
}

mount(TestComponent, {
  mixins: [mixin]
})

和方法二：

const mixin = {
  beforeCreate() {
    // do something
  }
}

localVue = createLocalVue()
localVue.mixin(mixin)

mount(TestComponent, {
  localVue
})

两种方法都不适合我。我收到一个错误：开发环境和CodeSandbox上的'无法读取未定义的属性'props'。 https://codesandbox.io/s/4031x2r769

如何正确模拟生命周期挂钩？

Answer 1

您所讨论的示例是正确的，但您的 CodeSandbox 混合语法不正确（它应该是一个对象）。但是主要问题是，mixin生命周期挂钩在组件之前被称为之前，因此您的msg分配被组件覆盖（请参见mixin合并docs）。

例如，如果您将混合中的created更改为mounted，那么它将被传递，因为HelloWorld不会更改该挂钩中的msg字段（或挂钩不会存在）。

我有来自CodeSandbox的固定测试代码：

import { expect } from "chai";
import { mount, createLocalVue } from "@vue/test-utils";
import HelloWord from "../src/components/HelloWorld.vue";

describe("test mocks", () => {
  const localVue = createLocalVue();

  const msg = "from mock";
  let mixin = {
    // change hook to "later" one to  make it work
    mounted() {
      this.msg = msg;
    }
  }

  localVue.mixin(mixin);

  const wrapper = mount(HelloWord, {
    localVue
  });

  it("hook created", () => {
    expect(wrapper.vm.msg).eq(msg);
  });
});

如何使用vue-test-utils模拟生命周期挂钩

1 个答案: