PascalCase not working for stubs `config.global.stubs` and Transition / TransitionGroup / Teleport

[lbineau]

Issue

Here is a sample of my testing code as per the documentation https://test-utils.vuejs.org/api/#global-stubs (please pay attention to the PascalCase / kebab-case notations)

Given this simplified Vue component (v-if="true" to simplify the logic)

<Transition>
  <MyComponent v-if="true" />
  <MyOtherComponent v-if="true" />
</Transition>

1. Following the documentation I put all global stubs in PascalCase:

config.global.stubs = {
  MyComponent: true,
  MyOtherComponent: false
}
const wrapper = shallowMount(Component)
expect(wrapper).toMatchSnapshot()

It produces the following result: the Transition slot content is removed while it should not.

<transition-stub name="fade" appear="false" persisted="false" css="true"></transition-stub>

2. By reading another part of the documentation I understood I overrode the Transition stub, so it was considered as a regular Stub due to shallowMount behavior. I added it back to the stub object, as PascalCase as the documentation refers to:

It stubs Transition and TransitionGroup by default.

config.global.stubs = {
  MyComponent: true,
  MyOtherComponent: false,
  Transition: true
}

But the snapshot was still showing the same (no slot content)

<transition-stub name="fade" appear="false" persisted="false" css="true"></transition-stub>

3. After reading the source code I found out that the default stubs are in kebab-case:

config.global.stubs = {
  transition: true,
  'transition-group': true
}

So I needed to convert the transition component to kebab-case

config.global.stubs = {
  MyComponent: true,
  MyOtherComponent: false,
  transition: true
}

The snapshot is now working and showing the slot content

<transition-stub name="fade" appear="false" persisted="false" css="true">
  <my-component-stub></my-component-stub>
  <p>hello from MyOtherComponent</p>
</transition-stub>

Solution

It seems createStubComponentsTransformer is testing both kebab-case and PascalCase for some Vue built-in components (keep-alive / KeepAlive) but not for others transition, transition-group, teleport which are only tested against the kebab-case version.

So the solution would be to apply the same logic as KeepAlive.

Side note

I've solved my issue in a more elegant way by extending the default global stubs object.

config.global.stubs = {
  ...config.global.stubs,
  MyComponent: true,
  MyOtherComponent: false
}

[cexbrayat]

@lbineau Yeah I remember fixing it for KeepAlive when someone opened an issue
Would you like to try and open a PR for the others? That would be a great help. You can do as I did in f69bc37

[lbineau]

Yes of course, I never did a PR on a public repo on Github but I'd like to try 👍