How to mock lifecycle hooks with vue-test-utils

Question

Method one:

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

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

and method two:

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

localVue = createLocalVue()
localVue.mixin(mixin)

mount(TestComponent, {
  localVue
})

both methods not work for me. I get an error: 'Cannot read property 'props' of undefined' on development environment and on CodeSandbox. https://codesandbox.io/s/4031x2r769

How to correctly mock lifecycle hooks?

tony19 · Accepted Answer · 2022-07-16 01:19:24Z

1

Your examples in question are correct but your CodeSandbox mixin syntax is incorrect(it should be an object). But main problem is that mixin lifecycle hooks are called before component ones, so your msg assignment is overwritten by component(see mixin merging docs).

If you change created in mixin to mounted for example then it will be passed, because HelloWorld does not change msg field in that hook(or hook does not exist).

There is my fixed test code from 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);
  });
});

edited Jul 16, 2022 at 1:19

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 11, 2018 at 10:26

Max Sinev

6,0192 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DenniLa2 Over a year ago

I added mounted method to the component and it is not overriden by mixin

Max Sinev Over a year ago

Mixin can not override component lifecycle hook, it just call before component one. I added mounted hook to mixin in example because mouted invoked later than created hook of component.

nicoramirezdev Over a year ago

Not an answer for this question.

Collectives™ on Stack Overflow

How to mock lifecycle hooks with vue-test-utils

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related