Question

我第一次使用vue-test-utils在Vue应用程序中实现了一堆单元测试。测试确实有效，但是，我想将代码干燥。

目前，我正在为每个测试添加以下代码：

const wrapper = shallowMount(ConceptForm, {
    localVue,
    router,
    propsData: { conceptProp: editingConcept }
});

使测试看起来像这样

it('shows the ctas if the state is equal to editing', () => {
    const wrapper = shallowMount(ConceptForm, {
        localVue,
        router,
        propsData: { conceptProp: editingConcept }
    });

    expect(wrapper.find('#ctas').exists()).toBe(true)
});

我这样做是因为我需要将此特定的propsData传递给包装器。有什么办法可以在foreEach中将组件浅装到支架上然后通过支柱？

谢谢！

Answer 1

我认为您可以使用包装对象的 setProps 功能来实现所需的功能。考虑以下示例：

let wrapper;
beforeEach(() => {
    wrapper = shallowMount(ConceptForm, {
        localVue,
        router,
        propsData: { conceptProp: editingConcept }
    });
});

it('shows the ctas if the state is equal to editing', () => {
    wrapper.setProps({ conceptProp: editingConcept });
    expect(wrapper.find('#ctas').exists()).toBe(true)
});

如何通过在beforeEach钩子中浅装vue组件来干燥代码？

1 个答案: