Webpack: vm.$el.querySelector is not a function

[DarwinniwraD]

logs

INFO LOG: 'Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools'
ERROR LOG: '[Vue warn]: Error in render function: "TypeError: Cannot read property 'getters' of undefined"

(found in <Root>)'
ERROR LOG: TypeError{}
ERROR LOG: '[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'dispatch' of undefined"

(found in <Root>)'
ERROR LOG: TypeError{}

  testBox.vue
    ✗ should render correct contents
    TypeError: vm.$el.querySelector is not a function
        at Context.<anonymous> (webpack:///test/unit/specs/testBox.spec.js:8:31 <- index.js:174106:30)


Chrome 60.0.3112 (Mac OS X 10.12.5): Executed 1 of 1 (1 FAILED) ERROR (0.629 secs / 0.012 secs)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] unit: `cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] unit script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/.npm/_logs/2017-08-11T06_31_21_799Z-debug.log

and the desc file

import Vue from 'vue'
import chartBox from '@/components/testBox'

describe('testBox.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(testBox);
    const vm = new Constructor().$mount();
    const topListItem = vm.$el.querySelector('.col-lg-25')
    expect(topListItem.length)
      .to.equal(7);
  })
})

Thanks!

[LinusBorg]

You have to actually mount to an element.

https://jsfiddle.net/a0c1wm6t/1/

[fjy5314]

求问你一下 你是怎么解决这个问题的

[DarwinniwraD]

同上，你需要先实例一个vue对象，这里面包括你要用到的vuex，都要重新引入，你在src中怎么用的，就在这儿怎么实例 @fjy5314

[Kunigaikstis]

@LinusBorg but this is what the example the webpack template comes with? Would be nice if you'd be able to give a better explanation than that.

[LinusBorg]

@Kunigaikstis you are right, I was mistaken in this. Thanks for double-checking me

The real issue probabl has to do with his component failing in mounted because it tries to call this.$store.dispatch(), but this.$store is undefined.

'[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'dispatch' of undefined"

That is expected if you render a component on its own without a store.

I can only advise to check out how we do it in the vue-test-utils (currently in beta):

https://vue-test-utils.vuejs.org/en/guides/using-with-vuex.html

Without seeing the component in question, there's little more I can say. Since this is a usage question (not a bug), it should be continued on forum.vuejs.org