Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

edges not rendered to JSDOM when testing with Jest and React Testing Library

See original GitHub issue

Hi!

I’m having some issue on making the nodes and edges to show up when I’m rendering the graph to JSDOM with Jest and React Testing Library. I have the following set up:

//App.js
import ReactFlow from "react-flow-renderer";

const App = () => (
  <ReactFlow
    elements={[
      {
        data: { label: "a" },
        id: "b",
        position: { x: 10, y: 10 },
      },
      {
        data: { label: "b" },
        id: "a",
        position: { x: 10, y: 80 },
      },
      {
        id: "edge-a-b",
        source: "a",
        target: "b",
      },
    ]}
  />
);

And then I try to test it:

//App.test.js
import { render } from "@testing-library/react";

import App from "./App";

it("should render", async () => {
  const { debug, getByText } = render(<App />);

  debug(); 
  expect(getByText("a")).toBeInTheDocument();
});

The test fails because the node is not rendered. If I do a debug, I can see that the wrapper elements for the graph are being rendered, but no nodes or edges.

<body>
  <div>
    <div
      class="react-flow"
    >
      <div
        class="react-flow__renderer react-flow__zoompane"
      >
        <div
          class="react-flow__nodes"
          style="transform: translate(0px,0px) scale(1);"
        />
        <svg
          class="react-flow__edges"
          height="500"
          width="500"
        >
          <defs>
            <marker
              class="react-flow__arrowhead"
              id="react-flow__arrowclosed"
              markerHeight="12.5"
              markerWidth="12.5"
              orient="auto"
              refX="0"
              refY="0"
              viewBox="-10 -10 20 20"
            >
              <polyline
                fill="#b1b1b7"
                points="-5,-4 0,0 -5,4 -5,-4"
                stroke="#b1b1b7"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1"
              />
            </marker>
            <marker
              class="react-flow__arrowhead"
              id="react-flow__arrow"
              markerHeight="12.5"
              markerWidth="12.5"
              orient="auto"
              refX="0"
              refY="0"
              viewBox="-10 -10 20 20"
            >
              <polyline
                fill="none"
                points="-5,-4 0,0 -5,4"
                stroke="#b1b1b7"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="1.5"
              />
            </marker>
          </defs>
          <g
            transform="translate(0,0) scale(1)"
          />
        </svg>
        <div
          class="react-flow__pane"
        />
      </div>
    </div>
  </div>
</body>

I wanted to set up a codesandbox, but I couldn’t get to polyfill ResizeObserver.

Any ideas on what might be going on and how to ‘fix’ it?

EDIT: if I pass a callback to onLoad, I can see the elements in there:

import ReactFlow from "react-flow-renderer";

const App = () => {
  const onLoad = (instance) => {
    console.log(instance.getElements());
  };

  return (<ReactFlow elements={[...]} onLoad={onLoad} />);
};

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:31 (11 by maintainers)

Top GitHub Comments

3reactions

gfox1984commented, Sep 9, 2021

I put it in the test file itself (eg: MyComponent.test.tsx) inside beforeAll. Below is my setup:

beforeAll(() => {
  // Setup ResizeObserver and offset* properties
  // see: https://github.com/wbkd/react-flow/issues/716

  window.ResizeObserver =
    window.ResizeObserver ||
    jest.fn().mockImplementation(() => ({
      disconnect: jest.fn(),
      observe: jest.fn(),
      unobserve: jest.fn(),
    }));

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

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

@moklick I think it would be useful to add an example to the site. Most people use Jest + Testing Library in their application, and setting up tests is a bit challenging.

2reactions

moklickcommented, Sep 5, 2022

Hey everyone,

I looked into this but I haven’t found a good solution yet. There are two problems:

ReactFlow measures nodes and updates the dimensions via ResizeObserver. The ResizeObserver doesn’t seem to work while running tests. This is fixable. I could update the nodes immediately while we are in a testing environment.
When I apply the fix mentioned above, I get another error: "[TypeError: window.DOMMatrixReadOnly is not a constructor" I don’t understand why this is not supported by jest or why I can’t find anything about it. It’s a dom library that is supoorted by all browsers https://developer.mozilla.org/en-US/docs/Web/API/DOMMatrixReadOnly

Can anyone help here?

Top Results From Across the Web

Setup - Testing Library

In these docs we'll demonstrate configuring Jest, but you should be able to do similar things with any testing framework (React Testing Library...

Target container is not a DOM element. while testing ...

The reason this happens is the document generated by jest is empty, it does not contain your root div , so you should...

Understanding how react-testing-library works with Kent C ...

Kent walks us through the internals of dom-testing-library and react-testing-library. There is a lot of set-up and tear down when testing UI components....

Our Journey From JSDOM and React Testing Library Toward ...

We're diving into why and how we've migrated from Jest and React Testing Library (RTL) to Cypress Component Testing (CCT) for UI integration ......

Setting up Jest + React-Testing-Library - DEV Community ‍ ‍

Examples; Curated resources to help you get started with RTL. File structure: Article I wrote on How I structure my React Apps (not...