单元测试 vue.js 业力中的错误：未定义不是构造函数（）

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')
  })
})