Skip to content

Commit 0c2efe3

Browse files
alecgibsoncexbrayat
authored andcommitted
feat: allow custom <transition> stubs
At the moment, `@vue/test-utils` doesn't allow custom `<transition>` stubs. For example, setting: ```js config.stubs.transition = {template: '<div />'}; ``` ...will still just render the default `@vue/test-utils` stub: ```html <transition-stub appear="false" persisted="false" css="true"> ``` The motivation for this change is that if you're using the `@vue/compat` migration build, these default stubs throw up the following warning: ``` Error: (deprecation ATTR_FALSE_VALUE) Attribute "persisted" with v-bind value `false` will render persisted="false" instead of removing it in Vue 3. To remove the attribute, use `null` or `undefined` instead. If the usage is intended, you can disable the compat behavior and suppress this warning with: configureCompat({ ATTR_FALSE_VALUE: false }) Details: https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html at <Transition> ``` Since `persisted` isn't actually a [boolean HTML attribute][1], and is actually a [prop][2], we want to ignore this false positive, but don't want to disable this warning everywhere (so we can catch *actual* errors). In order to clean up our test warnings, we would like to use a custom `<transition>` stub, which doesn't have these props. This change tweaks the `transition` stubbing logic, and only creates the default stub if `transition === true`. If it's any other truthy value, it falls back to "normal" stubbing behaviour. [1]: https://html.spec.whatwg.org/multipage/indices.html#attributes-3 [2]: https://github.com/vuejs/core/blob/b775b71c788499ec7ee58bc2cf4cd04ed388e072/packages/runtime-core/src/components/BaseTransition.ts#L37
1 parent 211afd8 commit 0c2efe3

File tree

2 files changed

+25
-5
lines changed

2 files changed

+25
-5
lines changed

src/vnodeTransformers/stubComponentsTransformer.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,13 @@ const createDefaultStub = (
7878
if (kebabTag in stubs && stubs[kebabTag] === false) return type
7979
if (pascalTag in stubs && stubs[pascalTag] === false) return type
8080

81-
return createStub({
82-
name: kebabTag,
83-
type,
84-
renderStubDefaultSlot: true
85-
})
81+
if (stubs[kebabTag] === true || stubs[pascalTag] === true) {
82+
return createStub({
83+
name: kebabTag,
84+
type,
85+
renderStubDefaultSlot: true
86+
})
87+
}
8688
}
8789
}
8890

tests/mountingOptions/global.stubs.spec.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -482,6 +482,24 @@ describe('mounting options: stubs', () => {
482482
'</transition-stub>'
483483
)
484484
})
485+
486+
it('custom transition stub', () => {
487+
const Comp = {
488+
template: `<transition><div id="content-custom-stub" /></transition>`
489+
}
490+
config.global.stubs = {
491+
transition: {
492+
template: '<div class="custom-transition-stub"><slot /></div>'
493+
}
494+
}
495+
const wrapper = mount(Comp)
496+
497+
expect(wrapper.html()).toBe(
498+
'<div class="custom-transition-stub">\n' +
499+
' <div id="content-custom-stub"></div>\n' +
500+
'</div>'
501+
)
502+
})
485503
})
486504

487505
describe('transition-group', () => {

0 commit comments

Comments
 (0)