Question

我正在使用Vue CLI生成的webpack模板，并且一直在尝试添加一些单元测试。并且已经提供了示例并且它完美地运行：

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要仔细检查，它确实给了它想要的结果：{{ 1}}

有人可以帮我解决发生的事情以及如何解决问题吗？我已经尝试过解决方案here但仍无法使其正常工作。

供您参考，以下是undefined的样子：

Hello.vue

Answer 1

原来模板实际上是使用chai而不是jasmine进行单元测试。

在这种情况下，

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

或

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

都工作。

Answer 2

对我来说 to.be 或 toBe 不起作用。相反，我以下列方式使用 .equal （以获得组件方法的返回）：

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

describe('SingleTask.vue', () => {
   it('should return true', () => {
     const Constructor = Vue.extend(SingleTask)
     const vm = new Constructor().$mount()

     expect(vm.forUnitTest()).equal(true);
   })
})

这对我有用

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

2 个答案: