core-components: fix usage of invalid elements in DependencyGrape tests

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/core-components/src/components/DependencyGraph/Edge.test.tsx

@@ -38,7 +38,7 @@ const id = {
 
 const setEdge = jest.fn();
 const renderElement = jest.fn((props: RenderLabelProps) => (
-  <text>{props.edge.label}</text>
+  <div>{props.edge.label}</div>
 ));
 
 const minProps = {
@@ -53,8 +53,7 @@ const edgeWithLabel = { ...edge, label };
 
 describe('<Edge />', () => {
   beforeEach(() => {
-    // jsdom does not support SVG elements so we have to fall back to HTMLUnknownElement
-    Object.defineProperty(window.HTMLUnknownElement.prototype, 'getBBox', {
+    Object.defineProperty(window.SVGElement.prototype, 'getBBox', {
       value: () => ({ width: 100, height: 100 }),
       configurable: true,
     });
@@ -63,26 +62,40 @@ describe('<Edge />', () => {
   afterEach(jest.clearAllMocks);
 
   it('does not render the supplied label element if label is missing', () => {
-    const { container } = render(<Edge {...minProps} />);
+    const { container } = render(
+      <svg>
+        <Edge {...minProps} />
+      </svg>,
+    );
     expect(container.getElementsByTagName('g')).toHaveLength(0);
   });
 
   it('renders the supplied label element if label is present', () => {
-    const { getByText } = render(<Edge {...minProps} edge={edgeWithLabel} />);
+    const { getByText } = render(
+      <svg>
+        <Edge {...minProps} edge={edgeWithLabel} />
+      </svg>,
+    );
     expect(getByText(label)).toBeInTheDocument();
   });
 
   it('passes down edge properties to the render method if label is present', () => {
     const edgeWithRandomProp = { ...edge, label, randomProp: true };
     render(
-      <Edge {...minProps} render={renderElement} edge={edgeWithRandomProp} />,
+      <svg>
+        <Edge {...minProps} render={renderElement} edge={edgeWithRandomProp} />
+      </svg>,
     );
 
     expect(renderElement).toHaveBeenCalledWith({ edge: edgeWithRandomProp });
   });
 
   it('calls setEdge with edge ID and actual label size after rendering', () => {
-    const { getByText } = render(<Edge {...minProps} edge={edgeWithLabel} />);
+    const { getByText } = render(
+      <svg>
+        <Edge {...minProps} edge={edgeWithLabel} />
+      </svg>,
+    );
     expect(getByText(label)).toBeInTheDocument();
 
     // Updates the edge in the graph

packages/core-components/src/components/DependencyGraph/Node.test.tsx

@@ -23,7 +23,7 @@ import { RenderNodeProps } from './types';
 const node = { id: 'abc', x: 0, y: 0, width: 0, height: 0 };
 const setNode = jest.fn(() => new dagre.graphlib.Graph());
 const renderElement = jest.fn((props: RenderNodeProps) => (
-  <text>{props.node.id}</text>
+  <div>{props.node.id}</div>
 ));
 
 const minProps = {
@@ -34,8 +34,7 @@ const minProps = {
 
 describe('<Node />', () => {
   beforeEach(() => {
-    // jsdom does not support SVG elements so we have to fall back to HTMLUnknownElement
-    Object.defineProperty(window.HTMLUnknownElement.prototype, 'getBBox', {
+    Object.defineProperty(window.SVGElement.prototype, 'getBBox', {
       value: () => ({ width: 100, height: 100 }),
       configurable: true,
     });
@@ -44,19 +43,31 @@ describe('<Node />', () => {
   afterEach(jest.clearAllMocks);
 
   it('renders the supplied element', () => {
-    const { getByText } = render(<Node {...minProps} />);
+    const { getByText } = render(
+      <svg>
+        <Node {...minProps} />
+      </svg>,
+    );
     expect(getByText(minProps.node.id)).toBeInTheDocument();
   });
 
   it('passes down node properties to the render method', () => {
     const nodeWithRandomProp = { ...node, randomProp: true };
-    render(<Node {...minProps} node={nodeWithRandomProp} />);
+    render(
+      <svg>
+        <Node {...minProps} node={nodeWithRandomProp} />
+      </svg>,
+    );
 
     expect(renderElement).toHaveBeenCalledWith({ node: nodeWithRandomProp });
   });
 
   it('calls setNode with node ID and actual size after rendering', () => {
-    const { getByText } = render(<Node {...minProps} />);
+    const { getByText } = render(
+      <svg>
+        <Node {...minProps} />
+      </svg>,
+    );
     expect(getByText(minProps.node.id)).toBeInTheDocument();
 
     // Updates the node in the graph