Bug: Props detection broken with jest since 2.4.2 (works in 2.4.1)

[sawmurai]

Describe the bug Since upgrading from 2.4.1 props are no longer properly detected if the component is imported from a SFC. Please see the reproducer linked below.

The following error is shown if I run the tests:

❯ jest
 FAIL  src/components/HelloWorld.spec.ts
  ● Test suite failed to run

    src/components/HelloWorld.spec.ts:13:26 - error TS2339: Property 'msg' does not exist on type '{ key?: string | number | symbol | undefined; ref?: VNodeRef | undefined; ref_for?: boolean | undefined; ref_key?: string | undefined; onVnodeBeforeMount?: VNodeMountHook | VNodeMountHook[] | undefined; ... 6 more ...; style?: unknown; } & Partial<...> & Omit<...>'.

    13   expect(wrapper.props().msg).toBe('Hello world');
                                ~~~

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.625 s
Ran all test suites.

To Reproduce

https://stackblitz.com/edit/vitejs-vite-wdomed?file=src%2Fcomponents%2FHelloWorld.spec.ts

Expected behavior Prop is still detected, or at least "ignored".

Related information:

System: OS: Linux 5.0 undefined CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 0 Bytes / 0 Bytes Shell: 1.0 - /bin/jsh npmPackages: @vue/test-utils: ^2.4.5 => 2.4.5 jest: ^29.7.0 => 29.7.0 vue: ^3.4.21 => 3.4.21

Additional context

[cexbrayat]

Hi @sawmurai

Thanks for the repro. I think the regression occurred between v2.4.1 and v2.4.2 no? Because v2.4.2 was the release with https://github.com/vuejs/test-utils/commit/1db42c8248c36cbe5d82a92db3a81f1bd1dc6df6 which changed the props() type.

[sawmurai]

You are right of course :) I'll update the issue.

[cexbrayat]

@johnsoncodehk would you mind taking a look at why https://github.com/vuejs/test-utils/commit/1db42c8248c36cbe5d82a92db3a81f1bd1dc6df6 introduced this regression? How should we type props() to avoid that?

cc @alecgibson as well, as the original author of this change

[alecgibson]

Weirdly if I download this repro and run locally in VS Code, it seems fine:

npm run build also works fine

[alecgibson]

It even correctly flags bad props:

and fails npm run build:

❯ npm run build

> vite-vue-typescript-starter@0.0.0 build
> vue-tsc && vite build

src/components/HelloWorld.spec.ts:14:26 - error TS2339: Property 'foo' does not exist on type '{ readonly msg: string; key?: string | number | symbol | undefined; ref?: VNodeRef | undefined; ref_for?: boolean | undefined; ref_key?: string | undefined; onVnodeBeforeMount?: VNodeMountHook | ... 1 more ... | undefined; ... 6 more ...; style?: unknown; } & Partial<...> & Omit<...>'.

14   expect(wrapper.props().foo).toBe('Hello world');
                            ~~~

Found 1 error in src/components/HelloWorld.spec.ts:14

[alecgibson]

Oh I see, npm run build passes, but running jest fails. This feels like a jest misconfiguration, or an issue with the @vue/vue3-jest transformer or its configuration

Edit: or the ts-jest transformer could also be the issue

[cexbrayat]

Thanks for looking into it @alecgibson ! I'll transfer to the vue-jest repo then, as it does feel like a Jest specific issue 👍