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

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 生命周期钩子在 before 组件钩子之前调用，因此您的 msg 分配被组件覆盖（请参阅 mixin 合并 docs）。

例如，如果您将 mixin 中的 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);
  });
});