Javascript Vue在Karma中显示错误日志，但Karma未显示失败的测试

我正在尝试为我们的新项目编写Vue组件的单元测试

我正在使用Karma和Mocha+Chai以及PhantomJS作为浏览器

我的测试命令

cross-env-BABEL\u-env=test-karma-start-client/test/unit/karma.conf.js——单次运行

如果您需要查看karma conf或组件本身的代码，请告诉我。（我把它删掉了，因为它很长而且很难修剪，我很确定问题不在组件上）

我的测试代码如下：

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

describe('SendEmail.vue', () => {
  it('should render correct contents', (done) => {
    const Constructor = Vue.extend(SendEmail)
    const vm = new Constructor({
      propsData: {
        email: '{{test}}',
        template: {},
      }
    }).$mount()
    expect(vm.$el.querySelector('.section h5').textContent)
    .to.equal('Template Variables')
    done()
  })
  it('should create inputs based off context in input', (done) => {
    const Constructor = Vue.extend(SendEmail)
    const vm = new Constructor({
      propsData: {
        email: '<p> hello bob {{test}} </p>',
        template: {},
      }
    }).$mount()
    vm._watcher.run()
    Vue.nextTick(()=>{
        expect(vm.$el.querySelector('.input-field #test')).to.be.null;
        done()
    })
  })
})

期望…to.be.not.null

 cross-env BABEL_ENV=test karma start client/test/unit/karma.conf.js --single-run

03 01 2018 16:15:50.637:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
03 01 2018 16:15:50.639:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
03 01 2018 16:15:50.665:INFO [launcher]: Starting browser PhantomJS
03 01 2018 16:15:50.949:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket SD3YIlvnm7q7SpXMAAAA with id 69225830

  SendEmail.vue
    ✓ should render correct contents
    ✓ should create inputs based off context in input

PhantomJS 2.1.1 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.053 secs / 0.012 secs)
TOTAL: 2 SUCCESS

cross-env BABEL_ENV=test karma start client/test/unit/karma.conf.js --single-run

03 01 2018 16:15:29.471:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
03 01 2018 16:15:29.473:INFO [launcher]: Launching browser PhantomJS with unlimited concurrency
03 01 2018 16:15:29.509:INFO [launcher]: Starting browser PhantomJS
03 01 2018 16:15:30.105:INFO [PhantomJS 2.1.1 (Linux 0.0.0)]: Connected on socket AIFlufSWBVUaXMD7AAAA with id 50204600

  SendEmail.vue
    ✓ should render correct contents
    ✓ should create inputs based off context in input

PhantomJS 2.1.1 (Linux 0.0.0): Executed 2 of 2 SUCCESS (0.03 secs / 0.019 secs)
TOTAL: 2 SUCCESS

奇怪的是：vue似乎在为失败的断言抛出一个错误，该错误显示为expect…to.be.null测试的错误日志（因为这是实际状态-结果不是null）

错误日志：'[Vue warn]：下一个检查中出现错误：“AssertionError:应为空”
错误日志：AssertionError{消息：“预期为空”，showDiff:false，实际：，预期为：未定义，堆栈：'AssertionError@http：//localhost:9876/absolute/home/calebjay/Documents/internal admin/node_modules/chai/chai.js？40e7aa72e9665366bfd82579520de4fb0754dfae:9320:24
assert@http：//localhost:9876/absolute/home/calebjay/Documents/internal admin/node_modules/chai/chai.js？40e7aa72e9665366bfd82579520de4fb0754dfae:239:31
http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node\ U modules/chai/chai.js？40e7aa72e9665366bfd82579520de4fb0754dfae:1087:16
propertyGetter@http：//localhost:9876/absolute/home/calebjay/Documents/internal admin/node_modules/chai/chai.js？40e7aa72e9665366bfd82579520de4fb0754dfae:7784:33
http://localhost:9876/base/index.js?a3d01b46a2e8d6dea408b15b7f752ca119ad7183:23805:63
http://localhost:9876/base/index.js?a3d01b46a2e8d6dea408b15b7f752ca119ad7183:5405:16
flushCallbacks@http：//localhost:9876/base/index.js？a3d01b46a2e8d6dea408b15b7f752ca119ad7183:5326:14'，行：243，源URL:'http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node \-U modules/chai/chai.js？40e7aa72e9665366bfd82579520de4fb0754dfae'}

---

如何让Karma捕获这些失败的断言并将其显示为失败的测试，而不是将其显示为vue错误日志？

这可能是问题的原因，也可能不是问题的原因，但仍然是一个值得修复的错误。如果测试包含异步操作（在本例中为

nextTick

），则需要声明

done

参数，然后在异步操作和断言完成时调用

done（）

。Chai将检测是否声明了此参数。如果检测到它，Chai将在调用

done（）

时知道您的测试已完成

it('should create inputs based off context in input', done => {
    const Constructor = Vue.extend(SendEmail)
    const vm = new Constructor({
      propsData: {
        email: '<p> hello bob {{test}} </p>',
        template: {},
      }
    }).$mount()
    vm._watcher.run()
    Vue.nextTick(()=>{
        expect(vm.$el.querySelector('.input-field #test')).to.be.null;
        done();
    })
  })

it（'应根据输入中的上下文创建输入'，完成=>{
const Constructor=Vue.extend（发送电子邮件）
const vm=新构造函数({
propsData：{
电子邮件：“你好，鲍勃{{test}
”，
模板：{}，
}
}).$mount（）
vm._watcher.run（）
Vue.nextTick（（）=>{
expect（vm.$el.querySelector（'.input field#test'））.to.be.null；
完成（）；
})
})

谢谢，我一直在尝试将

done（）

设置正确，但没有意识到这是

it（）

函数的参数。然而，我仍然遇到同样的问题。这次测试实际上失败了，但原因是karma“超时”，vue会记录实际的mocha/chai输出（或karma？不确定）。

it('should create inputs based off context in input', done => {
    const Constructor = Vue.extend(SendEmail)
    const vm = new Constructor({
      propsData: {
        email: '<p> hello bob {{test}} </p>',
        template: {},
      }
    }).$mount()
    vm._watcher.run()
    Vue.nextTick(()=>{
        expect(vm.$el.querySelector('.input-field #test')).to.be.null;
        done();
    })
  })