test: ResizeObserver

package.json

@@ -41,7 +41,6 @@
     "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/resize-observer/__tests__/ResizeObserver.test.jsx

@@ -1,18 +1,17 @@
 import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import ResizeObserver from '../index'
+import mountTest from '../../../../tests/shared/mountTest'
+import MockResizeObserver from '../../../../tests/__mocks__/resize-observer'
 
 describe('ResizeObserver', () => {
-    it(`render`, async () => {
-        const wrapper = mount(ResizeObserver, {
-            slots: {
-                default: () => {
-                    return (
-                        <div style={{ height: '200px' }}/>
-                    )
-                }
-            }
-        })
-        expect(wrapper.exists()).toBeTruthy()
+    beforeEach(() => {
+        window.ResizeObserver = MockResizeObserver
+    })
+
+    mountTest(ResizeObserver)
+    it(`emits resize`, async () => {
+        const wrapper = mount(ResizeObserver)
+        expect(wrapper.emitted()).toHaveProperty('resize')
     })
 })

tests/__mocks__/resize-observer.js

@@ -0,0 +1,19 @@
+class ResizeObserver {
+    constructor (callback) {
+        const entry = {
+            contentRect: { width: 1024, height: 768 }
+        }
+        callback([entry])
+    }
+
+    observe () {
+    }
+
+    unobserve () {
+    }
+
+    disconnect () {
+    }
+}
+
+export default ResizeObserver

tests/setup.js

@@ -1,6 +1,5 @@
 import { vi } from 'vitest'
 import { config } from '@vue/test-utils'
-import ResizeObserverPolyfill from 'resize-observer-polyfill'
 import { TextDecoder, TextEncoder } from 'node:util'
 
 // config
@@ -53,7 +52,6 @@ window.getComputedStyle = (ele) => {
 }
 
 // Mock requestAnimationFrame
-global.ResizeObserver = ResizeObserverPolyfill
 global.requestAnimationFrame = (callback) => {
     return setTimeout(callback, 0)
 }