У меня есть компонент, в который добавляется группа полей (метка, ввод и ошибки). Элемент ввода импортируется динамически в соответствии с опорой (settings.input.component), которую он получает от родительского компонента.

И я хотел протестировать этот компонент, чтобы понять, правильно ли ведет себя и выполняет ли задуманное.

Проблема в том, что я не могу имитировать импорт входного компонента, и поэтому, когда я ищу элемент, он не существует.

Есть ли у вас какие-либо предложения?

компонент - импорт динамический

<template>
    <div class="field position--relative">
        <label>
          ....
        </label>
            <component
                :is="inputComponent"
                ...
            />
    </div>
</template>

<script>
export default {
    props: {
        settings: Object
    },
    data () {
        return {
            inputComponent: null,
        };
    },
    ...
    watch: {
        'settings.input.component': {
            immediate: true,
            deep: false,
            async handler ( newComponent ) {
                // get input component
                this.inputComponent = () => import(
                    /* webpackChunkName: '[request]' */
                    `@/components/dynamic/inputs/${newComponent}`
                ).then( chunk => chunk.default || chunk );
            }
        },

    }
};
</script>

Тестовое задание

import { shallowMount, createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import Vuelidate from 'vuelidate';
import { resetState } from '../helpers/index';
import store from '@/store/';
import BaseField from '@/components/bundles/fields/BaseField';

const localVue = createLocalVue();
localVue.use( Vuex );
localVue.use( Vuelidate );

describe( 'components', () => {
    // antes de cada teste, é feito
    // o reset a store
    beforeEach( resetState );
    describe( 'fields', () => {
        it( 'add field to store', () => {
            // define settings of component
            const wrapper = shallowMount( BaseField, {
                propsData: {
                    settings: {
                        input: {
                            component: 'InputBasic'
                        },
                    }
                },
            });

            // find input
            const input = wrapper.find( 'input' );

            console.log( input );
            console.log( wrapper.html() );
        });
    });
});

результат