vitest + react testing library - nodes and edges are not rendered to JSDOM #217

vasanthid · 2023-06-16T10:45:00Z

vasanthid
Jun 16, 2023

I am using reaflow 5.2.0

Component


import { Canvas, Node, Edge, Add} from 'reaflow'
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'
.......

const nodes = [
  {
    id: 0,
    height: 55,
    width: 270,
    data: {
       name: 'node-0'
    }
  },
 {
    id: 1,
    height: 55,
    width: 270,
    data: {
       name: 'node-1'
    }
  },
{
    id: 2,
    height: 55,
    width: 270,
    data: {
       name: 'node-2'
    }
  },
{
    id: 3,
    height: 55,
    width: 270,
    data: {
       name: 'node-3'
    }
  }
]
const edges = [
  { id: '0-1', from: 0, to: 1 },
  { id: '1-2', from: 1, to: 2 },
  { id: '2-3', from: 2, to: 3 }
]

 return (
      <TransformWrapper
        centerOnInit
        limitToBounds={true}
        wheel={{
          disabled: true
        }}
        panning={{
          disabled: false
        }}
        pinch={{
          disabled: false,
          step: 3
        }}
        doubleClick={{
          disabled: true,
          step: 0.7
        }}
      >
        <TransformComponent  wrapperStyle={{...wrapperStyle}}>
          <Canvas
            data-testid='canvas'
            maxHeight={9000}
            zoom={1}
            maxZoom={1}
            minZoom={-0.5}
            nodes={nodes}
            edges={edges}
            ref={ref}
            node={({ properties: node }) => {
              return (
                <Node>
                  <foreignObject height={node.height} width={node.width} x={0} y={0}>
                    ....
                  </foreignObject>
                </Node>
              )
            }}
            edge={<Edge add={<Add hidden={false} className='custom' />} onAdd={(event, edge) => {
              console.log('edge', edge)
            }} />}
          />
        </TransformComponent>
       </TransformWrapper>

When I do screen.debug(undefined, 300000) in vitest test, I get below

<body>
  <div>
    <div
      class="react-transform-wrapper transform-component-module_wrapper__1_Fgj "
      style="height: calc(100% - 24px); width: auto;"
    >
      <div
        class="react-transform-component transform-component-module_content__2jYgh "
        style="transform: translate3d(0px, 0px, 0) scale(1);"
      >
        <div
          class="_container_32rpv_1 _pannable_32rpv_2"
          style="height: 100%; width: 100%;"
        >
          <svg
            height="504"
            id="ref-1"
            width="2000"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <marker
                id="end-arrow"
                markerHeight="8"
                markerWidth="8"
                orient="auto"
                refX="8"
                viewBox="0 -4 8 8"
              >
                <path
                  class="_arrow_4r5xg_1"
                  d="M0,-4L8,0L0,4"
                  transform="translate(0, 0) rotate(0)"
                />
              </marker>
            </defs>
            <g
              opacity="0"
              style="transform: scale(0); transform-origin: 0px 0px;"
              transform-origin="0px 0px"
            />
          </svg>
        </div>
      </div>
    </div>
  </div>
</body>

As you see, nodes and edges are not rendered and as a result all my assertions are failing.

expect(screen.getByTestId('canvas')).toBeInTheDocument() ==> fails

I do have below lines in my test file.

import { ResizeObserver, ResizeObserverEntry } from '@juggle/resize-observer'
window.ResizeObserver = ResizeObserver
window.ResizeObserverEntry = ResizeObserverEntry

Can someone please help?

Answered by vasanthid

Jun 16, 2023

I had to wrap my assertions in async/ await waitFor(() => {}) to get the nodes and edges rendered.

View full answer

vasanthid · 2023-06-16T22:42:50Z

vasanthid
Jun 16, 2023
Author

I had to wrap my assertions in async/ await waitFor(() => {}) to get the nodes and edges rendered.

2 replies

amcdnl Jun 19, 2023
Maintainer

The rendering is async so that makes sense! @vasanthid - Would u mind PR'ing some docs around this for others?

vasanthid Jun 19, 2023
Author

@amcdnl - Sure, will definitely try to submit PR in coming days once I get below test working.

I am trying to write tests for the scenario mentioned at https://reaflow.dev/?path=/story/demos-edges--adding

I was able to assert on the number of 'add' icons rendered using className.

Now, I would like to test the callback passed to onAdd prop for Edge component.

<Canvas nodes={nodes} edges={edges} edge={<Edge add={<Add hidden={false} className='add-icon' />} onAdd={(event, edge) => { }...../>

I haven't been successful yet in writing tests for this scenario. For some reason, not able to trigger click event on the SVGElement through react testing library. I spent significant amount of time on this.

Other alternative, I was thinking is to mock 'Edge' component to render foreignObject with button so vitest can fire click event. I would like to avoid mocking of Edge and possibly Add components. I haven't tried this yet.

Any ideas?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

vitest + react testing library - nodes and edges are not rendered to JSDOM #217

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

vitest + react testing library - nodes and edges are not rendered to JSDOM #217

vasanthid Jun 16, 2023

Component

Replies: 1 comment · 2 replies

vasanthid Jun 16, 2023 Author

amcdnl Jun 19, 2023 Maintainer

vasanthid Jun 19, 2023 Author

vasanthid
Jun 16, 2023

Replies: 1 comment 2 replies

vasanthid
Jun 16, 2023
Author

amcdnl Jun 19, 2023
Maintainer

vasanthid Jun 19, 2023
Author