Javascript 捕获单元测试所需属性的Vue.js警告
我们正在将一个非常大的项目移植到Vue.js中,并希望在进行过程中彻底实现我们的单元测试套件 我们希望验证组件是否在创建时设置了所有必需的属性,我的测试用例如下所示:Javascript 捕获单元测试所需属性的Vue.js警告,javascript,typescript,vue.js,mocha.js,vue-test-utils,Javascript,Typescript,Vue.js,Mocha.js,Vue Test Utils,我们正在将一个非常大的项目移植到Vue.js中,并希望在进行过程中彻底实现我们的单元测试套件 我们希望验证组件是否在创建时设置了所有必需的属性,我的测试用例如下所示: describe('Input', () => { it('fail initialization with no value', () => { const vm = mount(Input, { propsData: {}, }); // expecting above t
describe('Input', () => {
it('fail initialization with no value', () => {
const vm = mount(Input, {
propsData: {},
});
// expecting above to fail due to required prop 'value'
});
});
组件输入
应包含属性值
。我可以通过发出的控制台警告看到它丢失了,但我们希望在单元测试中发现这一点。直接测试这一点没有多大意义,但一旦我们让组件嵌套多个组件,确保每个组件正确初始化其子组件是很重要的,这是通过确保上述测试应该失败并被发现失败来实现的
但是,也没有例外,我们已经有了一些想法来连接到Vue.warnHandler
中,但这似乎只是为了简单地确认构造函数是否按预期工作而做了大量的工作
使用Vue.js执行此操作有推荐的方法吗?不幸的是,执行此操作的唯一方法似乎是挂接到
Vue.warnHandler
我使用了一个变量,并在每次hook(摩卡)之后在上重置它,如下所示:
let localVue;
let hasWarning = false;
function functionToWrapShallowMount(propsData) {
const Wrapper = shallowMount(Control, {
propsData,
provide: {
$validator: () => {}
},
localVue
});
return Wrapper;
}
before(() => {
localVue = createLocalVue();
Vue.config.warnHandler = () => {
hasWarning = true;
};
});
afterEach(() => {
hasWarning = false;
});
it('throws a warning', () => {
const { vm } = functionToWrapShallowMount({
name: 'foooo',
value: 'bad'
});
vm.name.should.eq('foooo');
hasWarning.should.eq(true);
});
问题是您不能使用Vue测试工具中的localVue
,必须使用从Vue
导入的Vue
实例