search

konvajs / react-konva-utils

MIT License
56 stars 12 forks source link

ERROR TESTING WITH JEST #33

Closed epsilon11101 closed 10 months ago

epsilon11101 commented 11 months ago

package.json

{ "name": "ix2code-editor", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint", "prodTest": "jest", "test": "jest --watchAll", "coverage": "jest --coverage" }, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.13", "@mui/material": "^5.14.13", "@mui/types": "^7.2.6", "@types/css-mediaquery": "^0.1.4", "@types/dropzone": "^5.7.6", "css-mediaquery": "^0.1.2", "jotai": "^2.4.3", "jotai-xstate": "^0.3.0", "konva": "^9.2.2", "nanoid": "^5.0.2", "next": "13.5.4", "normalize.css": "^8.0.1", "react": "^18", "react-dom": "^18", "react-dropzone": "^14.2.3", "react-hook-form": "^7.47.0", "react-konva": "^18.2.10", "react-konva-utils": "^1.0.5", "xstate": "^4.38.3" }, "devDependencies": { "@testing-library/jest-dom": "^6.1.3", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.5.1", "@types/jest": "^29.5.5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "13.5.4", "eslint-plugin-jest-dom": "^5.1.0", "eslint-plugin-testing-library": "^6.1.0", "jest": "^29.7.0", "jest-canvas-mock": "^2.5.2", "jest-environment-jsdom": "^29.7.0", "typescript": "^5" } }

Component:

 "use client";
import { Html } from "react-konva-utils";
import { useTheme } from "@mui/material/styles";
import { useAtom } from "jotai";
import {
  boxAtoms,
  selectedShape,
  undoBoxAtoms,
} from "@/jotai-store/atomStore.jotai";

import CloseIcon from "@mui/icons-material/Close";
import { ContextMenuStyled } from "./ContextMenu.styled";

import { ContextMenuInterface } from "@/interfaces";

