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

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 传递给包装器。有什么办法可以在 beforeEach 中浅挂载组件，然后传递 prop 吗？

谢谢！

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 组件来干燥代码？

How can I DRY up the code by shallowMounting the vue component in the beforeEach hook?

javascript

vue.js

jestjs

vue-test-utils