vuejs / vuejs/test-utils

Bug: `stubs` does not respect globally registered component names

Open
#2,541 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
1.2k
Forks
291
Avg merge
1d 9h
Merged PRs (30d)
18

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

  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.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the reproduction commands in the issue, building /lib and testing /app, then inspect app/src/tests/App.spec.ts. Compare stubbing by the globally registered name with stubbing by the internal component name. Done means both tests in App.spec.ts pass when the component is registered and used under the name "HelloWorld".

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.