react enzyme getting undefine onMouseDown for nativeEvent offsetX and offsetY

Question

In react I want to test some functionality of canvas drawing for mouseDown/mouseMove/mouseUp I am getting the offset value. Now to test that I use find to find the element where mouseDown event will fire then use invoke function to call onMouseDown and then use then to get the expected value. Now I am getting nativeEvent of undefine. Can you please help me how can I get the proper value of nativeEvent offsetX and offsetY to pass the test case. Inside react component:

<div className="canvas">
        <canvas
          id={canvasID}
          width={canvas.canvasWidth}
          height={canvas.canvasHeight}
          onMouseDown={e => {
            const { nativeEvent } = e
            // Updating eventname and offsetX, offsetY

            dispatch(
              taskType.changeEvent({
                eventName: eventType.MOUSE_DOWN,
                nativeEvent
              })
            )
            this.handleMouseDown(nativeEvent)
          }}
          onMouseMove={e => {
            const { nativeEvent } = e
            // Updating eventname and offsetX, offsetY

            dispatch(
              taskType.changeEvent({
                eventName: eventType.MOUSE_MOVE,
                nativeEvent
              })
            )

            this.handleMouseMove(nativeEvent)
          }}
          onMouseUp={e => {
            const { nativeEvent } = e
            // Updating eventname and offsetX, offsetY

            dispatch(
              taskType.changeEvent({
                eventName: eventType.MOUSE_UP,
                nativeEvent
              })
            )
          }}
          onClick={e => {
            const { nativeEvent } = e
            // Updating eventname and offsetX, offsetY

            dispatch(
              taskType.changeEvent({
                eventName: eventType.CLICK,
                nativeEvent
              })
            )
            this.handleClick(nativeEvent)
          }}
        />

        <div
          className={`primitiveToolbar formGroup ${
            toolbarrequired === "true" ? "" : "hide"
          }`}
        >
          <Toolbar canvasProps={canvas} toolbarno={toolbarno} />
        </div>
      </div>

For Test case

const canvas = mount(
      shallow(
        <Provider store={store}>
          <Canvas {...props} />
        </Provider>
      ).get(0)
    )
 canvas
      .find("canvas")
      .invoke("onMouseDown")()
      .then(() => {
        expect(selectNonDirectedLinePrimitive.default).toHaveBeenCalled()
      })

Error

TypeError: Cannot read property 'nativeEvent' of undefined

                height={canvas.canvasHeight}
                 onMouseDown={e => {
>                  const { nativeEvent } = e
                           ^
                  // Updating eventname and offsetX, offsetY
  
                   dispatch(

user3335966 user3335966 · Accepted Answer · 2020-09-23T08:20:12

You can use second argument in invoke for this: .invoke('prop')(<this one>)

.invoke('onMouseDown')({
  nativeEvent: {
    offsetX: 666,
    offsetY: 13
  }
})

react enzyme getting undefine onMouseDown for nativeEvent offsetX and offsetY

1 Answers