javascript - 捕获单元测试所需属性的 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 钩子(Hook) (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);
});

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