Vue在Karma中显示错误日志,但是Karma未显示测试失败

时间:2018-01-04 00:36:17

标签: javascript unit-testing vue.js chai karma-mocha

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

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

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

如果您需要查看业力配置或组件本身的代码,请告诉我。 (我已经把它留了出来,因为修剪它很长很棘手,而且我很确定问题不在于组件)。

我的测试代码如下:

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错误日志?

1 个答案:

答案 0 :(得分:1)

这可能是您的问题的原因,也可能不是,但它仍然是一个值得修复的错误。如果您的测试包含异步操作(在本例中为nextTick),则需要声明done参数,然后在异步操作&amp;&amp;和/或断言完成了。 Chai将检测是否声明了此参数。如果它检测到它,Chai会在调用done()时知道你的测试已经完成。

done()