Konva and Jest + Next.js

Question

I'm facing an issue while trying to test a React component called KonvaImageElement that uses the Image component from the react-konva library. The test is throwing the following warning:

Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

Here is the relevant code:

Component Code (KonvaImageElement):

"use client";
import { useState, useEffect } from "react";
import { useAtomValue } from "jotai";
import { Image as KonvaImage } from "react-konva";
import { projectAtom } from "../../../../../jotai-store/atomStore.jotai";

const KonvaImageElement = () => {
  const imageProps = useAtomValue(projectAtom);
  const [imageObj, setImageObj] = useState(new window.Image());

  useEffect(() => {
    const image_obj = new window.Image();

    image_obj.src = imageProps.projectFile
      ? URL.createObjectURL(imageProps.projectFile)
      : "/assets/images/error/404.webp";

    image_obj.alt =
      imageProps.projectName === "" ? "404" : imageProps.projectName;

    image_obj.onload = () => {
      setImageObj(image_obj);
    };

    return () => {
      imageObj.src = "";
      setImageObj(new window.Image());
    };
  }, []);

  return (
    <KonvaImage
      image={imageObj}
      x={0}
      y={0}
      width={imageObj.width}
      height={imageObj.height}
      // alt={imageObj.alt}
    />
  );
};

export default KonvaImageElement;

Test Code (KonvaImageElement.test.tsx):

`import React from "react";
import "@testing-library/jest-dom";
import {
  render,
  renderHook,
  screen,
  act,
  waitFor,
} from "@testing-library/react";

import KonvaImageElement from "@/components/UI/Canvas/KonvaContainer/KonvaImage/KonvaImage";

describe("KonvaImage component tests", () => {
  test("Should render KonvaImage component", () => {
    const { container } = render(<KonvaImageElement />);

    expect(container).toMatchSnapshot();
  });
});
`

ERROR :

*.test.tsx ● Console

console.error
  Warning: <Image /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
      at Image
      at KonvaImageElement (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/src/components/UI/Canvas/KonvaContainer/KonvaImage/KonvaImage.tsx:8:34)

  13 | describe("KonvaImage component tests", () => {
  14 |   test("Should render KonvaImage component", () => {
> 15 |     const { container } = render(<KonvaImageElement />);
     |                                 ^
  16 |
  17 |     expect(container).toMatchSnapshot();
  18 |   });

  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/KonvaImage/KonvaImage.test.tsx:15:33)

console.error
  Warning: The tag <Image> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
      at Image
      at KonvaImageElement (/home/sa/Documents/IXMATIX/yuyu-frontend/code/yuyu-frontend/src/components/UI/Canvas/KonvaContainer/KonvaImage/KonvaImage.tsx:8:34)

  13 | describe("KonvaImage component tests", () => {
  14 |   test("Should render KonvaImage component", () => {
> 15 |     const { container } = render(<KonvaImageElement />);
     |                                 ^
  16 |
  17 |     expect(container).toMatchSnapshot();
  18 |   });

  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/KonvaImage/KonvaImage.test.tsx:15:33)*

I tried many solutions but no one works , has anyone can help me please

Additional Information: "react": "^18", "react-dom": "^18", "react-konva": "^18.2.10", "react-konva-utils": "^1.0.5",

I would appreciate any insights or solutions to resolve this warning during testing.

Answer 1

Error: 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.

solution : https://github.com/konvajs/react-konva-utils/issues/33