chore: prevent warnings while running test cases (#12189)

* chore: prevent warnings while running test cases

* fix: overlook a test case

packages/components/breadcrumb/src/breadcrumb-item.vue

@@ -8,17 +8,17 @@
     >
       <slot />
     </span>
-    <el-icon v-if="separatorIcon" :class="ns.e('separator')">
-      <component :is="separatorIcon" />
+    <el-icon v-if="breadcrumbContext?.separatorIcon" :class="ns.e('separator')">
+      <component :is="breadcrumbContext.separatorIcon" />
     </el-icon>
     <span v-else :class="ns.e('separator')" role="presentation">
-      {{ separator }}
+      {{ breadcrumbContext?.separator }}
     </span>
   </span>
 </template>
 
 <script lang="ts" setup>
-import { getCurrentInstance, inject, ref, toRefs } from 'vue'
+import { getCurrentInstance, inject, ref } from 'vue'
 import ElIcon from '@element-plus/components/icon'
 import { useNamespace } from '@element-plus/hooks'
 import { breadcrumbKey } from './constants'
@@ -33,10 +33,9 @@ defineOptions({
 const props = defineProps(breadcrumbItemProps)
 
 const instance = getCurrentInstance()!
-const breadcrumbContext = inject(breadcrumbKey, undefined)!
+const breadcrumbContext = inject(breadcrumbKey, undefined)
 const ns = useNamespace('breadcrumb')
 
-const { separator, separatorIcon } = toRefs(breadcrumbContext)
 const router = instance.appContext.config.globalProperties.$router as Router
 
 const link = ref<HTMLSpanElement>()

packages/components/cascader/__tests__/cascader.test.tsx

@@ -10,6 +10,7 @@ import ElForm, { ElFormItem } from '@element-plus/components/form'
 import Cascader from '../src/cascader.vue'
 
 import type { VNode } from 'vue'
+import type ElCascader from '@element-plus/components/cascader'
 
 vi.mock('lodash-unified', async () => {
   return {
@@ -428,8 +429,9 @@ describe('Cascader.vue', () => {
   })
 
   test('should be able to trigger togglePopperVisible outside the component', async () => {
+    let cascader: InstanceType<typeof ElCascader>
     const clickFn = () => {
-      wrapper.findComponent(Cascader).vm.togglePopperVisible()
+      cascader.togglePopperVisible()
     }
     const wrapper = _mount(() => (
       <div>
@@ -437,6 +439,8 @@ describe('Cascader.vue', () => {
         <button onClick={clickFn} />
       </div>
     ))
+
+    cascader = wrapper.findComponent(Cascader).vm
     const dropdown = wrapper.findComponent(ArrowDown).element as HTMLDivElement
     expect(dropdown.style.display).not.toBe('none')
     const button = wrapper.find('button')

packages/hooks/__tests__/use-id.test.tsx

@@ -26,6 +26,7 @@ describe('no injection value', () => {
         const id = useId()
         return { id }
       },
+      render: () => undefined,
     })
 
     expect(wrapper.vm.id).toMatch(/^el-id-\d{0,4}-\d+$/)
@@ -53,6 +54,7 @@ describe('with injection value', () => {
         const idInjection = useIdInjection()
         return idInjection
       },
+      render: () => undefined,
     })
 
     expect(wrapper.vm.prefix).toBe(1024)
@@ -65,6 +67,7 @@ describe('with injection value', () => {
         const id = useId()
         return { id }
       },
+      render: () => undefined,
     })
 
     expect(wrapper.vm.id).toBe('el-id-1024-0')

packages/hooks/__tests__/use-lockscreen.test.tsx

@@ -67,12 +67,10 @@ describe('useLockscreen', () => {
         onMounted(() => {
           trigger.value = true
         })
-        return () => () => undefined
+        return () => undefined
       },
     })
 
-    mount(wrapper)
-
     await nextTick()
     expect(hasClass(document.body, `${namespace}-lock-parent--hidden`)).toBe(
       true

packages/hooks/__tests__/use-popper-container.test.tsx

@@ -59,6 +59,7 @@ describe('no injection value', () => {
         const data = usePopperContainerId()
         return data
       },
+      render: () => undefined,
     })
 
     expect(wrapper.vm.id).toMatch(/^el-popper-container-\d{0,4}$/)
@@ -88,6 +89,7 @@ describe('with injection value', () => {
         const data = usePopperContainerId()
         return data
       },
+      render: () => undefined,
     })
 
     expect(wrapper.vm.id).toBe('el-popper-container-1024')

packages/hooks/use-namespace/index.ts

@@ -1,4 +1,4 @@
-import { computed, inject, ref, unref } from 'vue'
+import { computed, getCurrentInstance, inject, ref, unref } from 'vue'
 
 import type { InjectionKey, Ref } from 'vue'
 
@@ -32,7 +32,10 @@ export const useGetDerivedNamespace = (
   namespaceOverrides?: Ref<string | undefined>
 ) => {
   const derivedNamespace =
-    namespaceOverrides || inject(namespaceContextKey, ref(defaultNamespace))
+    namespaceOverrides ||
+    (getCurrentInstance()
+      ? inject(namespaceContextKey, ref(defaultNamespace))
+      : ref(defaultNamespace))
   const namespace = computed(() => {
     return unref(derivedNamespace) || defaultNamespace
   })

packages/hooks/use-z-index/index.ts

@@ -1,4 +1,4 @@
-import { computed, inject, ref, unref } from 'vue'
+import { computed, getCurrentInstance, inject, ref, unref } from 'vue'
 import { isNumber } from '@element-plus/utils'
 
 import type { InjectionKey, Ref } from 'vue'
@@ -10,7 +10,9 @@ export const zIndexContextKey: InjectionKey<Ref<number | undefined>> =
   Symbol('zIndexContextKey')
 
 export const useZIndex = (zIndexOverrides?: Ref<number>) => {
-  const zIndexInjection = zIndexOverrides || inject(zIndexContextKey, undefined)
+  const zIndexInjection =
+    zIndexOverrides ||
+    (getCurrentInstance() ? inject(zIndexContextKey, undefined) : undefined)
   const initialZIndex = computed(() => {
     const zIndexFromInjection = unref(zIndexInjection)
     return isNumber(zIndexFromInjection)