javascript - 单元测试错误 vue.js karma : undefined is not a constructor ()

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 引用它们，也许这导致您感到困惑。

解决方案: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')
  })
})