Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

vm.$el.querySelector is not a function

See original GitHub issue

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! futures-adviser@1.0.0 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 test-test@1.0.0 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!