Description
Describe the bug
When stubbing child components using the stubs
option, vue-test-utils will not match components against the name they have been registered under, but by the internal name given to them by the Vue compiler.
e.g. If the Example.vue
component is added to a Vue app using app.component('VtuExample', Example)
, stubs : { VtuExample: true }
will not mock the component, but stubs : { example: true }
will.
To Reproduce
- Open the minimal reproduction
- In the terminal, navigate to the
/lib
folder and execute the commandnpm i && npm run build
- In the terminal, navigate to the
/app
folder and execute the commandnpm i && npm test
Expected behavior
Both tests in App.spec.ts
should pass, as the component imported from /lib has been registered and used under the name "HelloWorld", not "hello".
Related information:
System:
OS: macOS 14.7.1
CPU: (8) arm64 Apple M1 Pro
Memory: 139.58 MB / 32.00 GB
Shell: 5.9 - /bin/zsh
npmPackages:
@vue/test-utils: 2.4.6 => 2.4.6
vitest: 1.6.0 => 1.6.0
vue: 3.5.12 => 3.5.12
Additional context
With the increasing prevalence of the Composition API, it is no longer common to manually define a name for each written component (as can be done when using Options API). When you globally register a component using app.component('name', component)
, for all intents and purposes within your code the component is called name
. It's not possible anywhere in your code to use it's internal name to include it in templates. So from a test authors perspective, it is not obvious that the component can't be stubbed using the registered name, but only the Vue compiler generated name.