我想测试一个Vue.js组件,但我失败了.简单地说,我正在设置一个组件属性,我想断言它设置正确.如果这很重要,模块将加载导出,并使用Webpack输出JS.
@H_301_2@// 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);
});
});
解决方法
这应该会给你一个关于如何在测试时加载vue组件的提示;
@H_301_2@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);
});
});
