feat: add jsx support for test case

jest.config.js

@@ -10,7 +10,22 @@ module.exports = {
   testEnvironment: 'jsdom',
   transform: {
     '^.+\\.vue$': 'vue-jest',
-    '^.+\\.(t|j)sx?$': ['@swc-node/jest'],
+    '^.+\\.(t|j)sx?$': [
+      'babel-jest', {
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              targets: {
+                node: true,
+              },
+            },
+          ],
+          '@babel/preset-typescript',
+        ],
+        plugins: ['@vue/babel-plugin-jsx'],
+      },
+    ],
   },
   moduleFileExtensions: ['vue', 'json', 'ts', 'tsx', 'js', 'json'],
 }

package.json

@@ -20,9 +20,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.4",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-typescript": "^7.10.4",
     "@commitlint/cli": "^9.1.2",
     "@commitlint/config-conventional": "^9.1.2",
-    "@swc-node/jest": "^0.3.4",
     "@types/jest": "^26.0.10",
     "@types/lodash": "^4.14.161",
     "@typescript-eslint/eslint-plugin": "^3.10.1",
@@ -31,6 +32,7 @@
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/component-compiler-utils": "^3.2.0",
     "algoliasearch": "^4.4.0",
+    "babel-jest": "^26.3.0",
     "babel-loader": "^8.1.0",
     "babel-preset-vue": "^2.0.2",
     "cp-cli": "^2.0.0",

packages/button/src/button.vue

@@ -107,7 +107,7 @@ export default defineComponent({
 
   emits: ['click'],
 
-  setup(props, ctx): IButtonSetups {
+  setup(props, ctx) {
     // inject
     const elForm = inject<ElForm>('elForm', {} as any)
     const elFormItem = inject<ElFormItem>('elFormItem', {} as any)
@@ -130,7 +130,6 @@ export default defineComponent({
     }
 
     return {
-      _elFormItemSize,
       buttonSize,
       buttonDisabled,
       handleClick,

packages/dropdown/__tests__/dropdown.spec.tsx

@@ -23,25 +23,33 @@ const _mount = (template: string, data, otherObj?) => mount({
 
 describe('Dropdown', () => {
   test('create', async () => {
-    const wrapper = _mount(
-      `
-      <el-dropdown ref="b" placement="right">
-        <span class="el-dropdown-link" ref="a">
-          dropdown<i class="el-icon-arrow-down el-icon--right"></i>
-        </span>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item>Apple</el-dropdown-item>
-            <el-dropdown-item>Orange</el-dropdown-item>
-            <el-dropdown-item>Cherry</el-dropdown-item>
-            <el-dropdown-item disabled>Peach</el-dropdown-item>
-            <el-dropdown-item divided>Pear</el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-      `,
-      () => ({}),
-    )
+    const wrapper = mount({
+      setup() {
+        return () => (
+          <Dropdown
+            ref="b"
+            placement="right"
+            v-slots = {
+              {
+                dropdown: () => (
+                  <DropdownMenu>
+                    <DropdownItem>Apple</DropdownItem>
+                    <DropdownItem>Orange</DropdownItem>
+                    <DropdownItem>Cherry</DropdownItem>
+                    <DropdownItem disabled>Peach</DropdownItem>
+                    <DropdownItem divided>Pear</DropdownItem>
+                  </DropdownMenu>
+                )
+              }
+            }
+          >
+            <span class="el-dropdown-link" ref="a">
+              dropdown<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+          </Dropdown>
+        )
+      }
+    })
     const content = wrapper.findComponent({ ref: 'b' }).vm.$refs.popper as any
     const triggerElm = wrapper.find('.el-dropdown-link')
     expect(content.visible).toBe(false)

packages/dropdown/src/dropdown-menu.vue

@@ -9,7 +9,7 @@
   </ul>
 </template>
 <script lang='ts'>
-import { defineComponent, getCurrentInstance, onMounted, ref } from 'vue'
+import { defineComponent, getCurrentInstance, onMounted } from 'vue'
 import { useDropdown, initDropdownDomEvent } from './useDropdown'
 
 export default defineComponent({
@@ -17,7 +17,7 @@ export default defineComponent({
   setup() {
     const { _elDropdownSize, elDropdown } = useDropdown()
     const size = _elDropdownSize.value
-    const _trigger = ref(null)
+
     function show() {
       elDropdown.show?.()
     }
@@ -31,16 +31,13 @@ export default defineComponent({
 
     onMounted(() => {
       const dropdownMenu = getCurrentInstance()
-      _trigger.value = elDropdown.triggerElm.value
-      initDropdownDomEvent(dropdownMenu, _trigger.value, elDropdown.instance)
+      initDropdownDomEvent(dropdownMenu, elDropdown.triggerElm.value, elDropdown.instance)
     })
 
     return {
       size,
       show,
       hide,
-      _trigger,
-      _hide,
     }
   },
 })

packages/dropdown/src/dropdown.vue

@@ -9,6 +9,7 @@ import {
   watch,
   onMounted,
   VNode,
+  ComponentPublicInstance,
 } from 'vue'
 import { on, addClass, removeClass } from '@element-plus/utils/dom'
 import ElButton from '@element-plus/button/src/button.vue'
@@ -44,7 +45,7 @@ export default defineComponent({
     },
     showTimeout: {
       type: Number,
-      default: 250,
+      default: 150,
     },
     hideTimeout: {
       type: Number,
@@ -92,10 +93,11 @@ export default defineComponent({
     )
 
     const triggerVnode = ref<Nullable<VNode>>(null)
+    const caretButton = ref<Nullable<ComponentPublicInstance>>(null)
     const triggerElm = computed<Nullable<HTMLButtonElement>>(() =>
       !props.splitButton
         ? triggerVnode.value?.el
-        : triggerVnode.value?.el.querySelector('.el-dropdown__caret-button'),
+        : caretButton.value?.$el,
     )
 
     function handleClick() {
@@ -208,6 +210,7 @@ export default defineComponent({
             h(ElButton, {
               type: props.type,
               size: dropdownSize.value,
+              ref: caretButton,
               class: 'el-dropdown__caret-button',
             }, {
               default: () => h('i', { class: 'el-dropdown__icon el-icon-arrow-down' }),
@@ -228,6 +231,7 @@ export default defineComponent({
       placement: props.placement,
       effect: props.effect,
       visible: visible.value,
+      manualMode: true,
       'onUpdate:visible': onVisibleUpdate,
       popperClass: 'el-dropdown-popper',
       trigger: [props.trigger],

packages/utils/vnode.ts

@@ -4,7 +4,7 @@ import type { VNode, VNodeTypes, VNodeChild } from 'vue'
 
 const TEMPLATE = 'template'
 
-export const enum PatchFlags {
+export enum PatchFlags {
   TEXT = 1,
   CLASS = 2,
   STYLE = 4,

typings/vue-shim.d.ts

@@ -1,10 +1,7 @@
 declare module '*.vue' {
-  import { Component, ComponentPublicInstance } from 'vue'
-  const _default: Component & {
-    // eslint-disable-next-line
-    new (): ComponentPublicInstance<any>
-  }
-  export default _default
+  import { defineComponent } from 'vue'
+  const component: ReturnType<typeof defineComponent>
+  export default component
 }
 
 declare type Nullable<T> = T | null;