Testing: How to Test Nodes, Edges, and Workflow Interactions

Testing is an important part of building reliable React Flow applications. Whether you are developing a workflow builder, automation editor, or interactive node-based diagram, you need to ensure that nodes render correctly, edges connect properly, and user interactions behave as expected.

React Flow Testing helps developers identify bugs, validate diagram behavior, and maintain application quality as workflows become more complex.

React Flow relies on browser DOM measurements to calculate node dimensions and render connections. Because of this, choosing the right testing framework and configuring the testing environment correctly are essential.

In this guide, you'll learn how to test React Flow applications using Cypress, Playwright, and Jest, including how to test nodes, edges, and custom interactions.

Why Is Testing Important in React Flow?

React Flow applications contain several interactive elements, including draggable nodes, connection handles, edges, viewport controls, and custom components.

Testing these elements helps ensure that your application works correctly across different user interactions.

Some important areas to test include:

• Node rendering: Verify that nodes appear with the correct labels and content.
• Edge connections: Ensure that edges connect the expected source and target nodes.
• User interactions: Test node selection, dragging, and connection behavior.
• Custom components: Validate buttons, forms, handles, and other custom node elements.
• Workflow logic: Confirm that changes to nodes and edges produce the expected results.
• Canvas behavior: Check zooming, panning, and viewport interactions.

A reliable testing strategy helps prevent regressions and makes complex workflow applications easier to maintain.

Choosing a Testing Framework for React Flow

React Flow supports different testing approaches, but Cypress and Playwright are recommended for testing applications in a real browser environment.

Jest can also be used for component-level testing, although some browser APIs need to be mocked.

1. Testing React Flow with Cypress

Cypress is a popular end-to-end testing framework for web applications. It allows you to interact with a running React Flow application and verify its behavior in a browser.

You can use Cypress to test:

• Whether workflow nodes render correctly.
• Whether node selection works.
• Whether buttons inside custom nodes respond to clicks.
• Whether workflow connections appear.
• Whether toolbar controls perform the expected actions.

For example, you can write a test to verify that a workflow node is visible:

describe('React Flow Editor', () => {
  it('should display workflow nodes', () => {
    cy.visit('/workflow');

    cy.contains('Start Node').should('be.visible');
    cy.contains('Process Node').should('be.visible');
  });
});

This test opens the workflow page and checks whether the expected node labels are visible.

2. Testing React Flow with Playwright

Playwright is another excellent option for automated React Flow testing.

It supports browser-based testing across Chromium, Firefox, and WebKit, making it useful for applications that need consistent behavior across different browsers.

Example:

import { test, expect } from '@playwright/test';

test('should render workflow nodes', async ({ page }) => {
  await page.goto('/workflow');

  await expect(
    page.getByText('Start Node')
  ).toBeVisible();

  await expect(
    page.getByText('Process Node')
  ).toBeVisible();
});

Playwright can also test more complex workflows involving node interactions, custom controls, and application navigation.

For example, you can verify that a custom node button responds to a click:

test('should trigger custom node action', async ({ page }) => {
  await page.goto('/workflow');

  await page.getByRole('button', {
    name: 'Run Workflow',
  }).click();

  await expect(
    page.getByText('Workflow Started')
  ).toBeVisible();
});

Use accessible roles and labels in your custom components to make tests more reliable.

Testing React Flow with Jest

Jest is commonly used for unit and component testing in React applications.

However, React Flow depends on browser APIs such as ResizeObserver and DOMMatrixReadOnly to measure nodes and calculate their positions.

These browser APIs may not be fully available in a Jest environment such as jsdom.

To test React Flow with Jest, you need to mock the required browser functionality.

Step 1: Create a React Flow Test Setup

Create a helper file such as mockReactFlow.ts:

class ResizeObserver {
  callback: ResizeObserverCallback;

  constructor(callback: ResizeObserverCallback) {
    this.callback = callback;
  }

  observe(target: Element) {
    setTimeout(() => {
      this.callback(
        [{ target } as ResizeObserverEntry],
        this
      );
    }, 0);
  }

  unobserve() {}

  disconnect() {}
}

class DOMMatrixReadOnly {
  m22: number;

  constructor(transform: string) {
    const scale = transform?.match(
      /scale\(([1-9.])\)/
    )?.[1];

    this.m22 = scale !== undefined ? +scale : 1;
  }
}

let initialized = false;

