javascript - 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 或组件本身的代码，请告诉我。 (我把它省略了，因为它又长又难 trim ，而且我相当确定问题不在于组件)。

我的测试代码如下:

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 的错误日志强> 测试(因为这就是现实状态 - 结果不为空)。

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();
    })
  })