Bug: Getting TypeError: Cannot set properties of null (setting 'bum')

[Mark-ICS]

Describe the bug I am getting the following error when I call mount on the following component:

 FAIL  test/components/HelloWorld.test.ts > HelloWorld > should display tags
TypeError: Cannot set properties of null (setting 'bum')
 ❯ handleVNodeMounted node_modules/element-plus/es/components/tag/src/tag2.mjs:50:45
     48|         onClick: handleClick
     49|       }, [
     50|         createElementVNode("span", {
       |                                             ^
     51|           class: normalizeClass(unref(ns).e("content"))
     52|         }, [
 ❯ callWithErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:200:19
 ❯ callWithAsyncErrorHandling node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:207:17
 ❯ invokeVNodeHook node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7598:3
 ❯ node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5235:19
 ❯ flushPostFlushCbs node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:385:28
 ❯ render node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:5882:7
 ❯ mount node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3869:13
 ❯ Object.app.mount node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.js:1693:19
 ❯ Proxy.mount node_modules/@vue/test-utils/dist/vue-test-utils.cjs.js:8415:18

Here is a full example of the component:

<script setup lang="ts">
import { ref } from 'vue';
import { ElTag } from 'element-plus';

const tags = ref(['one', 'two'])
</script>

<template>
  <el-tag v-for="tag in tags" :key="tag">{{tag}}</el-tag>
</template>

Here is an example: https://stackblitz.com/edit/github-pd8bru?file=src%2Fcomponents%2FHelloWorld.vue

To Reproduce https://stackblitz.com/edit/github-pd8bru?file=src%2Fcomponents%2FHelloWorld.vue

Expected behavior mount to work

Related information:

@vue/test-utils: 2.4.6
element-plus: 2.8.4

Additional context

[cexbrayat]

Hi @Mark-ICS

Thanks for the repro. It looks like the code throwing is from element-plus because they rely on internal stuff from transition. You probably need to enable transitions in your test to work around that (transitions are disabled by default in tests). Something similar to what I explain in https://github.com/vuejs/test-utils/discussions/1913

Let me know if that helps

[Mark-ICS]

Thanks for the response... As per the linked discussion, pass this to the mount arguments solved the issue:

      global: {
        stubs: {
          transition: false,
        },
      },

Would you consider this a design issue with Element Plus? I imagine it should work with or without transitions?

[cexbrayat]

I haven't looked into the details of why they use this code but this feels a bit hacky (as the // @ts-ignore hints to):

https://github.com/element-plus/element-plus/blob/86b01eed9f44ff3169c8f63ce82c71f1a3b7f7c9/packages/components/tag/src/tag.vue#L76-L79

Anyway I'm happy if that solves your issue, I'll close 👍

[Mark-ICS]

Thank you!