[英]Testing Vue.js Component
I'd like to test a Vue.js component, and I'm failing at that. 我想测试一个Vue.js组件,但我失败了。 Simply put, I'm setting a component property, and I want to assert that it is set correctly.
简单地说,我正在设置一个组件属性,我想断言它设置正确。 If that matters, the module is loaded with exports, and the JS is output using Webpack.
如果这很重要,模块将加载导出,并使用Webpack输出JS。
// component
exports = module.exports = {};
module.exports = {
data: function () {
return {
active: false
};
},
methods: {
'close': function () {
console.log(this.active); // -> true
this.active = false;
console.log(this.active); // -> false
}
}
};
// component-test
var modal = require('../../resources/src/js/components/_component.js');
var assert = require('assert');
describe('close()', function () {
beforeEach(function () {
modal.data.active = true;
});
it('should set modal to inactive', function () {
console.log(modal.data.active); // -> true
modal.methods.close();
console.log(modal.data.active); // -> true
assert.equal(modal.data.active, false);
});
});
This should give you a hint on how to load vue components when testing; 这应该给你一个关于如何在测试时加载vue组件的提示;
var modalComponent = require('../../resources/src/js/components/_component.js');
var assert = require('assert');
//load the component with a vue instance
vm = new Vue({
template: '<div><test v-ref:test-component></test></div>',
components: {
'test': modalComponent
}
}).$mount();
var modal = vm.$refs.testComponent;
describe('close()', function () {
beforeEach(function () {
modal.active = true;
});
it('should set modal to inactive', function () {
console.log(modal.active); // -> true
modal.close();
console.log(modal.active); // -> false
assert.equal(modal.active, false);
});
});
https://github.com/eddyerburgh/avoriaz现在是Vue.js的官方测试库,检查有关设置在组件上进行断言的文档https://eddyerburgh.gitbooks.io/avoriaz/content/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.