vue.js找不到元素#app

Question

learning custom plugins, I am trying to test wa virtual DOM

import Vue from 'vue'
import MyPlugin from '@/plugins/MyPlugin'

Vue.use(MyPlugin)

describe('MyPlugin', () => {
  let vm

  beforeEach(() => {
    vm = new Vue({
      template: '<div id="app" class="container" v-demo:hello.a.b="msg"></div>',
      el: '#app',
      data: {
        msg: 'hello!'
      }
    }).$mount()
  })

  it('should run', () => {
    Vue.myMethod()
    console.log('INNER: ', vm.$el.innerHTML)
    expect(true).to.equal(true)
  })
})

but I get an error :

ERROR LOG: '[Vue warn]: Cannot find element: #app'

isn't already defined in the template ??

thanks for feedback

Answer 1

The el property is used to specify the element currently in the DOM to mount the Vue instance to.

You can't specify that element within the Vue instance's template because it needs to mount somewhere on the DOM before it can render.

You need to add an element with id #app to your html outside of your Vue instance and remove the id="app" from the div in its template.