chore: added setupFlowTests.ts for ReactFlow specific testing

added Setup config for mocking reactflow based on the provided information in ReactFlow documentation

ref: N25B-114

jest.config.js

@@ -2,7 +2,7 @@ export default {
   preset: 'ts-jest/presets/default-esm',
   testEnvironment: 'jsdom',
   extensionsToTreatAsEsm: ['.ts', '.tsx'],
-  setupFilesAfterEnv: ['<rootDir>/test/setupTests.ts'],
+  setupFilesAfterEnv: ['<rootDir>/test/setupTests.ts', '<rootDir>/test/setupFlowTests.ts' ],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
     '\\.(css|scss|sass)$': 'identity-obj-proxy'

test/setupFlowTests.ts

@@ -0,0 +1,70 @@
+import '@testing-library/jest-dom';
+import { cleanup } from '@testing-library/react';
+import useFlowStore from '../src/pages/VisProgPage/visualProgrammingUI/VisProgStores.tsx';
+
+
+// To make sure that the tests are working, it's important that you are using
+// this implementation of ResizeObserver and DOMMatrixReadOnly
+class ResizeObserver {
+  callback: globalThis.ResizeObserverCallback;
+
+  constructor(callback: globalThis.ResizeObserverCallback) {
+    this.callback = callback;
+  }
+
+  observe(target: Element) {
+    this.callback([{ target } as globalThis.ResizeObserverEntry], this);
+  }
+
+  unobserve() {}
+
+  disconnect() {}
+}
+
+class DOMMatrixReadOnly {
+  m22: number;
+  constructor(transform: string) {
+    const scale = transform?.match(/scale\(([1-9.])\)/)?.[1];
+    this.m22 = scale !== undefined ? +scale : 1;
+  }
+}
+
+// Only run the shim once when requested
+let init = false;
+
+export const mockReactFlow = () => {
+  if (init) return;
+  init = true;
+
+  globalThis.ResizeObserver = ResizeObserver;
+
+  // @ts-expect-error included in advised setup code provided in ReactFlow documentation
+  global.DOMMatrixReadOnly = DOMMatrixReadOnly;
+
+  Object.defineProperties(globalThis.HTMLElement.prototype, {
+    offsetHeight: {
+      get() {
+        return parseFloat(this.style.height) || 1;
+      },
+    },
+    offsetWidth: {
+      get() {
+        return parseFloat(this.style.width) || 1;
+      },
+    },
+  });
+
+  // @ts-expect-error included in advised setup code provided in ReactFlow documentation
+  (globalThis.SVGElement as never).prototype.getBBox = () => ({
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  });
+};
+
+afterEach(() => {
+  cleanup();
+  useFlowStore.setState({ nodes: [], edges: [] });
+});
+