So we have a Vue.js mixin which is inherited in individual ponents. The mixin has a template that is inherited by a handful of ponents and it works without problems. However, I can't work out how to test the template with vue-test-utils.

This is a simplified example of what I’m doing:

describe('MiMixin', () => {
    let wrapper

    wrapper = mount({
        mixins: [MiMixin]
    })

    it('should set the mixin template as the markup', () => {
        wrapper.find('.mi-ponent').trigger('click')
    })
})

When I run this I get the message:

[vue-test-utils]: find did not return .mi-ponent, cannot call trigger() on empty Wrapper

If I add a render function to the mounted Vue ponent, it just renders any markup that I return (as expected). However, when there is no render method (and therefore no template), the html of the ponent is undefined.

---

Questions:

1. Why does the ‘find’ function not find the template for the mixin?
2. Is it correct to test the mixin in isolation, or is it better to test it in a real ponent?

---

NOTE: The template does seem to exist in the wrapper under VueComponent:

VueWrapper {
    vnode: [Getter/Setter],
    element: [Getter/Setter],
    update: [Function: bound update],
    options: { attachedToDocument: false },
    version: 2.5,
    vm: 
    VueComponent {
     _uid: 0,
     _isVue: true,
     '$options': 
      { ponents: [Object],
        directives: {},
        filters: {},
        _base: [Object],
        _Ctor: [Object],
        beforeCreate: [Object],
        template: '<div class="mi-ponent"> // Template is here </div>'

So we have a Vue.js mixin which is inherited in individual ponents. The mixin has a template that is inherited by a handful of ponents and it works without problems. However, I can't work out how to test the template with vue-test-utils.

This is a simplified example of what I’m doing:

describe('MiMixin', () => {
    let wrapper

    wrapper = mount({
        mixins: [MiMixin]
    })

    it('should set the mixin template as the markup', () => {
        wrapper.find('.mi-ponent').trigger('click')
    })
})

When I run this I get the message:

[vue-test-utils]: find did not return .mi-ponent, cannot call trigger() on empty Wrapper

If I add a render function to the mounted Vue ponent, it just renders any markup that I return (as expected). However, when there is no render method (and therefore no template), the html of the ponent is undefined.

---

Questions:

1. Why does the ‘find’ function not find the template for the mixin?
2. Is it correct to test the mixin in isolation, or is it better to test it in a real ponent?

---

NOTE: The template does seem to exist in the wrapper under VueComponent:

VueWrapper {
    vnode: [Getter/Setter],
    element: [Getter/Setter],
    update: [Function: bound update],
    options: { attachedToDocument: false },
    version: 2.5,
    vm: 
    VueComponent {
     _uid: 0,
     _isVue: true,
     '$options': 
      { ponents: [Object],
        directives: {},
        filters: {},
        _base: [Object],
        _Ctor: [Object],
        beforeCreate: [Object],
        template: '<div class="mi-ponent"> // Template is here </div>'

• javascript
• vue.js
• jestjs
• vue-test-utils
• vue-mixin

Share Improve this question Follow edited Jun 24, 2019 at 11:00 brass monkey 6,7911111 gold badges4343 silver badges6666 bronze badges asked Feb 28, 2018 at 13:01 Jamie McDonaldJamie McDonald 5111 silver badge44 bronze badges 2

• I'd argue you need a sample ponent to test the mixin. This is the only use case I have ever seen (and how the docs mention mixins). If you pass a super simple ponent, it will be pretty much only mixin code anyway. – acdcjunior Commented Feb 28, 2018 at 16:20
• As far as I'm aware the current code does create an empty ponent which inherits the mixin. As it's the first argument for vue-test-util's 'mount', the object should create a new Vue ponent. Please do correct me if I'm wrong. – Jamie McDonald Commented Mar 1, 2018 at 11:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You could pass in a mocked ponent with whatever template you need:

const Component = {
  template: '<div class="mi-ponent"></div>'
};

describe('MiMixin', () => {
    let wrapper

    wrapper = mount(Component, {
        mixins: [MiMixin]
    })

    it('should set the mixin template as the markup', () => {
        wrapper.find('.mi-ponent').trigger('click')
    })
})