title: How do you test a Vue.js mixin's template?
body: <p>So we have a Vue.js mixin which is inherited in individual components. The mixin has a template that is inherited by a handful of components and it works without problems. However, I can't work out how to test the template with vue-test-utils.</p>
  
  <p>This is a simplified example of what I’m doing:</p>
  
  <pre><code>describe('MiMixin', () =&gt; {
      let wrapper
  
      wrapper = mount({
          mixins: [MiMixin]
      })
  
      it('should set the mixin template as the markup', () =&gt; {
          wrapper.find('.mi-component').trigger('click')
      })
  })
  </code></pre>
  
  <p>When I run this I get the message:</p>
  
  <pre><code>[vue-test-utils]: find did not return .mi-component, cannot call trigger() on empty Wrapper
  </code></pre>
  
  <p>If I add a render function to the mounted Vue component, 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 component is undefined.</p>
  
  <hr>
  
  <p>Questions:</p>
  
  <ol>
  <li>Why does the ‘find’ function not find the template for the mixin?</li>
  <li>Is it correct to test the mixin in isolation, or is it better to test it in a real component?</li>
  </ol>
  
  <hr>
  
  <p><strong>NOTE:</strong> The template does seem to exist in the wrapper under VueComponent:</p>
  
  <pre><code>VueWrapper {
      vnode: [Getter/Setter],
      element: [Getter/Setter],
      update: [Function: bound update],
      options: { attachedToDocument: false },
      version: 2.5,
      vm: 
      VueComponent {
       _uid: 0,
       _isVue: true,
       '$options': 
        { components: [Object],
          directives: {},
          filters: {},
          _base: [Object],
          _Ctor: [Object],
          beforeCreate: [Object],
          template: '&lt;div class="mi-component"&gt; // Template is here &lt;/div&gt;'
  </code></pre>