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)
Mounted definition was wrong:
mounted () {
console.log(this.$el)
}
why close? how to resolve
Don't use fat arrow function for mounted
Most helpful comment
Don't use fat arrow function for mounted