How to test components with dynamic imports in vue-test-utils and jest

Question

I am testing a component which dynamically imports the child components. Here a screenshot of that section

Inside Parent.vue

Error

It works fine for normal imports but not with dynamic async import. Can anyone help on how configure Jest to support async component imports?

Lev · Accepted Answer · 2019-02-25 13:09:26Z

5

If problem is still relevant (I didn't found anydirect answer) try to 'stub' components which should be imported.

Component

<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>

Test:

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

You can't test the ComponentOne/ComponentTwo content, but it should be anyway done in separate tests.

edited Feb 25, 2019 at 13:09

answered Feb 25, 2019 at 12:51

Lev

1391 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Maulana Over a year ago

shallowMount automatically stubs all child component, I'm not sure if this approach helps in any way. I'm still getting the same error after trying to shallowMount and explicitly add the stubs.

Heiko Jerichen Over a year ago

It is correct that shallowMount should automatically stub all childs, but adding a specific stub helps.

oomer · Accepted Answer · 2022-09-25 00:03:07Z

0

Did you try using "dynamic-import-node" in you .babelrc ? It seemed to fix dynamic import of child components in a mounted parent for me. I got the pointer from https://github.com/enzymejs/enzyme/issues/1460#issuecomment-355193587

answered Sep 25, 2022 at 0:03

oomer

1793 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to test components with dynamic imports in vue-test-utils and jest

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related