test: setup js

package.json

@@ -41,6 +41,7 @@
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.22.0",
     "jsdom": "^24.1.0",
+    "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.71.1",
     "string-hash": "^1.1.3",
     "vite": "^5.1.5",

src/packages/base-field/__tests__/CustomFields.test.jsx

@@ -1,27 +1,31 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'
 import BaseField, { CustomFields } from '../index'
+import mountTest from '../../../../tests/shared/mountTest'
 
 describe('CustomFields', () => {
-    it('render', async () => {
-        const valueTypeMap = {
-            test: ({ props, slots }) => {
-                // console.log('cole', props, slots)
-                return '123'
-            }
+    mountTest(CustomFields)
+
+    const valueTypeMap = {
+        test: ({ props, slots }) => {
+            return 'test'
         }
+    }
+
+    it('props valueTypeMap and slots', async () => {
+        const testSpy = vi.spyOn(valueTypeMap, 'test')
+
         const wrapper = mount(CustomFields, {
+            props: { valueTypeMap },
             slots: {
                 default: () => <BaseField valueType={'test'}/>
             }
         })
-        // 自定义的值
-        const testSpy = vi.spyOn(valueTypeMap, 'test')
-        await wrapper.setProps({ valueTypeMap: valueTypeMap })
-        expect(wrapper.exists()).toBeTruthy()
 
-        const baseField = wrapper.findComponent(BaseField)
+        // run
         expect(testSpy).toHaveBeenCalled()
-        expect(baseField.text()).toBe('123')
+        // render
+        const baseField = wrapper.findComponent(BaseField)
+        expect(baseField.text()).toBe('test')
     })
 })

tests/setup.js

@@ -1,29 +1,62 @@
+import { vi } from 'vitest'
 import { config } from '@vue/test-utils'
+import ResizeObserverPolyfill from 'resize-observer-polyfill'
+import { TextDecoder, TextEncoder } from 'node:util'
 
+// config
 config.global.stubs = {
     transition: false,
     'transition-group': false,
 }
 
-global.window.resizeTo = (width, height) => {
-    global.window.innerWidth = width || global.window.innerWidth
-    global.window.innerHeight = height || global.window.innerHeight
-    global.window.dispatchEvent(new Event('resize'))
-}
+// Mock matchMedia
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => {
+        return {
+            matches: false,
+            media: query,
+            onchange: null,
+            addListener: vi.fn(),
+            removeListener: vi.fn(),
+            addEventListener: vi.fn(),
+            removeEventListener: vi.fn(),
+            dispatchEvent: vi.fn()
+        }
+    })
+})
+Object.defineProperty(window, 'TextEncoder', {
+    writable: true,
+    value: TextEncoder,
+})
+Object.defineProperty(window, 'TextDecoder', {
+    writable: true,
+    value: TextDecoder,
+})
 
-global.window.scrollTo = () => {}
+window.resizeTo = (width, height) => {
+    window.innerWidth = width || window.innerWidth
+    window.innerHeight = height || window.innerHeight
+    window.dispatchEvent(new Event('resize'))
+}
 
-global.window.matchMedia = (query) => {
-    return {
-        matches: false,
-        addListener: () => {},
-        removeListener: () => {}
-    }
+window.scrollTo = () => {
+    return false
 }
 
+// Mock getComputedStyle
 const originGetComputedStyle = window.getComputedStyle
-window.getComputedStyle = ele => {
-    const style = originGetComputedStyle(ele)
-    style.lineHeight = '16px';
-    return style;
+window.getComputedStyle = (ele) => {
+    const CSSStyle = originGetComputedStyle(ele)
+    CSSStyle.lineHeight = '16px'
+    return CSSStyle
+}
+
+// Mock requestAnimationFrame
+global.ResizeObserver = ResizeObserverPolyfill
+global.requestAnimationFrame = (callback) => {
+    return setTimeout(callback, 0)
+}
+global.cancelAnimationFrame = (callback) => {
+    return clearTimeout(callback, 0)
 }

tests/shared/mountTest.jsx

@@ -0,0 +1,20 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+function mountTest (Component) {
+    describe(`mount and unmount`, () => {
+        it(`component could be updated and unmounted without errors`, () => {
+            const wrapper = mount(() => <Component/>, {
+                sync: false,
+                attachTo: 'body'
+            })
+            const hasThrow = () => {
+                wrapper.vm.$forceUpdate()
+                wrapper.unmount()
+            }
+            expect(hasThrow).not.toThrow()
+        })
+    })
+}
+
+export default mountTest

vitest.config.js

@@ -9,6 +9,7 @@ export default defineConfig((configEnv) => {
             include: ['**/*.{test,spec,type-test}.{js,mjs,cjs,ts,tsx,jsx}'],
             coverage: {
                 exclude: [
+                    'tests/**',
                     '.eslintrc.cjs',
                     'entry.packages.js',
                     'vite.packages.config.js',