我正在尝试在我们的新项目上为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错误日志?
答案 0 :(得分:1)
这可能是您的问题的原因,也可能不是,但它仍然是一个值得修复的错误。如果您的测试包含异步操作(在本例中为nextTick
),则需要声明done
参数,然后在异步操作&amp;&amp;和/或断言完成了。 Chai将检测是否声明了此参数。如果它检测到它,Chai会在调用done()
时知道你的测试已经完成。
done()