Javascript 如何通过在beforeach钩子中浅装vue组件来干燥代码?

Javascript 如何通过在beforeach钩子中浅装vue组件来干燥代码?,javascript,vue.js,jestjs,vue-test-utils,Javascript,Vue.js,Jestjs,Vue Test Utils,这是我第一次使用Vue测试utils在Vue应用程序中实现一系列单元测试。测试确实有效,但是,我想干掉代码 目前,我正在为每个测试添加以下代码: const wrapper = shallowMount(ConceptForm, { localVue, router, propsData: { conceptProp: editingConcept } }); 让测试看起来像这样 it('shows the ctas if the state is equal to e

这是我第一次使用Vue测试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传递给包装器。有没有什么方法可以让我在beforeach中浅装组件,然后传递道具


谢谢

我认为您可以使用包装器对象的功能实现您想要的。考虑下面的例子:

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

你的问题解决了吗?嘿@etarhan!对不起,我是OOO。我今天要尝试一下(虽然我相信我尝试过)-只是为了确保,我还应该从shallowMount方法调用中删除propsData,对吗?@ilrock如果需要,可以保留初始propsData,以便为每种情况指定一些默认propsData。在测试中,如果需要覆盖指定的默认值,则可以调用setProps。