Vue-test-utils: Error in mounted hook: "TypeError: Cannot read property '$el' of undefined"

Created on 18 Oct 2017  路  3Comments  路  Source: vuejs/vue-test-utils

It looks like this is not correctly defined in mounted hook. I've changed the example to reproduce it https://github.com/dwonisch/vue-test-utils-jest-example

<script>
import Message from './Message'

export default {
  name: 'message-toggle',
  data: () => ({
    msg: null
  }),
  methods: {
    toggleMessage() {
      this.msg = this.msg === 'message' ? 'toggled message' : 'message'
    }
  },
  mounted: () => {
    console.log(this.$el)
  },
  components: {
    Message
  }
}
</script>

Error:

console.error node_modules\vue\dist\vue.runtime.common.js:474
  [Vue warn]: Error in mounted hook: "TypeError: Cannot read property '$el' of undefined"
  (found in <Root>)
console.error node_modules\vue\dist\vue.runtime.common.js:561
  TypeError: Cannot read property '$el' of undefined
      at VueComponent.mounted (C:\WORKSPACE\prototypes\vue-test-utils-jest-example\src\components\MessageToggle.vue:27:26)
      at callHook (C:\WORKSPACE\prototypes\vue-test-utils-jest-example\node_modules\vue\dist\vue.runtime.common.js:2699:21)
      at mountComponent (C:\WORKSPACE\prototypes\vue-test-utils-jest-example\node_modules\vue\dist\vue.runtime.common.js:2583:5)
      at VueComponent.Object.<anonymous>.Vue$3.$mount (C:\WORKSPACE\prototypes\vue-test-utils-jest-example\node_modules\vue\dist\vue.runtime.common.js:7517:10)
      at mount (C:\WORKSPACE\prototypes\vue-test-utils-jest-example\node_modules\vue-test-utils\dist\vue-test-utils.js:1135:8)
      at shallow (C:\WORKSPACE\prototypes\vue-test-utils-jest-example\node_modules\vue-test-utils\dist\vue-test-utils.js:1155:10)
      at Object.<anonymous> (C:\WORKSPACE\prototypes\vue-test-utils-jest-example\test\MessageToggle.spec.js:7:45)
      at Object.asyncFn (C:\WORKSPACE\prototypes\vue-test-utils-jest-example\node_modules\jest-jasmine2\build\jasmine_async.js:124:345)
      at resolve (C:\WORKSPACE\prototypes\vue-test-utils-jest-example\node_modules\jest-jasmine2\build\queue_runner.js:46:12)
      at Promise (<anonymous>)
      at mapper (C:\WORKSPACE\prototypes\vue-test-utils-jest-example\node_modules\jest-jasmine2\build\queue_runner.js:34:499)
      at promise.then (C:\WORKSPACE\prototypes\vue-test-utils-jest-example\node_modules\jest-jasmine2\build\queue_runner.js:74:39)
      at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:169:7)

Most helpful comment

Don't use fat arrow function for mounted

All 3 comments

Mounted definition was wrong:

mounted ()  {
   console.log(this.$el)
}

why close? how to resolve

Don't use fat arrow function for mounted

Was this page helpful?
0 / 5 - 0 ratings

Related issues

benm-eras picture benm-eras  路  3Comments

josephstein picture josephstein  路  4Comments

eddyerburgh picture eddyerburgh  路  4Comments

matt-sanders picture matt-sanders  路  3Comments

jonyoder picture jonyoder  路  3Comments