vuejs / vuejs/test-utils

Behavior of global.components is confusing

Open
#845 6 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

I'm struggling to understand the reasoning, why global.components perform two things simultaneously:

  • registers global components (this is perfectly fine)
  • acts as global.stubs, but just for component we are mounting

Second one is provided by this piece of code inside mount:

  if (isObjectComponent(component)) {
    component.components = { ...component.components, ...global.components }
  }

where global.components effectively overwrite local components.

I find this behavior super-confusing:

  • now we have two approaches for stubbing components, and one of them (via global.components) will work only for components, who use Options API
  • relationship between global.stubs and global.components becomes hard-to-explain

For example this test looks super-confusing unless you know what is happening [source]:

 it('allows global stubs to be deactivated without warning', () => {
    const GlobalComponent = {
      template: '<div>Global</div>'
    }
    const spy = jest.spyOn(console, 'warn')
    const wrapper = mount(
      {
        template: '<div><global-component/></div>'
      },
      {
        global: {
          components: {
            GlobalComponent
          },
          stubs: { GlobalComponent: false }
        }
      }
    )

You're like: ...em... what? I'm unstubbing GlobalComponent by passing GlobalComponent: false, but why it is stubbed, we're not using shallowMount?

I see no added benefits in current behavior and would like to suggest dropping it, and matching global.components application API app.component behavior - it simply registers component as global one and nothing more

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 with the mount implementation and the linked global-stubs test, especially the global.components merge shown in the issue. Review how global.components and global.stubs interact, then determine the intended API behavior with maintainers. Done means global component registration no longer implicitly stubs mounted components and the related tests describe the revised behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, testing-qa
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.