diff --git a/src/vnodeTransformers/stubComponentsTransformer.ts b/src/vnodeTransformers/stubComponentsTransformer.ts index 6a5ce6c6b..629804800 100644 --- a/src/vnodeTransformers/stubComponentsTransformer.ts +++ b/src/vnodeTransformers/stubComponentsTransformer.ts @@ -135,8 +135,9 @@ export function createStubComponentsTransformer({ }: CreateStubComponentsTransformerConfig): VTUVNodeTypeTransformer { return function componentsTransformer(type, instance) { // stub teleport by default via config.global.stubs - if (isTeleport(type) && 'teleport' in stubs) { - if (stubs.teleport === false) return type + if (isTeleport(type) && ('teleport' in stubs || 'Teleport' in stubs)) { + if ('teleport' in stubs && stubs['teleport'] === false) return type + if ('Teleport' in stubs && stubs['Teleport'] === false) return type return createStub({ name: 'teleport', @@ -160,9 +161,10 @@ export function createStubComponentsTransformer({ // stub transition by default via config.global.stubs if ( (type === Transition || (type as any) === BaseTransition) && - 'transition' in stubs + ('transition' in stubs || 'Transition' in stubs) ) { - if (stubs.transition === false) return type + if ('transition' in stubs && stubs['transition'] === false) return type + if ('Transition' in stubs && stubs['Transition'] === false) return type return createStub({ name: 'transition', @@ -172,8 +174,14 @@ export function createStubComponentsTransformer({ } // stub transition-group by default via config.global.stubs - if ((type as any) === TransitionGroup && 'transition-group' in stubs) { - if (stubs['transition-group'] === false) return type + if ( + (type as any) === TransitionGroup && + ('transition-group' in stubs || 'TransitionGroup' in stubs) + ) { + if ('transition-group' in stubs && stubs['transition-group'] === false) + return type + if ('TransitionGroup' in stubs && stubs['TransitionGroup'] === false) + return type return createStub({ name: 'transition-group', diff --git a/tests/mountingOptions/global.stubs.spec.ts b/tests/mountingOptions/global.stubs.spec.ts index 941a78bf4..29ccbcc2b 100644 --- a/tests/mountingOptions/global.stubs.spec.ts +++ b/tests/mountingOptions/global.stubs.spec.ts @@ -452,6 +452,36 @@ describe('mounting options: stubs', () => { // appear in the html when it isn't stubbed. expect(wrapper.html()).toBe('
') }) + + it('does not stub transition after overriding config.global.stubs', () => { + const Comp = { + template: `
` + } + config.global.stubs = {} + const wrapper = mount(Comp) + + // Vue removes at run-time and does it's magic, so should not + // appear in the html when it isn't stubbed. + expect(wrapper.html()).toBe( + '
' + ) + }) + + it('stub transition after overriding config.global.stubs with Transition: true PascalCase', () => { + const Comp = { + template: `
` + } + config.global.stubs = { + Transition: true + } + const wrapper = mount(Comp) + + expect(wrapper.html()).toBe( + '\n' + + '
\n' + + '
' + ) + }) }) describe('transition-group', () => { @@ -497,6 +527,36 @@ describe('mounting options: stubs', () => { // appear in the html when it isn't stubbed. expect(wrapper.html()).toBe('
') }) + + it('does not stub transition-group after overriding config.global.stubs', () => { + const Comp = { + template: `
` + } + config.global.stubs = {} + const wrapper = mount(Comp) + + // Vue removes at run-time and does it's magic, so should not + // appear in the html when it isn't stubbed. + expect(wrapper.html()).toBe( + '
' + ) + }) + + it('stub transition-group after overriding config.global.stubs with TransitionGroup: true in PascalCase', () => { + const Comp = { + template: `
` + } + config.global.stubs = { + TransitionGroup: true + } + const wrapper = mount(Comp) + + expect(wrapper.html()).toBe( + '\n' + + '
\n' + + '
' + ) + }) }) describe('teleport', () => { @@ -551,6 +611,25 @@ describe('mounting options: stubs', () => { '\n' + '' ) }) + + it('opts in to stubbing teleport with Teleport: true', () => { + const Comp = { + template: `
` + } + const wrapper = mount(Comp, { + global: { + stubs: { + Teleport: true + } + } + }) + + expect(wrapper.html()).toBe( + '\n' + + '
\n' + + '
' + ) + }) }) describe('keep-alive', () => {