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

Question

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

我将 Karma 与 Mocha + Chai 一起使用，并将 PhantomJS 用作浏览器。

我的测试命令cross-env BABEL_ENV=test karma start client/test/unit/karma.conf.js --single-run

如果您需要查看 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()
    })
  })
})

问题在于，无论“它应该根据输入中的上下文创建输入”测试是expect...to.be.null 还是expect...to.not.be.null，测试在 Karma 中都显示为“通过”。

期望...to.be.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

期望...to.be.not.null

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 的错误日志 strong> 测试（因为那是现实状态 - 结果不为空）。

ERROR LOG: '[Vue warn]: Error in nextTick: "AssertionError: expected <input placeholder="" id="test" type="text"> to be null"'
ERROR LOG: AssertionError{message: 'expected <input placeholder="" id="test" type="text"> to be null', showDiff: false, actual: <input placeholder="" id="test" type="text">, expected: undefined, stack: '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_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', line: 243, sourceURL: 'http://localhost:9876/absolute/home/calebjay/Documents/internal-admin/node_modules/chai/chai.js?40e7aa72e9665366bfd82579520de4fb0754dfae'}

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

Answer 1

这可能是也可能不是您的问题的原因，但它仍然是一个值得修复的错误。如果您的测试包含异步操作（在本例中为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();
    })
  })