单元测试中的错误vue.js karma：undefined不是构造函数（）

Question

这是我的第一次单元测试，我收到的错误消息无法找到为什么我到目前为止在论坛中得到它。

这是我的单元测试：

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

谢谢你的帮助

Answer 1

你在这里缺少两点。

首先，你不会像这样获得vue组件上的方法，vue在内部代理方法，数据等，以便通过this可以引用它们， this可能会导致你的困惑。

解决方案：您的案例LoginPage.methods.mounted componentName.methods.methodName

将您的代码更改为：

import LoginPage from 'src/pages/Login'

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