5

我们正在将一个非常大的项目移植到 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 执行此操作？

4

1 回答 1

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

问题是你不能使用localVue来自 Vue 的测试工具，你必须使用Vue从vue.

于 2019-01-08T12:53:25.303 回答