test: update the test cases

examples/vite-app/cypress/components/reactflow/basic-props.cy.tsx

@@ -2,6 +2,7 @@ import ReactFlow, { EdgeProps } from 'reactflow';
 
 import ControlledFlow from '../../support/ControlledFlow';
 import * as simpleflow from '../../fixtures/simpleflow';
+import { RefReactFlow } from '../../support/RefReactFlow';
 
 describe('<ReactFlow />: Basic Props', () => {
   describe('uses defaultNodes and defaultEdges', () => {
@@ -194,4 +195,32 @@ describe('<ReactFlow />: Basic Props', () => {
     cy.mount(<ControlledFlow className="custom" />);
     cy.get('.react-flow').should('have.class', 'custom');
   });
+
+  it('uses function ref', () => {
+    let pResolve: ((element: HTMLDivElement | PromiseLike<HTMLDivElement> | null) => void) | null = null;
+    const promise: Promise<HTMLDivElement | null> = new Promise((resolve) => {
+      pResolve = resolve;
+    });
+
+    function ref(root: HTMLDivElement | null) {
+      pResolve && pResolve(root);
+    }
+
+    cy.mount(<ReactFlow ref={ref} />);
+    cy.wrap(promise).should('be.instanceOf', HTMLDivElement);
+  });
+
+  it('use mutable ref', () => {
+    let pResolve: ((element: HTMLDivElement | PromiseLike<HTMLDivElement> | null) => void) | null = null;
+    const promise: Promise<HTMLDivElement | null> = new Promise((resolve) => {
+      pResolve = resolve;
+    });
+
+    function onGetRef(root: HTMLDivElement | null) {
+      pResolve && pResolve(root);
+    }
+
+    cy.mount(<RefReactFlow onGetRef={onGetRef} />);
+    cy.wrap(promise).should('be.instanceOf', HTMLDivElement);
+  });
 });

examples/vite-app/cypress/components/reactflow/multiple-instance.cy.tsx

@@ -31,7 +31,6 @@ describe('<ReactFlow />: Multiple Instances', () => {
               defaultNodes={simpleflow1.nodes}
               edgeTypes={{ default: CustomEdge }}
               defaultEdges={simpleflow1.edges}
-              id="reactflow-a"
             />
           </ReactFlowProvider>
           <ReactFlowProvider>
@@ -39,23 +38,26 @@ describe('<ReactFlow />: Multiple Instances', () => {
               defaultNodes={simpleflow2.nodes}
               edgeTypes={{ default: CustomEdge }}
               defaultEdges={simpleflow2.edges}
-              id="reactflow-b"
             />
           </ReactFlowProvider>
         </>
       );
     });
 
-    it('Each ReactFlow instance has its EdgeLabelRenderer DOM element without conflict', () => {
-      cy.get('#edgelabel-portal-reactflow-a').should('have.length', 1);
-      cy.get('#edgelabel-portal-reactflow-b').should('have.length', 1);
-    });
-
     it('Each ReactFlow instance has one edge label in EdgeLabelRenderer', () => {
-      cy.get('#edgelabel-portal-reactflow-a .label').should('have.length', 1);
-      cy.get('#edgelabel-portal-reactflow-a .label').should('contain.text', 'edge1');
-      cy.get('#edgelabel-portal-reactflow-b .label').should('have.length', 1);
-      cy.get('#edgelabel-portal-reactflow-b .label').should('contain.text', 'edge2');
+      cy.get('.react-flow__edgelabel-renderer').should('have.length', 2);
+
+      cy.get('.react-flow__edgelabel-renderer')
+        .eq(0)
+        .within(() => {
+          cy.get('.label').should('have.length', 1).should('contain.text', 'edge1');
+        });
+
+      cy.get('.react-flow__edgelabel-renderer')
+        .eq(1)
+        .within(() => {
+          cy.get('.label').should('have.length', 1).should('contain.text', 'edge2');
+        });
     });
   });
 });

examples/vite-app/cypress/support/RefReactFlow.tsx

@@ -0,0 +1,12 @@
+import { useEffect, useRef } from 'react';
+import ReactFlow from 'reactflow';
+
+export function RefReactFlow({ onGetRef }: { onGetRef: (element: HTMLDivElement | null) => void }) {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    onGetRef(ref.current);
+  }, []);
+
+  return <ReactFlow ref={ref} />;
+}