Как имитировать хуки жизненного цикла с помощью vue-test-utils

Метод первый:

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

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

и метод второй:

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

localVue = createLocalVue()
localVue.mixin(mixin)

mount(TestComponent, {
  localVue
})

у меня оба метода не работают. Я получаю сообщение об ошибке: «Не удается прочитать свойство« props »of undefined» в среде разработки и в CodeSandbox. https://codesandbox.io/s/4031x2r769

Как правильно имитировать хуки жизненного цикла?


vue.js vue-test-utils
person DenniLa2    schedule 11.08.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Рассматриваемые примеры верны, но синтаксис миксина CodeSandbox неверен (это должен быть объект). Но основная проблема заключается в том, что хуки жизненного цикла миксина называются перед компонентными, поэтому ваше 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);
  });
});
person Max Sinev    schedule 11.08.2018
comment
Я добавил к компоненту установленный метод, который не отменяется миксином - person DenniLa2; 11.08.2018
comment
Mixin не может переопределить обработчик жизненного цикла компонента, он просто вызывается перед первым компонентом. Я добавил mounted хук в mixin в примере, потому что mouted вызывается позже, чем created хук компонента. - person Max Sinev; 11.08.2018
comment
Не ответ на этот вопрос. - person kamatheuska; 19.12.2019