error in unit test vue.js karma : undefined is not a constructor ()

问题

This is my first unit test and I'm getting an error message that couldn't find why I get it in the forums so far.

This is my unit test:

import LoginPage from 'src/pages/Login'

describe('Login.vue', () => {
it('mounted is a fuction', () => {
    expect(typeof LoginPage.mounted).toBe('function')
})
})

And this is the login page:

<template>
<div class="">
    <p v-if="$route.query.redirect">
       You need to login first.
    </p>
    <form class="column is-one-third is-offset-one-third" @submit.prevent="login">
    <div class="control">
        <input type="email" placeholder="email" v-model="email" class="input">
    </div>
    <div class="control">
        <input type="password" autocomplete="off" placeholder="password" v-model="pass" class="input">
    </div>
    <div class="control">
        <button class="button is-primary" type="submit">Login</button>
        <a class="button" href="/signup">Sign up</button>
    </div>
    <p v-if="error" class="help is-danger">{{ error }}</p>
</form>
</div>
</template>
<script>
export default {
props: ['state'],
data () {
return {
    email: '',
    pass: '',
    error: ''
  }
},
mounted () {
if (this.state.auth.currentUser) {
    this.$router.replace(this.$route.query.redirect || '/')
}
},
methods: 
{
....//
}
}

and this is the error message that I get :

mounted is a fuction
Login.vue
undefined is not a constructor (evaluating 'expect((0, _typeof3.default)(_Login2.default.mounted)).toBe('function')')
webpack:///test/unit/specs/Component.spec.js:5:42 <- index.js:161:65

Thanks for your help

回答1:

There are two points you are missing here.

Firstly, you won't get methods on a vue component just like that, vue internally proxies the methods, data etc such that they can be referenced via this maybe this led to your confusion.

Solution: componentName.methods.methodName in your case LoginPage.methods.mounted

that changes your code to:

import LoginPage from 'src/pages/Login'

describe('Login.vue', () => {
  it('mounted is a fuction', () => {
    expect(typeof LoginPage.methods.mounted).toBe('function')
  })
})

来源：https://stackoverflow.com/questions/41786049/error-in-unit-test-vue-js-karma-undefined-is-not-a-constructor

标签

javascript

unit-testing

phantomjs

Vue.js

karma-runner