web-dev-qa-db-ja.com

vue-test-utilsを使用してライフサイクルフックをモックする方法

方法1：

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

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

および方法2：

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

localVue = createLocalVue()
localVue.mixin(mixin)

mount(TestComponent, {
  localVue
})

どちらの方法も私にはうまくいきません。エラーが発生します： '開発環境およびCodeSandboxで'未定義のプロパティ 'プロパティ'を読み取れません。 https://codesandbox.io/s/4031x2r769

ライフサイクルフックを正しくモックする方法は？

vue.jsvue-test-utils
6
DenniLa2

問題の例は正しいですが、CodeSandboxミックスイン構文が正しくありません（オブジェクトである必要があります）。しかし、主な問題は、ミックスインライフサイクルフックがbeforeコンポーネントフックと呼ばれるため、msg割り当てがコンポーネントによって上書きされることです（ミックスインマージを参照- 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);
  });
});
1
Max Sinev