src: Resolve ResizeObserver is not defined error

This mocks and stubs ResizeObserver as it is not defined in jsdom.

package-lock.json

@@ -87,6 +87,7 @@
         "typescript": "5.1.6",
         "uuid": "10.0.0",
         "vitest": "1.6.0",
+        "vitest-canvas-mock": "0.3.3",
         "webpack-bundle-analyzer": "4.10.2",
         "whatwg-fetch": "3.6.20"
       },
@@ -20929,6 +20930,18 @@
         }
       }
     },
+    "node_modules/vitest-canvas-mock": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/vitest-canvas-mock/-/vitest-canvas-mock-0.3.3.tgz",
+      "integrity": "sha512-3P968tYBpqYyzzOaVtqnmYjqbe13576/fkjbDEJSfQAkHtC5/UjuRHOhFEN/ZV5HVZIkaROBUWgazDKJ+Ibw+Q==",
+      "dev": true,
+      "dependencies": {
+        "jest-canvas-mock": "~2.5.2"
+      },
+      "peerDependencies": {
+        "vitest": "*"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "dev": true,

package.json

@@ -86,6 +86,7 @@
     "typescript": "5.1.6",
     "uuid": "10.0.0",
     "vitest": "1.6.0",
+    "vitest-canvas-mock": "0.3.3",
     "webpack-bundle-analyzer": "4.10.2",
     "whatwg-fetch": "3.6.20"
   },

src/test/setup.ts

@@ -1,4 +1,13 @@
 import { server } from './mocks/server';
+import 'vitest-canvas-mock';
+
+// ResizeObserver is not defined and needs to be mocked and stubbed
+const MockResizeObserver = vi.fn(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+vi.stubGlobal('ResizeObserver', MockResizeObserver);
 
 beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
 afterAll(() => server.close());

vitest.config.ts

@@ -12,7 +12,7 @@ const config = {
     },
     server: {
       deps: {
-        inline: ['@patternfly', 'clsx'],
+        inline: ['vitest-canvas-mock', '@patternfly', 'clsx'],
       },
     },
     fileParallelism: false,