捕捉 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钩子上（Mocha），如下所示：

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);
});

问题是您不能使用localVueVue 测试工具，您必须使用Vue从 导入的实例vue。