Fix issues that are showing in test console

client/package.json

@@ -6,6 +6,7 @@
   "files": [
     "dist"
   ],
+  "license": "MIT",
   "main": "dist/react-image-annotate.js",
   "dependencies": {
     "@emotion/react": "^11.11.4",

client/src/ImageUpload/ImageUpload.test.js

@@ -56,6 +56,7 @@ const renderComponent = (props = {}) =>
 describe('ImageUpload', () => {
   beforeEach(() => {
     console.error = jest.fn()
+    console.warn = jest.fn()
     jest.clearAllMocks()
   })
 

client/src/KeyframeTimeline/index.jsx

@@ -1,6 +1,6 @@
 // @flow weak
 
-import React, {useEffect, useMemo, useState} from "react"
+import React, {Fragment, useEffect, useMemo, useState} from "react"
 import {createTheme, styled, ThemeProvider} from "@mui/material/styles"
 import range from "lodash/range"
 import * as colors from "@mui/material/colors"
@@ -173,7 +173,7 @@ export default ({
     <ThemeProvider theme={theme}>
       <Container onMouseMove={onMouseMove} onMouseUp={onMouseUp} ref={ref}>
         {range(0, duration, majorInterval).map((a) => (
-          <>
+          <Fragment key={a}>
             <Tick
               key={a}
               style={{left: (a / duration) * bounds.width, height: "50%"}}
@@ -186,7 +186,7 @@ export default ({
             >
               {getTimeString(a)}
             </TickText>
-          </>
+          </Fragment>
         ))}
         {range(0, duration, minorInterval)
           .filter((a) => !Number.isInteger(a / majorInterval))

client/src/PointDistances/index.jsx

@@ -68,7 +68,7 @@ export const PointDistances = ({
                     ).toFixed(pointDistancePrecision) + "%"
                 }
                 return (
-                  <Fragment>
+                  <Fragment key={`${pr1}-${pr2}`}>
                     <path
                       d={`M${pr1.x + pr1.w / 2},${pr1.y + pr1.h / 2} L${
                         pr2.x + pr2.w / 2

client/src/RegionSelectorSidebarBox/RegionSelectorSidebarBox.test.js

@@ -3,6 +3,11 @@ import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { RegionSelectorSidebarBox } from "./index";
 
+// Mock the useTranslation hook
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: key => key }),
+}));
+
 describe("RegionSelectorSidebarBox", () => {
   const mockRegions = [
     {

client/src/RegionSelectorSidebarBox/index.jsx

@@ -205,7 +205,11 @@ const Row = ({
           </Tooltip>
         )
       }
-      trash={<Tooltip title={t("delete_region")}><TrashIcon onClick={() => onDeleteRegion(r)} className="icon2" data-testid={`DeleteIcon-${r.id}`} /> </Tooltip>}
+      trash={
+        <Tooltip title={t("delete_region")}>
+          <TrashIcon onClick={() => onDeleteRegion(r)} className="icon2" data-testid={`DeleteIcon-${r.id}`} />
+        </Tooltip>
+      }
       lock={
         r.locked ? (
           <Tooltip title={t("lock_region")}>

client/src/RegionShapes/RegionShapes.test.js

@@ -57,13 +57,15 @@ const mockRegions = [
   describe('WrappedRegionList Component', () => {
     it('renders without crashing', () => {
       const { container } = render(
-        <WrappedRegionList
-          regions={mockRegions}
-          iw={100}
-          ih={100}
-          keypointDefinitions={{}}
-          fullSegmentationMode={false}
-        />
+        <svg>
+          <WrappedRegionList
+            regions={mockRegions}
+            iw={100}
+            ih={100}
+            keypointDefinitions={{}}
+            fullSegmentationMode={false}
+          />
+        </svg>
       );
       expect(container).toBeInTheDocument();
     });

client/src/workspace/Header/Header.test.js

@@ -52,12 +52,6 @@ describe("Header", () => {
     items.filter((item) => item.name !== "Download").forEach((item) => {
       // Adjust the label to match the actual rendered text content
       const expectedButtonText = `Mock Icon ${item.name === "Item1" ? 1 : 2} ${item.label}`;
-
-      // Print out the roles and names for debugging
-      const buttons = screen.getAllByRole("button");
-      buttons.forEach((button) => {
-        console.log(`Role: ${button.getAttribute("role")}, Name: ${button.textContent}`);
-      });
 
       expect(screen.getByRole("button", { name: expectedButtonText })).toBeInTheDocument();
       expect(screen.getByText(item.label)).toBeInTheDocument();