如何在 vue-test-utils 和 jest 中使用动态导入测试组件

Question

我正在测试一个动态导入子组件的组件。这是该部分的屏幕截图

在 Parent.vue 中

错误

它适用于正常导入，但不适用于动态异步导入。谁能帮忙配置 Jest 以支持异步组件导入？

Answer 1

如果问题仍然相关（我没有找到任何直接答案）尝试“存根”应该导入的组件。

组件

<template>
    <div>
        <dynamic-imported-component-one id="componentOne"></dynamic-imported-component-one>
        <dynamic-imported-component-two id="componentTwo"></dynamic-imported-component-two>
    </div>
</template>
<script>
    const ComponentOne = resolve => import(/* webpackChunkName: "views/view-ComponentOne-vue" */ '../Components/ComponentOne.vue');
    const ComponentTwo = resolve => import(/* webpackChunkName: "views/view-ComponentTwo-vue" */ '../Components/ComponentTwo.vue');

    export default {
        components: {
            'dynamicImportedComponentOne': ComponentOne,
            'dynamicImportedComponentTwo': ComponentTwo }
    }
</script>

测试：

describe('SomeComponent.vue', () => {

    const stubs = {
        dynamicImportedComponentOne: '<h3>Stubbed component one</h3>',
        dynamicImportedComponentTwo: '<h3>Stubbed component one</h3>'
    }

    it('test for SomeComponent', () => {
        const wrapper = shallowMount(SomeComponent, { stubs });

        expect(wrapper.find('#componentOne').exists()).toBeTruthy();
        expect(wrapper.find('#componentTwo').exists()).toBeTruthy();
    });
});

您无法测试 ComponentOne/ComponentTwo 内容，但无论如何都应该在单独的测试中完成。