export const mockReactFlow = () => {
  if (initialized) return;
  initialized = true;

  global.ResizeObserver = ResizeObserver;

  // @ts-ignore
  global.DOMMatrixReadOnly = DOMMatrixReadOnly;

  Object.defineProperties(
    global.HTMLElement.prototype,
    {
      offsetHeight: {
        get() {
          return parseFloat(this.style.height) || 1;
        },
      },
      offsetWidth: {
        get() {
          return parseFloat(this.style.width) || 1;
        },
      },
    }
  );

  (global.SVGElement as any).prototype.getBBox = () => ({
    x: 0,
    y: 0,
    width: 0,
    height: 0,
  });
};

This helper provides the browser API implementations needed by React Flow during Jest tests.

Step 2: Initialize the Mock Before Testing

Call mockReactFlow() from your Jest setup file or before your test cases.

For example:

import { mockReactFlow } from './mockReactFlow';

beforeEach(() => {
  mockReactFlow();
});

You only need to initialize these overrides once. If you use a dedicated Jest setup file, you can configure it through the setupFilesAfterEnv option.

How to Test React Flow Nodes

Testing nodes is one of the most common requirements when developing workflow editors.

You should verify that each node renders the expected content and that custom node interactions work correctly.

Example using React Testing Library:

import { render, screen } from '@testing-library/react';
import { ReactFlow } from '@xyflow/react';

test('should render a workflow node', () => {
  const nodes = [
    {
      id: '1',
      position: { x: 100, y: 100 },
      data: { label: 'Start Node' },
    },
  ];

  render(
    <div style={{ width: 800, height: 600 }}>
      <ReactFlow
        nodes={nodes}
        edges={[]}
      />
    </div>
  );

  expect(
    screen.getByText('Start Node')
  ).toBeInTheDocument();
});

This example verifies that a node with the label "Start Node" is rendered.

For custom nodes, you can also test buttons, input fields, validation messages, and other interactive elements.

How to Test React Flow Edges

Testing edges requires special attention because React Flow needs to measure nodes before it can correctly render their connections.

For this reason, you should wait until the edge elements appear before checking the rendered edge count.

Example:

import { render, waitFor } from '@testing-library/react';
import { ReactFlow } from '@xyflow/react';

test('should render workflow edges', async () => {
  const { container } = render(
    <div style={{ width: 800, height: 600 }}>
      <ReactFlow
        nodes={nodes}
        edges={edges}
      />
    </div>
  );

  await waitFor(() => {
    const edgeCount = container.querySelectorAll(
      '.react-flow__edge'
    ).length;

    expect(edgeCount).toBeGreaterThan(0);
  });
});

This test waits for React Flow to render at least one edge before completing.

Important: Always provide a container with explicit width and height when rendering React Flow in tests. Without a measurable canvas, layout and rendering behavior may not work as expected.

Testing Mouse Events and Drag Interactions with Jest

React Flow uses d3-drag for certain drag interactions. This can cause problems when trying to simulate mouse events in Jest because d3-drag relies on browser functionality that is not fully available in jsdom.

If you are testing custom node buttons or other component interactions rather than the actual canvas dragging behavior, disable node dragging and pane dragging in the test.

<ReactFlow
  nodes={nodes}
  edges={edges}
  nodesDraggable={false}
  panOnDrag={false}
/>

This allows you to focus on testing custom component behavior without triggering unsupported drag functionality.

For actual node dragging and canvas interactions, use Cypress or Playwright in a real browser.

Best Practices for React Flow Testing

Follow these practices to make your React Flow tests more reliable and maintainable:

1. Choose the right framework: Use Cypress or Playwright for browser interactions and Jest for component-level tests.
2. Mock browser APIs: Configure ResizeObserver and DOMMatrixReadOnly when testing with Jest.
3. Set canvas dimensions: Always provide explicit width and height to the React Flow container.
4. Wait for node measurements: Allow React Flow to finish rendering before checking edge elements.
5. Test custom nodes separately: Verify buttons, inputs, labels, and other custom components.
6. Use accessible selectors: Prefer roles, labels, and visible text over fragile CSS selectors when possible.
7. Avoid unnecessary drag simulation in Jest: Use real-browser testing for complex drag-and-drop behavior.
8. Test complete workflows: Verify that important user actions produce the expected node and edge changes.

Conclusion: Build Reliable React Flow Applications

Testing is essential for maintaining reliable and scalable React Flow applications. By combining Jest for component tests with Cypress or Playwright for browser-based testing, you can validate node rendering, edge connections, user interactions, and workflow behavior.

A well-structured testing strategy helps developers identify issues early, prevent unexpected regressions, and deliver a better experience for users.

Explore VisualFlow for practical React Flow examples, custom workflow components, interactive diagrams, and inspiration for building your next node-based application.