Merge pull request #78 from hcg1023/feature-test-utils

feat: vue3-dnd-test-utils completed

Author: hcg1023

.changeset/fast-suns-begin.md

@@ -0,0 +1,5 @@
+---
+"vue3-dnd-test-utils": patch
+---
+
+feat: vue3-dnd-test-utils completed

packages/test-utils/package.json

@@ -55,6 +55,9 @@
     "droppable",
     "drag-and-drop"
   ],
+  "dependencies": {
+    "vue-demi": "^0.14.7"
+  },
   "devDependencies": {
     "@swc/cli": "^0.1.57",
     "@swc/core": "^1.2.178",
@@ -70,7 +73,7 @@
     "vue3-dnd": "workspace:*"
   },
   "peerDependencies": {
-    "@testing-library/vue": ">= 8",
+    "@testing-library/vue": "^8.0.0 || ^5.8.0",
     "vue": "^3.0.0-0 || ^2.6.0",
     "vue3-dnd": ">=2.1.0"
   },

packages/test-utils/src/renderer.ts

@@ -1,12 +1,12 @@
 import { wrapWithBackend } from './wrappers'
 import { render, RenderOptions } from '@testing-library/vue'
-import { DefineComponent } from 'vue'
+import { Component } from 'vue-demi'
 import { BackendFactory } from 'dnd-core'
 import { HTML5Backend } from 'react-dnd-html5-backend'
 import { TestBackend } from 'react-dnd-test-backend'
 
 export function renderWithBackend(
-  DecoratedComponent: DefineComponent,
+  DecoratedComponent: Component,
   renderOptions: RenderOptions = {},
   Backend: BackendFactory = HTML5Backend,
   backendOptions: Record<string, any> = {}
@@ -25,7 +25,7 @@ export function renderWithBackend(
 }
 
 export function renderWithTestBackend(
-  DecoratedComponent: DefineComponent,
+  DecoratedComponent: Component,
   renderOptions: RenderOptions = {},
   backendOptions: Record<string, any> = {}
 ) {

packages/test-utils/src/wrappers.ts

@@ -1,4 +1,4 @@
-import { h, defineComponent, DefineComponent } from 'vue'
+import { h, defineComponent, Component } from 'vue-demi'
 import {
   TestBackend,
   ITestBackend,
@@ -17,9 +17,9 @@ import type { BackendFactory } from 'dnd-core'
  * to get the test backend instance.
  */
 export function wrapWithTestBackend(
-  DecoratedComponent: DefineComponent,
+  DecoratedComponent: Component,
   backendOptions?: unknown
-): [DefineComponent, () => ITestBackend | undefined] {
+): [Component, () => ITestBackend | undefined] {
   let backend: ITestBackend | undefined
   const opts: TestBackendOptions = Object.assign(
     {
@@ -41,19 +41,17 @@ export function wrapWithTestBackend(
  * @param backendOptions The optional backend options
  */
 export function wrapWithBackend(
-  DecoratedComponent: DefineComponent,
+  DecoratedComponent: Component,
   Backend: BackendFactory = HTML5Backend,
   backendOptions?: unknown
-): DefineComponent {
+): Component {
   return defineComponent({
     render() {
-      return h(
-        DndProvider,
-        { backend: Backend, options: backendOptions },
-        {
-          default: () => h(DecoratedComponent, { ...this.$attrs }),
-        }
-      )
+      // @ts-ignore
+      return h(DndProvider, { backend: Backend, options: backendOptions }, [
+        // @ts-ignore
+        h(DecoratedComponent, { ...this.$attrs }),
+      ])
     },
   })
 }