Как тестировать компоненты с динамическим импортом в vue-test-utils и jest - PullRequest
Новая
       40

Как тестировать компоненты с динамическим импортом в vue-test-utils и jest

0 голосов
/ 06 октября 2018

Я тестирую компонент, который динамически импортирует дочерние компоненты.Вот скриншот этого раздела

Inside Parent.vue

Inside Parent.vue

Ошибка

enter image description here

Работает нормально для обычного импорта, но не для динамического асинхронного импорта.Кто-нибудь может помочь с настройкой Jest для поддержки импорта асинхронных компонентов?

1 Ответ

0 голосов
/ 25 февраля 2019

Если проблема все еще актуальна (я не нашел прямого ответа), попробуйте «заглушить» компоненты, которые должны быть импортированы.

Компонент 

<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, но в любом случае это следует делать в отдельных тестах.

...