單元測試錯誤vue.js karma（webpack）：undefined不是構造函數

我正在使用Vue的CLI生成的webpack模板，並試圖添加一些單元測試。而例如已經提供和它完美的作品：單元測試錯誤vue.js karma（webpack）：undefined不是構造函數

import Vue from 'vue' 
import Hello from '@/components/Hello' 

describe('Hello.vue',() => { 
    it('should render correct contents',() => { 
    const Constructor = Vue.extend(Hello) 
    const vm = new Constructor().$mount() 
    expect(vm.$el.querySelector('.hello h1').textContent) 
     .to.equal('Welcome to Your Vue.js App') 
    }) 
})

然後我嘗試添加另一個測試，我從Vue公司的文檔直接複製（Documentation link），但奇怪的事情發生了：

// Inspect the raw component options 
it('has a created hook',() => { 
    console.log(typeof Hello.created) 
    expect(typeof Hello.created).toBe('function') 
})

我得到了以下錯誤：

LOG LOG: 'function' 
    ✗ has a created hook 
    undefined is not a constructor (evaluating 'expect((0, _typeof3.default)(_Hello2.default.created)).toBe('function')') 
webpack:///test/unit/specs/Hello.spec.js:16:38 <- index.js:75919:64

所以它看起來像Hello.created給我一個undefined，但你可以看到，我也console.log它仔細檢查，並且它確實給它想要的結果：undefined

誰能給我發生了什麼，以及如何解決它的一些幫助嗎？我已經嘗試瞭解決方案here，但仍無法使其工作。

供您參考，這裏是如何Hello.vue樣子：

<template> 
    <div class="hello"> 
    <h1>{{ msg }}</h1> 
    </div> 
</template> 

<script> 
export default { 
    name: 'hello', 
    data() { 
    return { 
     msg: 'Welcome to Your Vue.js App', 
     message: 'hello!' 
    } 
    }, 
    created() { 
    console.log('oh crap') 
    this.message = 'bye!' 
    } 
} 
</script>

來源

2017-05-10 kevguy

原來的模板實際上是用柴，而不是茉莉花做單元測試。

在這種情況下，

expect(typeof Hello.created).to.equal('function')

或

expect(Hello.created).to.be.a('function')

都工作。

來源

2017-05-15 14:09:55 kevguy

單元測試錯誤vue.js karma（webpack）：undefined不是構造函數

回答

相關問題