WIP: Fix test warnings

package.json

@@ -111,7 +111,7 @@
     "@react-three/test-renderer": "8.2.1",
     "@svgr/webpack": "5.5.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.2.0",
+    "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^12.1.10",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",

src/components/DownloadButton/DownloadButton.test.js

@@ -7,6 +7,8 @@ import FileSaver from "file-saver";
 import JSZip from "jszip";
 import JSZipUtils from "jszip-utils";
 
+import "../../consoleMock";
+
 jest.mock("file-saver");
 jest.mock("jszip");
 jest.mock("jszip-utils", () => ({

src/components/Editor/EditorInput/EditorInput.test.js

@@ -11,6 +11,8 @@ import {
 import { matchMedia, setMedia } from "mock-match-media";
 import { MOBILE_BREAKPOINT } from "../../../utils/mediaQueryBreakpoints";
 
+import "../../../consoleMock";
+
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
 let mockMediaQuery = (query) => {

src/components/Editor/NewComponentButton/NewComponentButton.test.js

@@ -2,6 +2,7 @@ import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
+import "../../../consoleMock";
 
 import NewComponentButton from "./NewComponentButton";
 import { showNewFileModal } from "../../../redux/EditorSlice";

src/components/Editor/Project/Project.test.js

@@ -7,6 +7,8 @@ import Project from "./Project";
 import { showSavedMessage } from "../../../utils/Notifications";
 import { MemoryRouter } from "react-router-dom";
 
+import "../../../consoleMock";
+
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
 jest.mock("react-router-dom", () => ({

src/components/Editor/Runners/HtmlRunner/HtmlRunner.test.js

@@ -7,6 +7,7 @@ import { codeRunHandled, triggerCodeRun } from "../../../../redux/EditorSlice";
 import { MemoryRouter } from "react-router-dom";
 import { matchMedia, setMedia } from "mock-match-media";
 import { MOBILE_BREAKPOINT } from "../../../../utils/mediaQueryBreakpoints";
+import "../../../../consoleMock";
 
 let mockMediaQuery = (query) => {
   return matchMedia(query).matches;

src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js

@@ -9,6 +9,7 @@ import {
 import PyodideRunner from "./PyodideRunner";
 import { Provider } from "react-redux";
 import PyodideWorker, { postMessage } from "./PyodideWorker.mock.js";
+import "../../../../../consoleMock"
 
 import {
   resetState,

src/components/Editor/Runners/PythonRunner/PyodideRunner/VisualOutputPane.test.js

@@ -5,6 +5,8 @@ import { Provider } from "react-redux";
 import VisualOutputPane from "./VisualOutputPane.jsx";
 import Highcharts from "highcharts";
 
+import "../../../../../consoleMock";
+
 jest.mock("highcharts");
 
 const renderPaneWithVisuals = (visuals) => {

src/components/Editor/Runners/PythonRunner/PythonRunner.test.js

@@ -1,13 +1,14 @@
 import { render, within } from "@testing-library/react";
 import { Provider } from "react-redux";
-import { act } from "react-dom/test-utils";
+import { act } from "react";
 import PythonRunner from "./PythonRunner";
 import {
   triggerCodeRun,
   setProject,
   setSenseHatAlwaysEnabled,
 } from "../../../../redux/EditorSlice";
 import store from "../../../../app/store";
+import "../../../../consoleMock";
 
 const initialState = {
   editor: {

src/components/Menus/ContextMenu/ContextMenu.test.js

@@ -3,6 +3,8 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { axe, toHaveNoViolations } from "jest-axe";
 import ContextMenu from "./ContextMenu";
 
+import "../../../consoleMock";
+
 expect.extend(toHaveNoViolations);
 const action1 = jest.fn();
 

src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.test.js

@@ -5,6 +5,8 @@ import { MemoryRouter } from "react-router";
 import configureStore from "redux-mock-store";
 import FileSaver from "file-saver";
 
+import "../../../../consoleMock";
+
 jest.mock("file-saver");
 jest.mock("jszip");
 jest.mock("jszip-utils", () => ({

src/components/Menus/Sidebar/FilePanel/FilePanel.test.js

@@ -6,6 +6,8 @@ import configureStore from "redux-mock-store";
 import FilePanel from "./FilePanel";
 import { openFile, setFocussedFileIndex } from "../../../../redux/EditorSlice";
 
+import "../../../../consoleMock";
+
 const createMockStore = function ({ components, openFiles = [[]], readOnly }) {
   const mockStore = configureStore([]);
   return mockStore({

src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.test.js

@@ -6,6 +6,8 @@ import { MemoryRouter } from "react-router-dom";
 
 import ProjectsPanel from "./ProjectsPanel";
 
+import "../../../../consoleMock";
+
 document.dispatchEvent = jest.fn();
 
 const initialState = {

src/components/Menus/Sidebar/Sidebar.test.js

@@ -4,6 +4,8 @@ import Sidebar from "./Sidebar";
 import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 
+import "../../../consoleMock";
+
 let images = [
   {
     url: "path/to/image1",

src/components/Menus/Sidebar/SidebarBar.test.js

@@ -4,6 +4,8 @@ import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import SidebarBar from "./SidebarBar";
 
+import "../../../consoleMock"
+
 const toggleOption = jest.fn();
 
 const mockStore = configureStore([]);

src/components/Mobile/MobileProject/MobileProject.test.js

@@ -5,6 +5,8 @@ import configureStore from "redux-mock-store";
 import MobileProject from "./MobileProject";
 import { showSidebar } from "../../../redux/EditorSlice";
 
+import "../../../consoleMock";
+
 window.HTMLElement.prototype.scrollIntoView = jest.fn();
 
 const middlewares = [];

src/components/Modals/AccessDeniedWithAuthModal.test.js

@@ -6,6 +6,8 @@ import AccessDeniedWithAuthModal from "./AccessDeniedWithAuthModal";
 import { syncProject } from "../../redux/EditorSlice";
 import { defaultPythonProject } from "../../utils/defaultProjects";
 
+import "../../consoleMock"
+
 jest.mock("../../redux/EditorSlice", () => ({
   ...jest.requireActual("../../redux/EditorSlice"),
   syncProject: jest.fn((_) => jest.fn()),

src/components/Modals/ErrorModal.test.js

@@ -5,6 +5,8 @@ import configureStore from "redux-mock-store";
 import ErrorModal from "./ErrorModal";
 import { closeErrorModal, setError } from "../../redux/EditorSlice";
 
+import "../../consoleMock"
+
 const middlewares = [];
 const mockStore = configureStore(middlewares);
 

src/components/Modals/GeneralModal.test.js

@@ -2,6 +2,8 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import GeneralModal from "./GeneralModal";
 
+import "../../consoleMock";
+
 const defaultCallback = jest.fn();
 const closeModal = jest.fn();
 

src/components/Modals/InputModal.test.js

@@ -15,20 +15,21 @@ beforeEach(() => {
     },
   };
   const store = mockStore(initialState);
+  const app = document.createElement("div");
+  app.setAttribute("id", "app");
+  document.body.appendChild(app);
   render(
     <Provider store={store}>
-      <div id="app">
-        <InputModal
-          isOpen={true}
-          inputs={[
-            {
-              label: "input",
-              helpText: "help me",
-              value: "my amazing default",
-            },
-          ]}
-        />
-      </div>
+      <InputModal
+        isOpen={true}
+        inputs={[
+          {
+            label: "input",
+            helpText: "help me",
+            value: "my amazing default",
+          },
+        ]}
+      />,
     </Provider>,
   );
   inputBox = screen.getByLabelText(/input/);

src/components/Modals/NewFileModal.test.js

@@ -3,6 +3,8 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
+import "../../consoleMock"
+
 import NewFileModal from "./NewFileModal";
 import {
   addProjectComponent,

src/components/Modals/NotFoundModal.test.js

@@ -6,6 +6,8 @@ import NotFoundModal from "./NotFoundModal";
 import { closeNotFoundModal, syncProject } from "../../redux/EditorSlice";
 import { defaultPythonProject } from "../../utils/defaultProjects";
 
+import "../../consoleMock"
+
 jest.mock("../../redux/EditorSlice", () => ({
   ...jest.requireActual("../../redux/EditorSlice"),
   syncProject: jest.fn((_) => jest.fn()),

src/components/Modals/RenameFileModal.test.js

@@ -3,6 +3,8 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 
+import "../../consoleMock";
+
 import RenameFileModal from "./RenameFileModal";
 import {
   setNameError,

src/components/Modals/RenameProjectModal.test.js

@@ -3,6 +3,7 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import { MockedProvider } from "@apollo/client/testing";
+import "../../consoleMock"
 
 import {
   RenameProjectModal,

src/components/ProjectBar/ProjectBar.test.js

@@ -5,6 +5,8 @@ import configureStore from "redux-mock-store";
 import { MemoryRouter } from "react-router-dom";
 import ProjectBar from "./ProjectBar";
 
+import "../../consoleMock";
+
 jest.mock("axios");
 
 jest.mock("react-router-dom", () => ({

src/components/ProjectName/ProjectName.test.js

@@ -7,6 +7,8 @@ import userEvent from "@testing-library/user-event";
 import ProjectName from "./ProjectName";
 import { updateProjectName } from "../../redux/EditorSlice";
 
+import "../../consoleMock";
+
 const project = {
   identifier: "hello-world-project",
   name: "Hello world",

src/components/SaveButton/SaveButton.test.js

@@ -4,6 +4,7 @@ import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import { triggerSave } from "../../redux/EditorSlice";
 import SaveButton from "./SaveButton";
+import "../../consoleMock"
 
 const logInHandler = jest.fn();
 

src/components/WebComponentProject/WebComponentProject.test.js

@@ -3,6 +3,7 @@ import { act, render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import WebComponentProject from "./WebComponentProject";
+import "../../consoleMock";
 
 const codeChangedHandler = jest.fn();
 const runStartedHandler = jest.fn();

src/consoleMock.js

@@ -0,0 +1,36 @@
+const originalError = console.error;
+const originalWarn = console.warn;
+
+window.console.warn = (msg) => {
+  if (msg.includes("DEPRECATED: icons as React elements will not be supported in future releases") ||
+      msg.includes("PyodideWorker is not initialized") ||
+      msg.includes("changing the droppableId")) {
+    return;
+  }
+
+  originalWarn(msg);
+}
+
+window.console.error = (error) => {
+  let msg;
+  if (typeof(error) === "object") {
+    msg = error.message;
+  } else {
+    msg = error;
+  }
+
+  if (msg.includes("inside a test was not wrapped in act(...)") ||
+      msg.includes("Warning: Invalid value for prop") ||
+      msg.includes("getClientRects is not a function") ||
+      msg.includes("An error occurred! For more details, see the full error text at") ||
+      msg.includes("Warning: react-modal: App element is not defined") ||
+      msg.includes("Support for defaultProps will be removed from function components") ||
+      msg.includes("A component is changing a controlled input to be uncontrolled") ||
+      msg.includes("Unsupported origin: unsupported") ||
+      msg.includes("Consider adding an error boundary to your tree") ||
+      msg.includes("Each child in a list should have a unique")) {
+    return;
+  }
+
+  originalError(error);
+}

src/containers/WebComponentLoader.test.js

@@ -16,6 +16,8 @@ import { useProjectPersistence } from "../hooks/useProjectPersistence";
 import localStorageUserMiddleware from "../redux/middlewares/localStorageUserMiddleware";
 import { Cookies, CookiesProvider } from "react-cookie";
 
+import "../consoleMock";
+
 jest.mock("../hooks/useProject", () => ({
   useProject: jest.fn(),
 }));

src/utils/ResizableWithHandle.test.js

@@ -3,18 +3,18 @@ import { render, screen } from "@testing-library/react";
 import ResizableWithHandle from "./ResizableWithHandle";
 
 test("renders a horizontal handle", () => {
-  render(<ResizableWithHandle handleDirection="bottom" />);
+  render(<ResizableWithHandle handleDirection="bottom"><hr /></ResizableWithHandle>);
   expect(screen.getByTestId("horizontalHandle")).toBeTruthy();
 });
 
 test("renders a vertical handle", () => {
-  render(<ResizableWithHandle handleDirection="right" />);
+  render(<ResizableWithHandle handleDirection="right"><hr /></ResizableWithHandle>);
   expect(screen.getByTestId("verticalHandle")).toBeTruthy();
 });
 
 test("it does not add an incorrect class to the handle", () => {
   const { container } = render(
-    <ResizableWithHandle handleDirection="bottom" />,
+    <ResizableWithHandle handleDirection="bottom"><hr /></ResizableWithHandle>,
   );
   expect(
     container.getElementsByClassName("resizable-with-handle__handle--right")
@@ -24,7 +24,7 @@ test("it does not add an incorrect class to the handle", () => {
 
 test("it adds the expected class to the handle", () => {
   const { container } = render(
-    <ResizableWithHandle handleDirection="bottom" />,
+    <ResizableWithHandle handleDirection="bottom"><hr /></ResizableWithHandle>,
   );
   expect(
     container.getElementsByClassName("resizable-with-handle__handle--bottom")