捕获 Vue.js 单元测试所需属性的警告

Question

我们正在将一个非常大的项目移植到 Vue 中.js并希望随时彻底实现我们的单元测试套件。

我们想验证组件在创建时是否设置了所有必需的属性，我的测试用例如下所示：

describe('Input', () => {
it('fail initialization with no value', () => {
const vm = mount(Input, {
propsData: {},
});
// expecting above to fail due to required prop 'value'
});
});

组件Input应包含属性value。我可以通过发出的控制台警告看到它丢失了，但我们希望在单元测试中捕获它。直接测试这一点没有多大意义，但是一旦我们有组件嵌套多个组件，确保每个组件正确初始化其子组件很重要，这是通过确保我们自己上述测试应该失败并被发现失败来实现的。

但是没有例外，我们已经有想法可以挂入Vue.warnHandler但这似乎只是简单地确认构造函数按预期工作所需的大量工作。

有没有推荐的方法使用 Vue.js 执行此操作？

Answer 1

不幸的是，看起来唯一的方法是钩入Vue.warnHandler

我使用了一个变量并在afterEach钩子(摩卡(上重置它，如下所示：

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实例。