Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug: stubs does not respect globally registered component names #2541

Open
EwenDC opened this issue Nov 14, 2024 · 1 comment
Open

Bug: stubs does not respect globally registered component names #2541

EwenDC opened this issue Nov 14, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@EwenDC
Copy link

EwenDC commented Nov 14, 2024

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

  1. Open the minimal reproduction
  2. In the terminal, navigate to the /lib folder and execute the command npm i && npm run build
  3. In the terminal, navigate to the /app folder and execute the command npm 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.

@EwenDC EwenDC added the bug Something isn't working label Nov 14, 2024
@cexbrayat
Copy link
Member

Hi @EwenDC

Thanks for the repro

You can see here how the name is resolved https://github.com/vuejs/test-utils/blob/3988a3161074d3ea6bbcbc57995f4f2829a83b39/src/utils/componentName.ts

If you want to improve this use case, feel free to open a PR, we'll gladly review it! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants