AsyncComponent and props

[tkalmar]

Hi,

i have an component with:

export default defineComponent({
    name: 'Parent',
    components: {
      AsyncChild defineAsyncComponent(
        () => import('AsyncChild.vue'),
      ),
    },

when testing all props of child are converted to attributes
so instead of

const child = parentWrapper.getComponent(ASYNCChild);
expect(child.props('childProp')).toBe('12345');

i have to do:

const child = parentWrapper.getComponent(ASYNCChild);
expect(child.attributes('child-prop')).toBe('12345');

i can work with this but it would be much nicer to get the props as with an sync component ...
am i doing something wrong?

[cexbrayat]

Can you provide us a small repro online using https://stackblitz.com/github/vuejs/create-vue-templates/tree/main/typescript-vitest?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts ?

It only takes a few minutes, and we'll be able to take a look

[tkalmar]

https://stackblitz.com/edit/github-rplvad?file=src%2Fcomponents%2F__tests__%2FHelloWorld.spec.ts is the reproducer

[cexbrayat]

As you're using shallowMount this is expected.

If you use shallowMount then VTU will replace the async component with a stub component and will write the props as attributes.

If you want to use the real component, then you have to use mount and do as @freakzlike showed below 👍

[tkalmar]

why is the async component stubbed differently? when a "normal" component is used then the stub has all props ...

[cexbrayat]

Oh interesting, I didn't noticed there was a difference between sync and async components. I don't think this should be the case, so maybe there is an issue.

Would you like to try to open a PR to fix this? A good way to start would be to add a unit test reproducing the issue, and then I think the issue is in stubComponentTransformer.ts if you want to take a look.

[tkalmar]

The Problem is somewhere around here:
https://github.com/vuejs/test-utils/blob/main/src/vnodeTransformers/stubComponentsTransformer.ts#L103
the stub is created without the ComponentOptions resolved from the async component. At the moment i have no idea how to solve this, but maybe this helps. If i look at the props here: https://github.com/vuejs/test-utils/blob/main/src/vnodeTransformers/stubComponentsTransformer.ts#L130 then they are correctly resolved but this is to late, as the stub is already created without the props

[freakzlike]

If I get your issue right, you need to wait for the async component to load

const parentWrapper = mount(ParentComponent);
await flushPromises();
const child = parentWrapper.getComponent(ASYNCChild);
expect(child.props('childProp')).toBe('12345');

For vitest you need to add one more function:

const parentWrapper = mount(ParentComponent);
await flushPromises();
await vi.dynamicImportSettled();
const child = parentWrapper.getComponent(ASYNCChild);
expect(child.props('childProp')).toBe('12345');

[tkalmar]

Ok works with mount as expected, but not with shallowMount. Can't i use shallowMount in this context?