如何使用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 语法不正确（它应该是一个对象）。但主要问题是 mixin 生命周期钩子在组件生命周期钩子之前调用，因此您的msg分配会被组件覆盖（请参阅 mixin 合并文档）。

例如，如果您将createdmixin 更改为，那么它将被传递，因为不会更改该钩子中的字段（或钩子不存在）。mountedHelloWorldmsg

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);
  });
});