Javascript 单元测试vue.js karma中出错:undefined不是构造函数()

Javascript 单元测试vue.js karma中出错:undefined不是构造函数(),javascript,unit-testing,phantomjs,vue.js,karma-runner,Javascript,Unit Testing,Phantomjs,Vue.js,Karma Runner,这是我的第一次单元测试,我收到一条错误消息,无法找到为什么我在论坛上得到它 这是我的单元测试: import LoginPage from 'src/pages/Login' describe('Login.vue', () => { it('mounted is a fuction', () => { expect(typeof LoginPage.mounted).toBe('function') }) }) <template> <div clas

这是我的第一次单元测试,我收到一条错误消息,无法找到为什么我在论坛上得到它

这是我的单元测试:

import LoginPage from 'src/pages/Login'

describe('Login.vue', () => {
it('mounted is a fuction', () => {
    expect(typeof LoginPage.mounted).toBe('function')
})
})
<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: 
{
....//
}
}
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
这是登录页面:

import LoginPage from 'src/pages/Login'

describe('Login.vue', () => {
it('mounted is a fuction', () => {
    expect(typeof LoginPage.mounted).toBe('function')
})
})
<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: 
{
....//
}
}
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

你需要先登录。

登录 注册

{{error}

导出默认值{ 道具:[“状态”], 数据(){ 返回{ 电子邮件:“”, 通过:“”, 错误:“” } }, 挂载(){ if(this.state.auth.currentUser){ 此.$router.replace(此.$route.query.redirect | |'/) } }, 方法: { ....// } }

这是我收到的错误消息:

import LoginPage from 'src/pages/Login'

describe('Login.vue', () => {
it('mounted is a fuction', () => {
    expect(typeof LoginPage.mounted).toBe('function')
})
})
<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: 
{
....//
}
}
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
挂载是一项功能
Login.vue
undefined不是构造函数(计算'expect((0,_typeof3.default)(_Login2.default.mounted)).toBe('function'))

webpack:///test/unit/specs/Component.spec.js:5:42 这里有两点你遗漏了

首先,您不会像这样在vue组件上获取方法,vue会在内部代理这些方法、数据等,以便通过
this
引用它们,这可能会导致您的混淆

解决方案:
componentName.methods.methodName
在您的案例中
LoginPage.methods.mounted

将代码更改为:

import LoginPage from 'src/pages/Login'

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

不太清楚that@smarber“那”是什么?我的意思是使用toBe和typeof:
expect(typeof MyComponent.data)。toBe('function')
,这不是您要解释的
解决方案:expect(LoginPage.methods.mounted)。toBe('function')或expect(typeof LoginPage.methods.mounted)。to.equal('function')