Upgrade React ecosystem dependencies to v19

package.json

@@ -76,16 +76,16 @@
     "phaser": "~3.90.0",
     "query-string": "^9.0.0",
     "re-resizable": "^6.9.9",
-    "react": "^18.3.1",
+    "react": "^19.1.0",
     "react-ace": "^14.0.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-debounce-render": "^8.0.2",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.0",
     "react-drag-drop-files": "^3.0.0",
     "react-draggable": "^4.4.5",
     "react-dropzone": "^14.2.3",
     "react-i18next": "^15.0.0",
-    "react-konva": "^18.2.10",
+    "react-konva": "^19.0.7",
     "react-latex-next": "^3.0.0",
     "react-mde": "^11.5.0",
     "react-papaparse": "^4.0.2",
@@ -139,12 +139,11 @@
     "@types/js-cookie": "^3.0.6",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.195",
-    "@types/react": "^18.3.3",
+    "@types/react": "^19.1.8",
     "@types/react-copy-to-clipboard": "^5.0.4",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^19.1.6",
     "@types/react-redux": "^7.1.24",
     "@types/react-syntax-highlighter": "^15.5.7",
-    "@types/react-test-renderer": "^18.0.0",
     "@types/redux-mock-store": "^1.0.3",
     "@types/showdown": "^2.0.1",
     "@types/xml2js": "^0.4.11",
@@ -173,10 +172,10 @@
     "prettier": "^3.3.3",
     "process": "^0.11.10",
     "react-error-overlay": "^6.0.11",
-    "react-test-renderer": "^18.2.0",
     "redux-saga-test-plan": "^4.0.6",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.63.6",
+    "shallow-react-snapshot": "^0.2.2",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
     "timers-browserify": "^2.0.12",

src/commons/ContentDisplay.tsx

@@ -1,5 +1,5 @@
 import { Card, Elevation } from '@blueprintjs/core';
-import React, { useEffect } from 'react';
+import React, { type JSX, useEffect } from 'react';
 
 export type ContentDisplayProps = {
   fullWidth?: boolean;

src/commons/__tests__/__snapshots__/ContentDisplay.test.tsx.snap

@@ -1,19 +1,21 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ContentDisplay page renders correctly 1`] = `
-<div
-  className="ContentDisplay row center-xs"
->
+<DocumentFragment>
   <div
-    className="col-md-10 col-xs-11 contentdisplay-content-parent"
+    class="ContentDisplay row center-xs"
   >
     <div
-      className="contentdisplay-content bp6-card bp6-elevation-3"
+      class="col-md-10 col-xs-11 contentdisplay-content-parent"
     >
-      <div>
-         Test Content 
+      <div
+        class="contentdisplay-content bp6-card bp6-elevation-3"
+      >
+        <div>
+           Test Content 
+        </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;

src/commons/__tests__/__snapshots__/Markdown.test.tsx.snap

@@ -1,16 +1,75 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Markdown page renders correctly 1`] = `
-<div
-  className="md bp6-running-text"
-  dangerouslySetInnerHTML={
-    {
-      "__html": "<p>Welcome to the Source Academy playground!</p>
-<p>The book <a href="https://sourceacademy.org/sicpjs/" rel="noopener noreferrer" target="_blank"><em>Structure and Interpretation of Computer Programs, JavaScript Edition</em></a>
-uses JavaScript sublanguages that we call <a href="https://docs.sourceacademy.org/" rel="noopener noreferrer" target="_blank"><em>Source</em></a>. You have chosen the sublanguage <a href="https://docs.sourceacademy.org/source_1/" rel="noopener noreferrer" target="_blank"><em>Source §1</em></a>.</p>
-<p>In the editor on the left, you can use the <a href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts" rel="noopener noreferrer" target="_blank"><em>Ace keyboard shortcuts</em></a> 
-and also the <a href="https://github.com/source-academy/frontend/wiki/Source-Academy-Keyboard-Shortcuts" rel="noopener noreferrer" target="_blank"><em>Source Academy keyboard shortcuts</em></a>.</p>",
-    }
-  }
-/>
+<DocumentFragment>
+  <div
+    class="md bp6-running-text"
+  >
+    <p>
+      Welcome to the Source Academy playground!
+    </p>
+
+
+    <p>
+      The book 
+      <a
+        href="https://sourceacademy.org/sicpjs/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <em>
+          Structure and Interpretation of Computer Programs, JavaScript Edition
+        </em>
+      </a>
+
+uses JavaScript sublanguages that we call 
+      <a
+        href="https://docs.sourceacademy.org/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <em>
+          Source
+        </em>
+      </a>
+      . You have chosen the sublanguage 
+      <a
+        href="https://docs.sourceacademy.org/source_1/"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <em>
+          Source §1
+        </em>
+      </a>
+      .
+    </p>
+
+
+    <p>
+      In the editor on the left, you can use the 
+      <a
+        href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <em>
+          Ace keyboard shortcuts
+        </em>
+      </a>
+
+and also the 
+      <a
+        href="https://github.com/source-academy/frontend/wiki/Source-Academy-Keyboard-Shortcuts"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <em>
+          Source Academy keyboard shortcuts
+        </em>
+      </a>
+      .
+    </p>
+  </div>
+</DocumentFragment>
 `;

src/commons/achievement/control/AchievementEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { type JSX, useContext, useState } from 'react';
 import { AchievementContext } from 'src/features/achievement/AchievementConstants';
 
 import AchievementAdder from './achievementEditor/AchievementAdder';

src/commons/achievement/control/GoalEditor.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { type JSX, useContext, useState } from 'react';
 import { AchievementContext } from 'src/features/achievement/AchievementConstants';
 
 import EditableGoal from './goalEditor/EditableGoal';

src/commons/assessment/Assessment.tsx

@@ -13,7 +13,7 @@ import {
 } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { sortBy } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { type JSX, useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { Navigate, useLoaderData, useParams } from 'react-router';
 import { numberRegExp } from 'src/features/academy/AcademyTypes';