Webpack: error in unit test vue.js karma (webpack): undefined is not a constructor

[kevguy]

I set up a project using the webpack and everything seems to be going well with the default test:

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

`

Then I follow Vue's documentation (https://vuejs.org/v2/guide/unit-testing.html) and added another test:

it('has a created hook', () => {
  console.log(typeof Hello.created)
  expect(typeof Hello.created).toBe('function')
})

But I got the following error:

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

So it seems like Hello.created gives me an undefined, but as you can see, I also console.log it to double check, and it does give the desired result: function

Can anyone give me some help on what happened and how to fix it? I've already tried the solution here (http://stackoverflow.com/questions/41786049/error-in-unit-test-vue-js-karma-undefined-is-not-a-constructor) and still couldn't make it work.

For your reference, here's how Hello.vue looks like:

<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>

[posva]

the problem is actually the toBe call which is from jasmine. you need to use something like to.be(...) because we're using chai 🙂

[kevguy]

You're right, thank you!

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

or

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

both work!

[posva]

Can you close the issue, please 😛 ?

[jkryanchou]

@posva Excellent Job! I have searched it for a long time on this issue. I build a project based on the CoPilot Admin Template, I met the issue when i tried to add more tests to it. I dont realize that the project use the assert plugins was chai.