const ContextMenu = ({ boxProps, onClose }: ContextMenuInterface) => {
  const theme = useTheme();
  const [undoBoxes, setUndoBoxes] = useAtom(undoBoxAtoms);
  const [boxes, setBoxes] = useAtom(boxAtoms);
  const [selectedId, selectShape] = useAtom(selectedShape);

  const handleClickOption =
    (option: string) => (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => {
      if (option === "option1" && selectedId) {
        const selectedBox = boxes.find((box) => box.id === selectedId);
        setBoxes(boxes.filter((box) => box.id !== selectedId));
        setUndoBoxes([...undoBoxes!, selectedBox!]);
        selectShape(null);
      }

      onClose();
    };

  return (
    <Html>
      <ContextMenuStyled theme={theme} coordinates={boxProps}>
        <ul>
          <li onClick={handleClickOption("option1")}>
            <CloseIcon />
            Delete
          </li>
        </ul>
      </ContextMenuStyled>
    </Html>
  );
};
export default ContextMenu;

SIMPLE TEST:

 import React from "react";

import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";

import ContextMenu from "@/components/UI/Canvas/KonvaContainer/ContextMenu/ContextMenu";
import { ContextMenuInterface } from "@/interfaces";

describe("ContextMenu", () => {
  const props: ContextMenuInterface = {
    boxProps: {
      x: 0,
      y: 0,
    },
    onClose: jest.fn(),
  };

  it("should render ContextMenu", () => {
    render(<ContextMenu {...props} />);
  });

});

ERROR:

` console.error Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. at Group at Html (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-konva-utils/lib/html.js:34:17) at boxProps (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/src/components/UI/Canvas/KonvaContainer/ContextMenu/ContextMenu.tsx:17:24)

  17 |
  18 |   it("should render ContextMenu", () => {
> 19 |     render(<ContextMenu {...props} />);
     |           ^
  20 |   });
  21 | });
  22 |

  at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
  at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
  at createElement (node_modules/react-dom/cjs/react-dom.development.js:9761:9)
  at createInstance (node_modules/react-dom/cjs/react-dom.development.js:10941:20)
  at completeWork (node_modules/react-dom/cjs/react-dom.development.js:22187:28)
  at completeUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26593:16)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26568:5)
  at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
  at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
  at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25738:74)
  at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
  at act (node_modules/react/cjs/react.development.js:2582:11)
  at node_modules/@testing-library/react/dist/act-compat.js:46:25
  at renderRoot (node_modules/@testing-library/react/dist/pure.js:161:26)
  at render (node_modules/@testing-library/react/dist/pure.js:247:10)
  at Object.<anonymous> (__test__/src/components/UI/Canvas/KonvaContainer/ContextMenu/ContextMenu.test.tsx:19:11)

console.error
  Warning: The tag <Group> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
      at Group
      at Html (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-konva-utils/lib/html.js:34:17)
      at boxProps (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/src/components/UI/Canvas/KonvaContainer/ContextMenu/ContextMenu.tsx:17:24)

  17 |
  18 |   it("should render ContextMenu", () => {
> 19 |     render(<ContextMenu {...props} />);
     |           ^
  20 |   });
  21 | });
  22 |

  at printWarning (node_modules/react-dom/cjs/react-dom.development.js:86:30)
  at error (node_modules/react-dom/cjs/react-dom.development.js:60:7)
  at createElement (node_modules/react-dom/cjs/react-dom.development.js:9816:9)
  at createInstance (node_modules/react-dom/cjs/react-dom.development.js:10941:20)
  at completeWork (node_modules/react-dom/cjs/react-dom.development.js:22187:28)
  at completeUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26593:16)
  at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:26568:5)
  at workLoopSync (node_modules/react-dom/cjs/react-dom.development.js:26466:5)
  at renderRootSync (node_modules/react-dom/cjs/react-dom.development.js:26434:7)
  at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25738:74)
  at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
  at act (node_modules/react/cjs/react.development.js:2582:11)
  at node_modules/@testing-library/react/dist/act-compat.js:46:25
  at renderRoot (node_modules/@testing-library/react/dist/pure.js:161:26)
  at render (node_modules/@testing-library/react/dist/pure.js:247:10)
  at Object.<anonymous> (__test__/src/components/UI/Canvas/KonvaContainer/ContextMenu/ContextMenu.test.tsx:19:11)

console.error
  Error: Uncaught [TypeError: group.getStage is not a function]
      at reportException (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:66:24)
      at innerInvokeEventListeners (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
      at invokeEventListeners (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
      at HTMLUnknownElementImpl._dispatch (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
      at HTMLUnknownElementImpl.dispatchEvent (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
      at HTMLUnknownElement.dispatchEvent (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
      at Object.invokeGuardedCallbackDev (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:4213:16)
      at invokeGuardedCallback (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:4277:31)
      at reportUncaughtErrorInDEV (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:22838:5)
      at captureCommitPhaseError (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:27126:5)
      at commitLayoutMountEffects_complete (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:24690:9)
      at commitLayoutEffects_begin (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:24674:7)
      at commitLayoutEffects (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:24612:3)
      at commitRootImpl (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:26823:5)
      at commitRoot (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:26682:5)
      at finishConcurrentRender (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:25981:9)
      at performConcurrentWorkOnRoot (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:25809:7)
      at flushActQueue (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react/cjs/react.development.js:2667:24)
      at act (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react/cjs/react.development.js:2582:11)
      at /home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/@testing-library/react/dist/act-compat.js:46:25
      at renderRoot (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/@testing-library/react/dist/pure.js:161:26)
      at render (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/@testing-library/react/dist/pure.js:247:10)
      at Object.<anonymous> (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/__test__/src/components/UI/Canvas/KonvaContainer/ContextMenu/ContextMenu.test.tsx:19:11)
      at Promise.then.completed (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/utils.js:298:28)
      at new Promise (<anonymous>)
      at callAsyncCircusFn (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/utils.js:231:10)
      at _callCircusTest (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/run.js:316:40)
      at processTicksAndRejections (node:internal/process/task_queues:95:5)
      at _runTest (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/run.js:252:3)
      at _runTestsForDescribeBlock (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/run.js:126:9)
      at _runTestsForDescribeBlock (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/run.js:121:9)
      at run (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/run.js:71:3)
      at runAndTransformResultsToJestFormat (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
      at jestAdapter (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
      at runTestInternal (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-runner/build/runTest.js:367:16)
      at runTest (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-runner/build/runTest.js:444:34)
      at Object.worker (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-runner/build/testWorker.js:108:12) {
    detail: TypeError: group.getStage is not a function
        at /home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-konva-utils/lib/html.js:73:36
        at commitHookEffectListMount (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:23150:26)
        at commitLayoutEffectOnFiber (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:23273:15)
        at commitLayoutMountEffects_complete (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:24688:9)
        at commitLayoutEffects_begin (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:24674:7)
        at commitLayoutEffects (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:24612:3)
        at commitRootImpl (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:26823:5)
        at commitRoot (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:26682:5)
        at finishConcurrentRender (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:25981:9)
        at performConcurrentWorkOnRoot (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-dom/cjs/react-dom.development.js:25809:7)
        at flushActQueue (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react/cjs/react.development.js:2667:24)
        at act (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react/cjs/react.development.js:2582:11)
        at /home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/@testing-library/react/dist/act-compat.js:46:25
        at renderRoot (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/@testing-library/react/dist/pure.js:161:26)
        at render (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/@testing-library/react/dist/pure.js:247:10)
        at Object.<anonymous> (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/__test__/src/components/UI/Canvas/KonvaContainer/ContextMenu/ContextMenu.test.tsx:19:11)
        at Promise.then.completed (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/utils.js:298:28)
        at new Promise (<anonymous>)
        at callAsyncCircusFn (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/utils.js:231:10)
        at _callCircusTest (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/run.js:316:40)
        at processTicksAndRejections (node:internal/process/task_queues:95:5)
        at _runTest (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/run.js:252:3)
        at _runTestsForDescribeBlock (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/run.js:126:9)
        at _runTestsForDescribeBlock (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/run.js:121:9)
        at run (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/run.js:71:3)
        at runAndTransformResultsToJestFormat (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:122:21)
        at jestAdapter (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:79:19)
        at runTestInternal (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-runner/build/runTest.js:367:16)
        at runTest (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-runner/build/runTest.js:444:34)
        at Object.worker (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/jest-runner/build/testWorker.js:108:12),
    type: 'unhandled exception'
  }

  17 |
  18 |   it("should render ContextMenu", () => {
> 19 |     render(<ContextMenu {...props} />);
     |           ^
  20 |   });
  21 | });
  22 |

  at VirtualConsole.<anonymous> (node_modules/jest-environment-jsdom/build/index.js:63:23)
  at reportException (node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:70:28)
  at innerInvokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:353:9)
  at invokeEventListeners (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:286:3)
  at HTMLUnknownElementImpl._dispatch (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:233:9)
  at HTMLUnknownElementImpl.dispatchEvent (node_modules/jsdom/lib/jsdom/living/events/EventTarget-impl.js:104:17)
  at HTMLUnknownElement.dispatchEvent (node_modules/jsdom/lib/jsdom/living/generated/EventTarget.js:241:34)
  at Object.invokeGuardedCallbackDev (node_modules/react-dom/cjs/react-dom.development.js:4213:16)
  at invokeGuardedCallback (node_modules/react-dom/cjs/react-dom.development.js:4277:31)
  at reportUncaughtErrorInDEV (node_modules/react-dom/cjs/react-dom.development.js:22838:5)
  at captureCommitPhaseError (node_modules/react-dom/cjs/react-dom.development.js:27126:5)
  at commitLayoutMountEffects_complete (node_modules/react-dom/cjs/react-dom.development.js:24690:9)
  at commitLayoutEffects_begin (node_modules/react-dom/cjs/react-dom.development.js:24674:7)
  at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:24612:3)
  at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:26823:5)
  at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:26682:5)
  at finishConcurrentRender (node_modules/react-dom/cjs/react-dom.development.js:25981:9)
  at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25809:7)
  at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
  at act (node_modules/react/cjs/react.development.js:2582:11)
  at node_modules/@testing-library/react/dist/act-compat.js:46:25
  at renderRoot (node_modules/@testing-library/react/dist/pure.js:161:26)
  at render (node_modules/@testing-library/react/dist/pure.js:247:10)
  at Object.<anonymous> (__test__/src/components/UI/Canvas/KonvaContainer/ContextMenu/ContextMenu.test.tsx:19:11)

console.error
  The above error occurred in the <Html> component:

      at Html (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/node_modules/react-konva-utils/lib/html.js:34:17)
      at boxProps (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/src/components/UI/Canvas/KonvaContainer/ContextMenu/ContextMenu.tsx:17:24)

  Consider adding an error boundary to your tree to customize error handling behavior.
  Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

  17 |
  18 |   it("should render ContextMenu", () => {
> 19 |     render(<ContextMenu {...props} />);
     |           ^
  20 |   });
  21 | });
  22 |

  at logCapturedError (node_modules/react-dom/cjs/react-dom.development.js:18687:23)
  at update.callback (node_modules/react-dom/cjs/react-dom.development.js:18720:5)
  at callCallback (node_modules/react-dom/cjs/react-dom.development.js:13923:12)
  at commitUpdateQueue (node_modules/react-dom/cjs/react-dom.development.js:13944:9)
  at commitLayoutEffectOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23391:13)
  at commitLayoutMountEffects_complete (node_modules/react-dom/cjs/react-dom.development.js:24688:9)
  at commitLayoutEffects_begin (node_modules/react-dom/cjs/react-dom.development.js:24674:7)
  at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:24612:3)
  at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:26823:5)
  at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:26682:5)
  at performSyncWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:26117:3)
  at flushSyncCallbacks (node_modules/react-dom/cjs/react-dom.development.js:12042:22)
  at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:26959:3)
  at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:26682:5)
  at finishConcurrentRender (node_modules/react-dom/cjs/react-dom.development.js:25981:9)
  at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25809:7)
  at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
  at act (node_modules/react/cjs/react.development.js:2582:11)
  at node_modules/@testing-library/react/dist/act-compat.js:46:25
  at renderRoot (node_modules/@testing-library/react/dist/pure.js:161:26)
  at render (node_modules/@testing-library/react/dist/pure.js:247:10)
  at Object.<anonymous> (__test__/src/components/UI/Canvas/KonvaContainer/ContextMenu/ContextMenu.test.tsx:19:11)

● ContextMenu › should render ContextMenu

TypeError: group.getStage is not a function

  17 |
  18 |   it("should render ContextMenu", () => {
> 19 |     render(<ContextMenu {...props} />);
     |           ^
  20 |   });
  21 | });
  22 |

  at node_modules/react-konva-utils/lib/html.js:73:36
  at commitHookEffectListMount (node_modules/react-dom/cjs/react-dom.development.js:23150:26)
  at commitLayoutEffectOnFiber (node_modules/react-dom/cjs/react-dom.development.js:23273:15)
  at commitLayoutMountEffects_complete (node_modules/react-dom/cjs/react-dom.development.js:24688:9)
  at commitLayoutEffects_begin (node_modules/react-dom/cjs/react-dom.development.js:24674:7)
  at commitLayoutEffects (node_modules/react-dom/cjs/react-dom.development.js:24612:3)
  at commitRootImpl (node_modules/react-dom/cjs/react-dom.development.js:26823:5)
  at commitRoot (node_modules/react-dom/cjs/react-dom.development.js:26682:5)
  at finishConcurrentRender (node_modules/react-dom/cjs/react-dom.development.js:25981:9)
  at performConcurrentWorkOnRoot (node_modules/react-dom/cjs/react-dom.development.js:25809:7)
  at flushActQueue (node_modules/react/cjs/react.development.js:2667:24)
  at act (node_modules/react/cjs/react.development.js:2582:11)
  at node_modules/@testing-library/react/dist/act-compat.js:46:25
  at renderRoot (node_modules/@testing-library/react/dist/pure.js:161:26)
  at render (node_modules/@testing-library/react/dist/pure.js:247:10)
  at Object.<anonymous> (__test__/src/components/UI/Canvas/KonvaContainer/ContextMenu/ContextMenu.test.tsx:19:11)`

I try everything, the errors disappear when I replace HTML with another tag like Group, etc., but I need the HTML tag. So, how can I fix that? How can I test this?

lavrton commented 10 months ago

I am not sure yet how to test these elements. They are not designed to be rendered in pure DOM or testing env. And I don't think @testing-library can catch context of react-konva rendering.

epsilon11101 commented 10 months ago

yep, i figure out it , i used a simple solution to fix it, but thanks any way

const isTestEnv = process.env.NODE_ENV === "test";

  return isTestEnv ? (
    <div>
          .......
    </div>
  ) : (
    <Html>
           .....
    </Html>
  );