✨ Allow custom <transition> stubs

alecgibson · alecgibson · commit e8ec540b1b63 · 2023-09-11T13:30:21.000+01:00
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
diff --git a/src/vnodeTransformers/stubComponentsTransformer.ts b/src/vnodeTransformers/stubComponentsTransformer.ts
@@ -166,11 +166,13 @@ export function createStubComponentsTransformer({
       if ('transition' in stubs && stubs['transition'] === false) return type
       if ('Transition' in stubs && stubs['Transition'] === false) return type
 
-      return createStub({
-        name: 'transition',
-        type,
-        renderStubDefaultSlot: true
-      })
+      if (stubs['transition'] === true || stubs['Transition'] === true) {
+        return createStub({
+          name: 'transition',
+          type,
+          renderStubDefaultSlot: true
+        })
+      }
     }
 
     // stub transition-group by default via config.global.stubs
diff --git a/tests/mountingOptions/global.stubs.spec.ts b/tests/mountingOptions/global.stubs.spec.ts
@@ -482,6 +482,24 @@ describe('mounting options: stubs', () => {
           '</transition-stub>'
       )
     })
+
+    it('custom transition stub', () => {
+      const Comp = {
+        template: `<transition><div id="content-custom-stub" /></transition>`
+      }
+      config.global.stubs = {
+        transition: {
+          template: '<div class="custom-transition-stub"><slot /></div>'
+        }
+      }
+      const wrapper = mount(Comp)
+
+      expect(wrapper.html()).toBe(
+        '<div class="custom-transition-stub">\n' +
+          '  <div id="content-custom-stub"></div>\n' +
+          '</div>'
+      )
+    })
   })
 
   describe('transition-group', () => {
