From c89b109025417d9ca090323c785bb956c40069f9 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Mon, 14 Jul 2025 23:52:46 +0800
Subject: [PATCH 01/16] Upgrade React ecosystem dependencies to v19

---
 package.json |  14 ++--
 yarn.lock    | 195 +++++++++++++++++++++++++--------------------------
 2 files changed, 104 insertions(+), 105 deletions(-)

diff --git a/package.json b/package.json
index d7ef31c115..ed9746a4fe 100644
--- a/package.json
+++ b/package.json
@@ -72,16 +72,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",
@@ -138,12 +138,12 @@
     "@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/react-test-renderer": "^19.1.0",
     "@types/redux-mock-store": "^1.0.3",
     "@types/showdown": "^2.0.1",
     "@types/xml2js": "^0.4.11",
@@ -171,7 +171,7 @@
     "prettier": "^3.3.3",
     "process": "^0.11.10",
     "react-error-overlay": "^6.0.11",
-    "react-test-renderer": "^18.2.0",
+    "react-test-renderer": "^19.1.0",
     "redux-saga-test-plan": "^4.0.6",
     "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.63.6",
diff --git a/yarn.lock b/yarn.lock
index b5ad9e121a..2846bcdbdf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4278,21 +4278,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^18.3.0":
-  version: 18.3.7
-  resolution: "@types/react-dom@npm:18.3.7"
+"@types/react-dom@npm:^19.1.6":
+  version: 19.1.6
+  resolution: "@types/react-dom@npm:19.1.6"
   peerDependencies:
-    "@types/react": ^18.0.0
-  checksum: 10c0/8bd309e2c3d1604a28a736a24f96cbadf6c05d5288cfef8883b74f4054c961b6b3a5e997fd5686e492be903c8f3380dba5ec017eff3906b1256529cd2d39603e
+    "@types/react": ^19.0.0
+  checksum: 10c0/7ba74eee2919e3f225e898b65fdaa16e54952aaf9e3472a080ddc82ca54585e46e60b3c52018d21d4b7053f09d27b8293e9f468b85f9932ff452cd290cc131e8
   languageName: node
   linkType: hard
 
-"@types/react-reconciler@npm:^0.28.0, @types/react-reconciler@npm:^0.28.2":
-  version: 0.28.2
-  resolution: "@types/react-reconciler@npm:0.28.2"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10c0/8b8819b492972f08b9975efdf59dec668094f9e9483408b84698659ac02f4966c9c082ba79e80fef723c4f46279c5c3b15a7de7fa70af00a20741a8a15890b82
+"@types/react-reconciler@npm:^0.28.9":
+  version: 0.28.9
+  resolution: "@types/react-reconciler@npm:0.28.9"
+  peerDependencies:
+    "@types/react": "*"
+  checksum: 10c0/9fe71fa856aab2cd4742fe0416bdd4f5c82ecc05ef6451ee7fcb65a5efdf5fa588f5820fbe2a665b15371b0da3bfc4097f28bb6d450b9a834af2d0fc00f403bd
+  languageName: node
+  linkType: hard
+
+"@types/react-reconciler@npm:^0.32.0":
+  version: 0.32.0
+  resolution: "@types/react-reconciler@npm:0.32.0"
+  peerDependencies:
+    "@types/react": "*"
+  checksum: 10c0/43bfbb0471811dc3aeb6e46a4724663b2bb26137a0169977f415e31c253037d53e549ed1b71d0f9bec9fe9dda5c22e7be9e55dcba564bf3eaf01ed19e950874e
   languageName: node
   linkType: hard
 
@@ -4317,12 +4326,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-test-renderer@npm:^18.0.0":
-  version: 18.3.1
-  resolution: "@types/react-test-renderer@npm:18.3.1"
+"@types/react-test-renderer@npm:^19.1.0":
+  version: 19.1.0
+  resolution: "@types/react-test-renderer@npm:19.1.0"
   dependencies:
-    "@types/react": "npm:^18"
-  checksum: 10c0/9fc8467ff1a3f14be6cc3498a75fc788d2c92c0fffa7bf21269ed5d9d82db9195bf2178ddc42ea16a0836995c1b77601c6be8abb27bd1864668c418c6d0e5a3b
+    "@types/react": "npm:*"
+  checksum: 10c0/799654e430df10aeaf267d71507fb64ec151359ead7e3774111bfd4abce7e0911dba461811195c06c22a6d17496ea92537d3185320ff4112fe29954cad1b9152
   languageName: node
   linkType: hard
 
@@ -4335,7 +4344,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*, @types/react@npm:^18, @types/react@npm:^18.3.3":
+"@types/react@npm:*":
   version: 18.3.23
   resolution: "@types/react@npm:18.3.23"
   dependencies:
@@ -4345,6 +4354,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react@npm:^19.1.8":
+  version: 19.1.8
+  resolution: "@types/react@npm:19.1.8"
+  dependencies:
+    csstype: "npm:^3.0.2"
+  checksum: 10c0/4908772be6dc941df276931efeb0e781777fa76e4d5d12ff9f75eb2dcc2db3065e0100efde16fde562c5bafa310cc8f50c1ee40a22640459e066e72cd342143e
+  languageName: node
+  linkType: hard
+
 "@types/redux-mock-store@npm:^1.0.3":
   version: 1.5.0
   resolution: "@types/redux-mock-store@npm:1.5.0"
@@ -7783,12 +7801,12 @@ __metadata:
     "@types/js-cookie": "npm:^3.0.6"
     "@types/js-yaml": "npm:^4.0.5"
     "@types/lodash": "npm:^4.14.195"
-    "@types/react": "npm:^18.3.3"
+    "@types/react": "npm:^19.1.8"
     "@types/react-copy-to-clipboard": "npm:^5.0.4"
-    "@types/react-dom": "npm:^18.3.0"
+    "@types/react-dom": "npm:^19.1.6"
     "@types/react-redux": "npm:^7.1.24"
     "@types/react-syntax-highlighter": "npm:^15.5.7"
-    "@types/react-test-renderer": "npm:^18.0.0"
+    "@types/react-test-renderer": "npm:^19.1.0"
     "@types/redux-mock-store": "npm:^1.0.3"
     "@types/showdown": "npm:^2.0.1"
     "@types/xml2js": "npm:^0.4.11"
@@ -7844,17 +7862,17 @@ __metadata:
     process: "npm:^0.11.10"
     query-string: "npm:^9.0.0"
     re-resizable: "npm:^6.9.9"
-    react: "npm:^18.3.1"
+    react: "npm:^19.1.0"
     react-ace: "npm:^14.0.0"
     react-copy-to-clipboard: "npm:^5.1.0"
     react-debounce-render: "npm:^8.0.2"
-    react-dom: "npm:^18.3.1"
+    react-dom: "npm:^19.1.0"
     react-drag-drop-files: "npm:^3.0.0"
     react-draggable: "npm:^4.4.5"
     react-dropzone: "npm:^14.2.3"
     react-error-overlay: "npm:^6.0.11"
     react-i18next: "npm:^15.0.0"
-    react-konva: "npm:^18.2.10"
+    react-konva: "npm:^19.0.7"
     react-latex-next: "npm:^3.0.0"
     react-mde: "npm:^11.5.0"
     react-papaparse: "npm:^4.0.2"
@@ -7865,7 +7883,7 @@ __metadata:
     react-simple-keyboard: "npm:^3.6.27"
     react-sortable-hoc: "npm:^2.0.0"
     react-syntax-highlighter: "npm:^15.5.0"
-    react-test-renderer: "npm:^18.2.0"
+    react-test-renderer: "npm:^19.1.0"
     react-textarea-autosize: "npm:^8.5.2"
     redux-mock-store: "npm:^1.5.4"
     redux-saga: "npm:^1.2.3"
@@ -9193,14 +9211,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"its-fine@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "its-fine@npm:1.1.1"
+"its-fine@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "its-fine@npm:2.0.0"
   dependencies:
-    "@types/react-reconciler": "npm:^0.28.0"
+    "@types/react-reconciler": "npm:^0.28.9"
   peerDependencies:
-    react: ">=18.0"
-  checksum: 10c0/66059a859720de19563a8abdb10f06eb6117df1897d984a54b0a71ab9dc02da3dc366428b1f0c5e085740962abb7d6ccc0b8c3e00725b0a2120c846f352adffc
+    react: ^19.0.0
+  checksum: 10c0/1ff1ff3257c0c7eb115c9c26cf0506eb84162edc1a63d3136780d146f7c7833298b240d0fcb46888909773f1a7d16539e0c03f2482cff1a5a502d6436686fe21
   languageName: node
   linkType: hard
 
@@ -10186,7 +10204,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loose-envify@npm:^1.0.0, loose-envify@npm:^1.1.0, loose-envify@npm:^1.4.0":
+"loose-envify@npm:^1.0.0, loose-envify@npm:^1.4.0":
   version: 1.4.0
   resolution: "loose-envify@npm:1.4.0"
   dependencies:
@@ -11989,15 +12007,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react-dom@npm:18.3.1"
+"react-dom@npm:^19.1.0":
+  version: 19.1.0
+  resolution: "react-dom@npm:19.1.0"
   dependencies:
-    loose-envify: "npm:^1.1.0"
-    scheduler: "npm:^0.23.2"
+    scheduler: "npm:^0.26.0"
   peerDependencies:
-    react: ^18.3.1
-  checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85
+    react: ^19.1.0
+  checksum: 10c0/3e26e89bb6c67c9a6aa86cb888c7a7f8258f2e347a6d2a15299c17eb16e04c19194e3452bc3255bd34000a61e45e2cb51e46292392340432f133e5a5d2dfb5fc
   languageName: node
   linkType: hard
 
@@ -12092,13 +12109,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0":
-  version: 18.2.0
-  resolution: "react-is@npm:18.2.0"
-  checksum: 10c0/6eb5e4b28028c23e2bfcf73371e72cd4162e4ac7ab445ddae2afe24e347a37d6dc22fae6e1748632cd43c6d4f9b8f86dcf26bf9275e1874f436d129952528ae0
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^17.0.1":
   version: 17.0.2
   resolution: "react-is@npm:17.0.2"
@@ -12106,26 +12116,33 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react-is@npm:18.3.1"
-  checksum: 10c0/f2f1e60010c683479e74c63f96b09fb41603527cd131a9959e2aee1e5a8b0caf270b365e5ca77d4a6b18aae659b60a86150bb3979073528877029b35aecd2072
+"react-is@npm:^18.0.0":
+  version: 18.2.0
+  resolution: "react-is@npm:18.2.0"
+  checksum: 10c0/6eb5e4b28028c23e2bfcf73371e72cd4162e4ac7ab445ddae2afe24e347a37d6dc22fae6e1748632cd43c6d4f9b8f86dcf26bf9275e1874f436d129952528ae0
+  languageName: node
+  linkType: hard
+
+"react-is@npm:^19.1.0":
+  version: 19.1.0
+  resolution: "react-is@npm:19.1.0"
+  checksum: 10c0/b6c6cadd172d5d39f66d493700d137a5545c294a62ce0f8ec793d59794c97d2bed6bad227626f16bd0e90004ed7fdc8ed662a004e6edcf5d2b7ecb6e3040ea6b
   languageName: node
   linkType: hard
 
-"react-konva@npm:^18.2.10":
-  version: 18.2.12
-  resolution: "react-konva@npm:18.2.12"
+"react-konva@npm:^19.0.7":
+  version: 19.0.7
+  resolution: "react-konva@npm:19.0.7"
   dependencies:
-    "@types/react-reconciler": "npm:^0.28.2"
-    its-fine: "npm:^1.1.1"
-    react-reconciler: "npm:~0.29.0"
-    scheduler: "npm:^0.23.0"
+    "@types/react-reconciler": "npm:^0.32.0"
+    its-fine: "npm:^2.0.0"
+    react-reconciler: "npm:0.32.0"
+    scheduler: "npm:0.26.0"
   peerDependencies:
     konva: ^8.0.1 || ^7.2.5 || ^9.0.0
-    react: ">=18.0.0"
-    react-dom: ">=18.0.0"
-  checksum: 10c0/cc0d57496651c361addcb8acf3e92fec1d67555a44ecab52c3d1a8df4c4923b02059ad266869f3868b44e0faed5585fe31770a2978c312726a2634f9db3b9a73
+    react: ^18.3.1 || ^19.0.0
+    react-dom: ^18.3.1 || ^19.0.0
+  checksum: 10c0/035e127be48518a6fd3a9d1fc83f10df229323ae2d71fd1dd74b3e0b10f067e8bcd80bafa4af40390d7404f5defe62db50a33d20867fd86f42c691be8a130c60
   languageName: node
   linkType: hard
 
@@ -12196,15 +12213,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-reconciler@npm:~0.29.0":
-  version: 0.29.0
-  resolution: "react-reconciler@npm:0.29.0"
+"react-reconciler@npm:0.32.0":
+  version: 0.32.0
+  resolution: "react-reconciler@npm:0.32.0"
   dependencies:
-    loose-envify: "npm:^1.1.0"
-    scheduler: "npm:^0.23.0"
+    scheduler: "npm:^0.26.0"
   peerDependencies:
-    react: ^18.2.0
-  checksum: 10c0/637442f98ee816b8f86586f537712a0463b53e12c0f4dec716dfdde68dfa52cef1d10138acfad194d5571296cde8715c331aa3986e538087acdc1ef83187a9b0
+    react: ^19.1.0
+  checksum: 10c0/ace0562d2aa99685416ac62741354706dec6df334aa64acc7ad455bd8a6f6af0068b276ad2e5412c3875388022ab13807f0b7d688fda7b2835301c110247146b
   languageName: node
   linkType: hard
 
@@ -12295,18 +12311,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-shallow-renderer@npm:^16.15.0":
-  version: 16.15.0
-  resolution: "react-shallow-renderer@npm:16.15.0"
-  dependencies:
-    object-assign: "npm:^4.1.1"
-    react-is: "npm:^16.12.0 || ^17.0.0 || ^18.0.0"
-  peerDependencies:
-    react: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/c194d741792e86043a4ae272f7353c1cb9412bc649945c4220c6a101a6ea5410cceb3d65d5a4d750f11a24f7426e8eec7977e8a4e3ad5d3ee235ca2b18166fa8
-  languageName: node
-  linkType: hard
-
 "react-simple-keyboard@npm:^3.6.27":
   version: 3.8.93
   resolution: "react-simple-keyboard@npm:3.8.93"
@@ -12362,16 +12366,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-test-renderer@npm:^18.2.0":
-  version: 18.3.1
-  resolution: "react-test-renderer@npm:18.3.1"
+"react-test-renderer@npm:^19.1.0":
+  version: 19.1.0
+  resolution: "react-test-renderer@npm:19.1.0"
   dependencies:
-    react-is: "npm:^18.3.1"
-    react-shallow-renderer: "npm:^16.15.0"
-    scheduler: "npm:^0.23.2"
+    react-is: "npm:^19.1.0"
+    scheduler: "npm:^0.26.0"
   peerDependencies:
-    react: ^18.3.1
-  checksum: 10c0/c633558ef9af33bc68f0c4dbb5163a004c4fb9eade7bd0a7cfc0355fb367f36bd9d96533c90b7e85a146be6c525113a15f58683d269e0177ad77e2b04d4fe51c
+    react: ^19.1.0
+  checksum: 10c0/34ed4a37ba8b0beb96c048de6ff28574f018a18dd1042c24f8f46142d48eb5b27f82ff7c2823d082932fd3983c5a3529ab8cc8f15191d4306df0082f9f84678f
   languageName: node
   linkType: hard
 
@@ -12443,12 +12446,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^18.3.1":
-  version: 18.3.1
-  resolution: "react@npm:18.3.1"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3
+"react@npm:^19.1.0":
+  version: 19.1.0
+  resolution: "react@npm:19.1.0"
+  checksum: 10c0/530fb9a62237d54137a13d2cfb67a7db6a2156faed43eecc423f4713d9b20c6f2728b026b45e28fcd72e8eadb9e9ed4b089e99f5e295d2f0ad3134251bdd3698
   languageName: node
   linkType: hard
 
@@ -13218,12 +13219,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:^0.23.0, scheduler@npm:^0.23.2":
-  version: 0.23.2
-  resolution: "scheduler@npm:0.23.2"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-  checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78
+"scheduler@npm:0.26.0, scheduler@npm:^0.26.0":
+  version: 0.26.0
+  resolution: "scheduler@npm:0.26.0"
+  checksum: 10c0/5b8d5bfddaae3513410eda54f2268e98a376a429931921a81b5c3a2873aab7ca4d775a8caac5498f8cbc7d0daeab947cf923dbd8e215d61671f9f4e392d34356
   languageName: node
   linkType: hard
 

From ad2e74332d67527cd9dfbdabb187650744aeb530 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:02:49 +0800
Subject: [PATCH 02/16] Fix some breaking changes

---
 src/features/cseMachine/components/Text.tsx   |  2 +-
 .../components/values/ContValue.tsx           |  2 +-
 .../cseMachine/components/values/FnValue.tsx  |  2 +-
 .../components/values/GlobalFnValue.tsx       |  2 +-
 src/features/sicp/parser/ParseJson.tsx        | 25 ++++++++++++++++---
 .../AssessmentConfigPanel.tsx                 |  2 +-
 .../StoriesUserConfigPanel.tsx                | 12 ++++-----
 .../userConfigPanel/UserConfigPanel.tsx       | 12 ++++-----
 src/pages/sicp/Sicp.tsx                       | 14 +++++++++--
 .../sicp/subcomponents/chatbot/ChatBox.tsx    |  2 +-
 10 files changed, 49 insertions(+), 26 deletions(-)

diff --git a/src/features/cseMachine/components/Text.tsx b/src/features/cseMachine/components/Text.tsx
index d979391885..2629cb70de 100644
--- a/src/features/cseMachine/components/Text.tsx
+++ b/src/features/cseMachine/components/Text.tsx
@@ -49,7 +49,7 @@ export class Text extends Visible implements IHoverable {
   readonly fullStr: string; // full string representation of data
 
   readonly options: TextOptions = defaultOptions;
-  readonly labelRef: React.RefObject<Label> = React.createRef();
+  readonly labelRef: React.RefObject<Label | null> = React.createRef();
 
   constructor(
     readonly data: Data,
diff --git a/src/features/cseMachine/components/values/ContValue.tsx b/src/features/cseMachine/components/values/ContValue.tsx
index 0e54531631..a8170884f3 100644
--- a/src/features/cseMachine/components/values/ContValue.tsx
+++ b/src/features/cseMachine/components/values/ContValue.tsx
@@ -37,7 +37,7 @@ import { Value } from './Value';
 export class ContValue extends Value implements IHoverable {
   readonly radius: number = Config.FnRadius;
   readonly innerRadius: number = Config.FnInnerRadius;
-  readonly labelRef: RefObject<Label> = React.createRef();
+  readonly labelRef: RefObject<Label | null> = React.createRef();
 
   readonly tooltip: string = 'continuation';
   readonly tooltipWidth: number = getTextWidth(this.tooltip);
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index 3cc9f9637d..fcf2055732 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -46,7 +46,7 @@ export class FnValue extends Value implements IHoverable {
   readonly tooltipWidth: number;
   readonly exportTooltip: string;
   readonly exportTooltipWidth: number;
-  readonly labelRef: RefObject<Label> = React.createRef();
+  readonly labelRef: RefObject<Label | null> = React.createRef();
 
   centerX: number;
   enclosingFrame?: Frame;
diff --git a/src/features/cseMachine/components/values/GlobalFnValue.tsx b/src/features/cseMachine/components/values/GlobalFnValue.tsx
index b4e4711802..f59775a258 100644
--- a/src/features/cseMachine/components/values/GlobalFnValue.tsx
+++ b/src/features/cseMachine/components/values/GlobalFnValue.tsx
@@ -41,7 +41,7 @@ export class GlobalFnValue extends Value implements IHoverable {
   readonly tooltipWidth: number;
   readonly exportTooltip: string;
   readonly exportTooltipWidth: number;
-  readonly labelRef: RefObject<Label> = React.createRef();
+  readonly labelRef: RefObject<Label | null> = React.createRef();
 
   centerX: number;
   private _arrow: ArrowFromFn | undefined;
diff --git a/src/features/sicp/parser/ParseJson.tsx b/src/features/sicp/parser/ParseJson.tsx
index 8d3f669d3e..1cdb623d70 100644
--- a/src/features/sicp/parser/ParseJson.tsx
+++ b/src/features/sicp/parser/ParseJson.tsx
@@ -55,7 +55,9 @@ const AnchorLink: React.FC<AnchorLinkType> = ({ refs, id, children, top }) => {
         <Link
           className="sicp-anchor-link"
           style={{ top: top }}
-          ref={ref => (refs.current[id] = ref)}
+          ref={ref => {
+            refs.current[id] = ref;
+          }}
           to={id}
         >
           <Icon icon={IconNames.LINK} />
@@ -71,7 +73,11 @@ const handleFootnote = (obj: JsonType, refs: RefType) => {
     <>
       {obj.count === 1 && <hr />}
       <div className="sicp-footnote">
-        <div ref={ref => (refs.current[obj.id!] = ref)} />
+        <div
+          ref={ref => {
+            refs.current[obj.id!] = ref;
+          }}
+        />
         <a href={obj.href}>{'[' + obj.count + '] '}</a>
         {parseArr(obj.child!, refs)}
       </div>
@@ -81,7 +87,12 @@ const handleFootnote = (obj: JsonType, refs: RefType) => {
 
 const handleRef = (obj: JsonType, refs: RefType) => {
   return (
-    <Link ref={ref => (refs.current[obj.id!] = ref)} to={obj.href!}>
+    <Link
+      ref={ref => {
+        refs.current[obj.id!] = ref;
+      }}
+      to={obj.href!}
+    >
       {obj.body}
     </Link>
   );
@@ -227,7 +238,13 @@ export const processingFunctions: Record<string, (obj: JsonType, refs: RefType)
   FIGURE: handleFigure,
 
   FOOTNOTE_REF: (obj, refs) => (
-    <sup ref={ref => (refs.current[obj.id!] = ref)}>{handleRef(obj, refs)}</sup>
+    <sup
+      ref={ref => {
+        refs.current[obj.id!] = ref;
+      }}
+    >
+      {handleRef(obj, refs)}
+    </sup>
   ),
 
   JAVASCRIPTINLINE: (obj, _refs) => <Code>{obj.body}</Code>,
diff --git a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
index ef091afd65..9922f18d0e 100644
--- a/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/assessmentConfigPanel/AssessmentConfigPanel.tsx
@@ -61,7 +61,7 @@ const AssessmentConfigPanel: WithImperativeApi<
   React.FC<Props>
 > = forwardRef<ImperativeAssessmentConfigPanel, Props>(
   ({ setHasChangesAssessmentConfig, initialConfigs }, imperativeRef) => {
-    const gridApi = React.useRef<GridApi<AssessmentConfiguration>>();
+    const gridApi = React.useRef<GridApi<AssessmentConfiguration>>(null);
     // Create a mutable copy of the initialConfigs to track changes
     // to prevent UI flicker during state changes.
     const tableState = useRef(cloneDeep(initialConfigs));
diff --git a/src/pages/academy/adminPanel/subcomponents/storiesUserConfigPanel/StoriesUserConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/storiesUserConfigPanel/StoriesUserConfigPanel.tsx
index ebb0ae2d10..9a9703c5e8 100644
--- a/src/pages/academy/adminPanel/subcomponents/storiesUserConfigPanel/StoriesUserConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/storiesUserConfigPanel/StoriesUserConfigPanel.tsx
@@ -30,7 +30,7 @@ const defaultColumnDefs: ColDef = {
  *   no admins left in a course)
  */
 const StoriesUserConfigPanel: React.FC<Props> = props => {
-  const gridApi = React.useRef<GridApi>();
+  const gridApi = React.useRef<GridApi>(null);
 
   const storiesUsers = props.storiesUsers?.map(e =>
     !e.name ? { ...e, name: '(user has yet to log in)' } : e
@@ -88,12 +88,10 @@ const StoriesUserConfigPanel: React.FC<Props> = props => {
           text="Export as CSV"
           className="export-csv-button"
           onClick={() => {
-            if (gridApi.current) {
-              gridApi.current.exportDataAsCsv({
-                fileName: `SA Stories Users (${new Date().toISOString()}).csv`,
-                columnKeys: ['name', 'username', 'role']
-              });
-            }
+            gridApi.current?.exportDataAsCsv({
+              fileName: `SA Stories Users (${new Date().toISOString()}).csv`,
+              columnKeys: ['name', 'username', 'role']
+            });
           }}
         />
       </div>
diff --git a/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx b/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx
index 8cc45e44d8..54436a142d 100644
--- a/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx
+++ b/src/pages/academy/adminPanel/subcomponents/userConfigPanel/UserConfigPanel.tsx
@@ -30,7 +30,7 @@ const defaultColumnDefs: ColDef = {
  *   no admins left in a course)
  */
 const UserConfigPanel: React.FC<Props> = props => {
-  const gridApi = React.useRef<GridApi>();
+  const gridApi = React.useRef<GridApi>(null);
 
   const userCourseRegistrations = props.userCourseRegistrations?.map(e =>
     !e.name ? { ...e, name: '(user has yet to log in)' } : e
@@ -89,12 +89,10 @@ const UserConfigPanel: React.FC<Props> = props => {
           text="Export as CSV"
           className="export-csv-button"
           onClick={() => {
-            if (gridApi.current) {
-              gridApi.current.exportDataAsCsv({
-                fileName: `SA Users (${new Date().toISOString()}).csv`,
-                columnKeys: ['name', 'username', 'group', 'role']
-              });
-            }
+            gridApi.current?.exportDataAsCsv({
+              fileName: `SA Users (${new Date().toISOString()}).csv`,
+              columnKeys: ['name', 'username', 'group', 'role']
+            });
           }}
         />
       </div>
diff --git a/src/pages/sicp/Sicp.tsx b/src/pages/sicp/Sicp.tsx
index 431e2a94f4..f6448f3083 100644
--- a/src/pages/sicp/Sicp.tsx
+++ b/src/pages/sicp/Sicp.tsx
@@ -192,10 +192,20 @@ const Sicp: React.FC = () => {
             <SicpIndexPage />
           ) : (
             <div className="sicp-content">
-              <Link to="#begin" ref={ref => (refs.current['#begin'] = ref)} />
+              <Link
+                to="#begin"
+                ref={ref => {
+                  refs.current['#begin'] = ref;
+                }}
+              />
               {data}
               {navigationButtons}
-              <Link to="#end" ref={ref => (refs.current['#end'] = ref)} />
+              <Link
+                to="#end"
+                ref={ref => {
+                  refs.current['#end'] = ref;
+                }}
+              />
             </div>
           )}
         </CodeSnippetContext.Provider>
diff --git a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
index 9fc43e66b0..3feda720ea 100644
--- a/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
+++ b/src/pages/sicp/subcomponents/chatbot/ChatBox.tsx
@@ -22,7 +22,7 @@ const BOT_ERROR_MESSAGE: Readonly<ChatMessage> = {
   role: 'assistant'
 };
 
-const scrollToBottom = (ref: React.RefObject<HTMLDivElement>) => {
+const scrollToBottom = (ref: React.RefObject<HTMLDivElement | null>) => {
   ref.current?.scrollTo({ top: ref.current?.scrollHeight });
 };
 

From 10d86bd94e287815703ffe1ce4c9cafae278b22c Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:04:36 +0800
Subject: [PATCH 03/16] Fix more breaking changes

---
 src/commons/controlBar/ControlBarSessionButton.tsx           | 4 ++--
 src/commons/controlBar/ControlBarShareButton.tsx             | 2 +-
 src/commons/sideContent/content/SideContentContestVoting.tsx | 4 +++-
 src/commons/sourceRecorder/SourceRecorderControlBar.tsx      | 2 +-
 src/commons/sourceRecorder/SourceRecorderEditor.tsx          | 2 +-
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/commons/controlBar/ControlBarSessionButton.tsx b/src/commons/controlBar/ControlBarSessionButton.tsx
index 915f73b174..32c9fda0f2 100644
--- a/src/commons/controlBar/ControlBarSessionButton.tsx
+++ b/src/commons/controlBar/ControlBarSessionButton.tsx
@@ -45,8 +45,8 @@ export class ControlBarSessionButtons extends React.PureComponent<
   ControlBarSessionButtonsProps,
   State
 > {
-  private sessionEditingIdInputElem: React.RefObject<HTMLInputElement>;
-  private sessionViewingIdInputElem: React.RefObject<HTMLInputElement>;
+  private sessionEditingIdInputElem: React.RefObject<HTMLInputElement | null>;
+  private sessionViewingIdInputElem: React.RefObject<HTMLInputElement | null>;
 
   constructor(props: ControlBarSessionButtonsProps) {
     super(props);
diff --git a/src/commons/controlBar/ControlBarShareButton.tsx b/src/commons/controlBar/ControlBarShareButton.tsx
index 7c3464895a..15945e579f 100644
--- a/src/commons/controlBar/ControlBarShareButton.tsx
+++ b/src/commons/controlBar/ControlBarShareButton.tsx
@@ -35,7 +35,7 @@ type State = {
 };
 
 export class ControlBarShareButton extends React.PureComponent<ControlBarShareButtonProps, State> {
-  private shareInputElem: React.RefObject<HTMLInputElement>;
+  private shareInputElem: React.RefObject<HTMLInputElement | null>;
 
   constructor(props: ControlBarShareButtonProps) {
     super(props);
diff --git a/src/commons/sideContent/content/SideContentContestVoting.tsx b/src/commons/sideContent/content/SideContentContestVoting.tsx
index 2af8989e25..76ae9056e5 100644
--- a/src/commons/sideContent/content/SideContentContestVoting.tsx
+++ b/src/commons/sideContent/content/SideContentContestVoting.tsx
@@ -117,7 +117,9 @@ const SideContentContestVoting: React.FC<SideContentContestVotingProps> = ({
           onDragLeave={handleDragLeave}
           onDragEnter={handleDragEnter}
           onDrop={handleDrop}
-          ref={item => (tierContainerRefs.current[index] = item)}
+          ref={item => {
+            tierContainerRefs.current[index] = item;
+          }}
         />
       </div>
     ));
diff --git a/src/commons/sourceRecorder/SourceRecorderControlBar.tsx b/src/commons/sourceRecorder/SourceRecorderControlBar.tsx
index 842a6d9b1f..4606a87eca 100644
--- a/src/commons/sourceRecorder/SourceRecorderControlBar.tsx
+++ b/src/commons/sourceRecorder/SourceRecorderControlBar.tsx
@@ -53,7 +53,7 @@ type State = {
 };
 
 class SourceRecorderControlBar extends React.PureComponent<SourceRecorderControlBarProps, State> {
-  private audio: React.RefObject<HTMLAudioElement>;
+  private audio: React.RefObject<HTMLAudioElement | null>;
 
   constructor(props: SourceRecorderControlBarProps) {
     super(props);
diff --git a/src/commons/sourceRecorder/SourceRecorderEditor.tsx b/src/commons/sourceRecorder/SourceRecorderEditor.tsx
index 0f7b9af4d0..ebb1de4a72 100644
--- a/src/commons/sourceRecorder/SourceRecorderEditor.tsx
+++ b/src/commons/sourceRecorder/SourceRecorderEditor.tsx
@@ -60,7 +60,7 @@ type OwnProps = {
 
 class SourcecastEditor extends React.PureComponent<SourceRecorderEditorProps, {}> {
   public ShareAce: any;
-  public AceEditor: React.RefObject<AceEditor>;
+  public AceEditor: React.RefObject<AceEditor | null>;
   private onChangeMethod: (newCode: string, delta: CodeDelta) => void;
   private onCursorChange: (selecction: any) => void;
   private onSelectionChange: (selection: any) => void;

From c27412e974cbb7109ada2101241c9e76b72c7b4f Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:06:58 +0800
Subject: [PATCH 04/16] Fix remaining codebase errors

---
 src/commons/sideContent/content/SideContentContestVoting.tsx  | 4 +++-
 .../content/githubAssessments/SideContentMarkdownEditor.tsx   | 2 +-
 src/commons/utils/Hooks.ts                                    | 4 +++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/commons/sideContent/content/SideContentContestVoting.tsx b/src/commons/sideContent/content/SideContentContestVoting.tsx
index 76ae9056e5..2c15dae975 100644
--- a/src/commons/sideContent/content/SideContentContestVoting.tsx
+++ b/src/commons/sideContent/content/SideContentContestVoting.tsx
@@ -148,7 +148,9 @@ const SideContentContestVoting: React.FC<SideContentContestVotingProps> = ({
                   id={`item-${index + 1}`}
                   onDragStart={handleDragStart}
                   onDragEnd={handleDragEnd(contestEntry)}
-                  ref={item => (contestEntryRefs.current[index] = item)}
+                  ref={item => {
+                    contestEntryRefs.current[index] = item;
+                  }}
                   data-testid="voting-item"
                 >
                   <Card
diff --git a/src/commons/sideContent/content/githubAssessments/SideContentMarkdownEditor.tsx b/src/commons/sideContent/content/githubAssessments/SideContentMarkdownEditor.tsx
index ccbea9044d..22eb649c8d 100644
--- a/src/commons/sideContent/content/githubAssessments/SideContentMarkdownEditor.tsx
+++ b/src/commons/sideContent/content/githubAssessments/SideContentMarkdownEditor.tsx
@@ -12,7 +12,7 @@ type Props = {
 const SideContentMarkdownEditor: React.FC<Props> = ({ allowEdits, content, setContent }) => {
   const [editorModeOn, setEditorModeOn] = React.useState(false);
 
-  const node = React.useRef() as any;
+  const node = React.useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     function handleClick(event: any) {
diff --git a/src/commons/utils/Hooks.ts b/src/commons/utils/Hooks.ts
index 9aafc00d08..f54732ab95 100644
--- a/src/commons/utils/Hooks.ts
+++ b/src/commons/utils/Hooks.ts
@@ -79,7 +79,9 @@ export const useTypedSelector: TypedUseSelectorHook<OverallState> = useSelector;
  * @param ref A reference to the underlying HTML element.
  */
 
-export const useDimensions = (ref: RefObject<HTMLElement>): [width: number, height: number] => {
+export const useDimensions = (
+  ref: RefObject<HTMLElement | null>
+): [width: number, height: number] => {
   const [width, setWidth] = React.useState(0);
   const [height, setHeight] = React.useState(0);
 

From 2dd629ab97c1894e562fa8dc15c1bc21ae381d92 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:09:05 +0800
Subject: [PATCH 05/16] Fix some test errors

---
 src/commons/dropdown/DropdownCourses.tsx      | 4 ++--
 src/commons/dropdown/DropdownCreateCourse.tsx | 4 ++--
 src/commons/profile/Profile.tsx               | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/commons/dropdown/DropdownCourses.tsx b/src/commons/dropdown/DropdownCourses.tsx
index 6bc10e5f6c..e47042912c 100644
--- a/src/commons/dropdown/DropdownCourses.tsx
+++ b/src/commons/dropdown/DropdownCourses.tsx
@@ -13,7 +13,7 @@ type Props = {
   courseId?: number;
 };
 
-const DropdownCourses: React.FC<Props> = ({ isOpen, onClose, courses, courseId }) => {
+const DropdownCourses = (({ isOpen, onClose, courses, courseId }) => {
   const navigate = useNavigate();
 
   const options = courses.map(course => ({
@@ -47,6 +47,6 @@ const DropdownCourses: React.FC<Props> = ({ isOpen, onClose, courses, courseId }
       </DialogBody>
     </Dialog>
   );
-};
+}) satisfies React.FC<Props>;
 
 export default DropdownCourses;
diff --git a/src/commons/dropdown/DropdownCreateCourse.tsx b/src/commons/dropdown/DropdownCreateCourse.tsx
index 2d37ce7eb9..54c2bfe3a2 100644
--- a/src/commons/dropdown/DropdownCreateCourse.tsx
+++ b/src/commons/dropdown/DropdownCreateCourse.tsx
@@ -29,7 +29,7 @@ type Props = {
   onClose: () => void;
 };
 
-const DropdownCreateCourse: React.FC<Props> = props => {
+const DropdownCreateCourse = (props => {
   const dispatch = useDispatch();
 
   const [courseConfig, setCourseConfig] = React.useState<UpdateCourseConfiguration>({
@@ -280,6 +280,6 @@ const DropdownCreateCourse: React.FC<Props> = props => {
       </DialogBody>
     </Dialog>
   );
-};
+}) satisfies React.FC<Props>;
 
 export default DropdownCreateCourse;
diff --git a/src/commons/profile/Profile.tsx b/src/commons/profile/Profile.tsx
index da0368b21c..7d0db57563 100644
--- a/src/commons/profile/Profile.tsx
+++ b/src/commons/profile/Profile.tsx
@@ -16,7 +16,7 @@ type OwnProps = {
   onClose: () => void;
 };
 
-const Profile: React.FC<ProfileProps> = props => {
+const Profile = (props => {
   // FIXME: `xp` is actually of type number | undefined here!
   // Fix the session type, then remove the typecast below
   const {
@@ -188,6 +188,6 @@ const Profile: React.FC<ProfileProps> = props => {
       {content}
     </Drawer>
   );
-};
+}) satisfies React.FC<ProfileProps>;
 
 export default Profile;

From a4f9ad6108e79f9e690af064c58f31a0cfaa990b Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:09:56 +0800
Subject: [PATCH 06/16] Update AcademyNavigationBar.tsx

---
 .../subcomponents/__tests__/AcademyNavigationBar.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.tsx b/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.tsx
index 1be483f623..c591846291 100644
--- a/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.tsx
+++ b/src/commons/navigationBar/subcomponents/__tests__/AcademyNavigationBar.tsx
@@ -20,9 +20,9 @@ const assessmentPaths = assessmentTypes.map(e => e.toLowerCase()).map(createCour
 const staffPaths = staffRoutes.map(createCoursePath);
 const adminPaths = adminRoutes.map(createCoursePath);
 
-const createMatchFn = (to: string) => (e: React.ReactElement) =>
+const createMatchFn = (to: string) => (e: React.ReactElement<any>) =>
   e.props.to === to && !e.props.disabled;
-const getChildren = (e: React.ReactElement) => e.props.children;
+const getChildren = (e: React.ReactElement<any>) => e.props.children;
 
 const validateAssessmentPaths = (tree: React.ReactElement, exist: boolean = true) =>
   assessmentPaths.forEach(path => {

From df551c842230d1db634e887e0567b901242179f6 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:12:24 +0800
Subject: [PATCH 07/16] Fix remaining test error

---
 src/commons/utils/TestUtils.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/commons/utils/TestUtils.ts b/src/commons/utils/TestUtils.ts
index 401368cddd..3e305e7eb7 100644
--- a/src/commons/utils/TestUtils.ts
+++ b/src/commons/utils/TestUtils.ts
@@ -9,7 +9,9 @@ export const shallowRender = (element: React.ReactElement) => {
 };
 
 export const renderTree = async (element: React.ReactElement) => {
-  const app = renderer.create(element);
+  // Safe to do this since we don't have any async components
+  // In React 19, components can return `ReactNode | Promise<ReactNode>`
+  const app = renderer.create(element as any);
   await act(() => app);
   return app;
 };

From 2516f8d969db02d0062b1c087fa3dce386b1d883 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 00:32:53 +0800
Subject: [PATCH 08/16] Fix missed type bug

---
 src/commons/utils/TestUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/commons/utils/TestUtils.ts b/src/commons/utils/TestUtils.ts
index 3e305e7eb7..7c086eca3d 100644
--- a/src/commons/utils/TestUtils.ts
+++ b/src/commons/utils/TestUtils.ts
@@ -29,7 +29,7 @@ export const renderTreeJson = async (element: React.ReactElement) => {
 export function deepFilter<T>(
   nestedObject: T,
   matchFn: (e: T) => boolean,
-  getChildren: (e: T) => T[]
+  getChildren: (e: T) => T[] | undefined
 ) {
   const matches: any[] = [];
 

From b950de0caa7b919a3b66a5676b95227787caded7 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 01:24:04 +0800
Subject: [PATCH 09/16] Remove deprecated react-test-renderer

---
 package.json                   |   3 +-
 src/commons/utils/TestUtils.ts |  18 ++--
 yarn.lock                      | 161 ++++-----------------------------
 3 files changed, 27 insertions(+), 155 deletions(-)

diff --git a/package.json b/package.json
index ed9746a4fe..0887e7b61f 100644
--- a/package.json
+++ b/package.json
@@ -143,7 +143,6 @@
     "@types/react-dom": "^19.1.6",
     "@types/react-redux": "^7.1.24",
     "@types/react-syntax-highlighter": "^15.5.7",
-    "@types/react-test-renderer": "^19.1.0",
     "@types/redux-mock-store": "^1.0.3",
     "@types/showdown": "^2.0.1",
     "@types/xml2js": "^0.4.11",
@@ -171,10 +170,10 @@
     "prettier": "^3.3.3",
     "process": "^0.11.10",
     "react-error-overlay": "^6.0.11",
-    "react-test-renderer": "^19.1.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",
diff --git a/src/commons/utils/TestUtils.ts b/src/commons/utils/TestUtils.ts
index 7c086eca3d..d6f0c3260a 100644
--- a/src/commons/utils/TestUtils.ts
+++ b/src/commons/utils/TestUtils.ts
@@ -1,24 +1,22 @@
+import { render } from '@testing-library/react';
 import React, { act } from 'react';
-import renderer from 'react-test-renderer';
-import { createRenderer } from 'react-test-renderer/shallow';
+import { shallow } from 'shallow-react-snapshot';
 
 export const shallowRender = (element: React.ReactElement) => {
-  const renderer = createRenderer();
-  renderer.render(element);
-  return renderer.getRenderOutput();
+  const app = render(element);
+  return shallow(app.container, element);
 };
 
 export const renderTree = async (element: React.ReactElement) => {
-  // Safe to do this since we don't have any async components
-  // In React 19, components can return `ReactNode | Promise<ReactNode>`
-  const app = renderer.create(element as any);
+  const app = render(element);
   await act(() => app);
-  return app;
+  return app.asFragment();
 };
 
+// TODO: Remove and replace with renderTree directly
 export const renderTreeJson = async (element: React.ReactElement) => {
   const app = await renderTree(element);
-  return app.toJSON();
+  return app;
 };
 
 /**
diff --git a/yarn.lock b/yarn.lock
index 2846bcdbdf..224c3c663a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -103,20 +103,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.27.5, @babel/generator@npm:^7.7.2":
-  version: 7.27.5
-  resolution: "@babel/generator@npm:7.27.5"
-  dependencies:
-    "@babel/parser": "npm:^7.27.5"
-    "@babel/types": "npm:^7.27.3"
-    "@jridgewell/gen-mapping": "npm:^0.3.5"
-    "@jridgewell/trace-mapping": "npm:^0.3.25"
-    jsesc: "npm:^3.0.2"
-  checksum: 10c0/8f649ef4cd81765c832bb11de4d6064b035ffebdecde668ba7abee68a7b0bce5c9feabb5dc5bb8aeba5bd9e5c2afa3899d852d2bd9ca77a711ba8c8379f416f0
-  languageName: node
-  linkType: hard
-
-"@babel/generator@npm:^7.28.0":
+"@babel/generator@npm:^7.28.0, @babel/generator@npm:^7.7.2":
   version: 7.28.0
   resolution: "@babel/generator@npm:7.28.0"
   dependencies:
@@ -330,18 +317,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.19.4, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.27.5, @babel/parser@npm:^7.27.7":
-  version: 7.27.7
-  resolution: "@babel/parser@npm:7.27.7"
-  dependencies:
-    "@babel/types": "npm:^7.27.7"
-  bin:
-    parser: ./bin/babel-parser.js
-  checksum: 10c0/f6202faeb873f0b3083022e50a5046fe07266d337c0a3bd80a491f8435ba6d9e383d49725e3dcd666b3b52c0dccb4e0f1f1004915762345f7eeed5ba54ea9fd2
-  languageName: node
-  linkType: hard
-
-"@babel/parser@npm:^7.28.0":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.19.4, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.23.9, @babel/parser@npm:^7.27.2, @babel/parser@npm:^7.28.0":
   version: 7.28.0
   resolution: "@babel/parser@npm:7.28.0"
   dependencies:
@@ -1436,22 +1412,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.27.3":
-  version: 7.27.7
-  resolution: "@babel/traverse@npm:7.27.7"
-  dependencies:
-    "@babel/code-frame": "npm:^7.27.1"
-    "@babel/generator": "npm:^7.27.5"
-    "@babel/parser": "npm:^7.27.7"
-    "@babel/template": "npm:^7.27.2"
-    "@babel/types": "npm:^7.27.7"
-    debug: "npm:^4.3.1"
-    globals: "npm:^11.1.0"
-  checksum: 10c0/941fecd0248546f059d58230590a2765d128ef072c8521c9e0bcf6037abf28a0ea4736003d0d695513128d07fe00a7bc57acaada2ed905941d44619b9f49cf0c
-  languageName: node
-  linkType: hard
-
-"@babel/traverse@npm:^7.28.0":
+"@babel/traverse@npm:^7.27.1, @babel/traverse@npm:^7.27.3, @babel/traverse@npm:^7.28.0":
   version: 7.28.0
   resolution: "@babel/traverse@npm:7.28.0"
   dependencies:
@@ -1466,17 +1427,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.0, @babel/types@npm:^7.21.3, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.27.6, @babel/types@npm:^7.27.7, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
-  version: 7.27.7
-  resolution: "@babel/types@npm:7.27.7"
-  dependencies:
-    "@babel/helper-string-parser": "npm:^7.27.1"
-    "@babel/helper-validator-identifier": "npm:^7.27.1"
-  checksum: 10c0/1d1dcb5fa7cfba2b4034a3ab99ba17049bfc4af9e170935575246cdb1cee68b04329a0111506d9ae83fb917c47dbd4394a6db5e32fbd041b7834ffbb17ca086b
-  languageName: node
-  linkType: hard
-
-"@babel/types@npm:^7.28.0":
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.0, @babel/types@npm:^7.21.3, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.27.6, @babel/types@npm:^7.28.0, @babel/types@npm:^7.3.0, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
   version: 7.28.1
   resolution: "@babel/types@npm:7.28.1"
   dependencies:
@@ -2351,7 +2302,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/gen-mapping@npm:^0.3.12":
+"@jridgewell/gen-mapping@npm:^0.3.12, @jridgewell/gen-mapping@npm:^0.3.5":
   version: 0.3.12
   resolution: "@jridgewell/gen-mapping@npm:0.3.12"
   dependencies:
@@ -2361,17 +2312,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/gen-mapping@npm:^0.3.5":
-  version: 0.3.5
-  resolution: "@jridgewell/gen-mapping@npm:0.3.5"
-  dependencies:
-    "@jridgewell/set-array": "npm:^1.2.1"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.10"
-    "@jridgewell/trace-mapping": "npm:^0.3.24"
-  checksum: 10c0/1be4fd4a6b0f41337c4f5fdf4afc3bd19e39c3691924817108b82ffcb9c9e609c273f936932b9fba4b3a298ce2eb06d9bff4eb1cc3bd81c4f4ee1b4917e25feb
-  languageName: node
-  linkType: hard
-
 "@jridgewell/resolve-uri@npm:^3.1.0":
   version: 3.1.2
   resolution: "@jridgewell/resolve-uri@npm:3.1.2"
@@ -2379,7 +2319,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/set-array@npm:^1.0.0, @jridgewell/set-array@npm:^1.2.1":
+"@jridgewell/set-array@npm:^1.0.0":
   version: 1.2.1
   resolution: "@jridgewell/set-array@npm:1.2.1"
   checksum: 10c0/2a5aa7b4b5c3464c895c802d8ae3f3d2b92fcbe84ad12f8d0bfbb1f5ad006717e7577ee1fd2eac00c088abe486c7adb27976f45d2941ff6b0b92b2c3302c60f4
@@ -2396,31 +2336,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14":
-  version: 1.4.15
-  resolution: "@jridgewell/sourcemap-codec@npm:1.4.15"
-  checksum: 10c0/0c6b5ae663087558039052a626d2d7ed5208da36cfd707dcc5cea4a07cfc918248403dcb5989a8f7afaf245ce0573b7cc6fd94c4a30453bd10e44d9363940ba5
-  languageName: node
-  linkType: hard
-
-"@jridgewell/sourcemap-codec@npm:^1.5.0":
+"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0":
   version: 1.5.4
   resolution: "@jridgewell/sourcemap-codec@npm:1.5.4"
   checksum: 10c0/c5aab3e6362a8dd94ad80ab90845730c825fc4c8d9cf07ebca7a2eb8a832d155d62558800fc41d42785f989ddbb21db6df004d1786e8ecb65e428ab8dff71309
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.9":
-  version: 0.3.25
-  resolution: "@jridgewell/trace-mapping@npm:0.3.25"
-  dependencies:
-    "@jridgewell/resolve-uri": "npm:^3.1.0"
-    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
-  checksum: 10c0/3d1ce6ebc69df9682a5a8896b414c6537e428a1d68b02fcc8363b04284a8ca0df04d0ee3013132252ab14f2527bc13bea6526a912ecb5658f0e39fd2860b4df4
-  languageName: node
-  linkType: hard
-
-"@jridgewell/trace-mapping@npm:^0.3.28":
+"@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.24, @jridgewell/trace-mapping@npm:^0.3.25, @jridgewell/trace-mapping@npm:^0.3.28, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.29
   resolution: "@jridgewell/trace-mapping@npm:0.3.29"
   dependencies:
@@ -4262,13 +4185,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/prop-types@npm:*":
-  version: 15.7.11
-  resolution: "@types/prop-types@npm:15.7.11"
-  checksum: 10c0/e53423cf9d510515ef8b47ff42f4f1b65a7b7b37c8704e2dbfcb9a60defe0c0e1f3cb1acfdeb466bad44ca938d7c79bffdd51b48ffb659df2432169d0b27a132
-  languageName: node
-  linkType: hard
-
 "@types/react-copy-to-clipboard@npm:^5.0.4":
   version: 5.0.7
   resolution: "@types/react-copy-to-clipboard@npm:5.0.7"
@@ -4326,15 +4242,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-test-renderer@npm:^19.1.0":
-  version: 19.1.0
-  resolution: "@types/react-test-renderer@npm:19.1.0"
-  dependencies:
-    "@types/react": "npm:*"
-  checksum: 10c0/799654e430df10aeaf267d71507fb64ec151359ead7e3774111bfd4abce7e0911dba461811195c06c22a6d17496ea92537d3185320ff4112fe29954cad1b9152
-  languageName: node
-  linkType: hard
-
 "@types/react-transition-group@npm:^4.4.0":
   version: 4.4.10
   resolution: "@types/react-transition-group@npm:4.4.10"
@@ -4344,17 +4251,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:*":
-  version: 18.3.23
-  resolution: "@types/react@npm:18.3.23"
-  dependencies:
-    "@types/prop-types": "npm:*"
-    csstype: "npm:^3.0.2"
-  checksum: 10c0/49331800b76572eb2992a5c44801dbf8c612a5f99c8f4e4200f06c7de6f3a6e9455c661784a6c5469df96fa45622cb4a9d0982c44e6a0d5719be5f2ef1f545ed
-  languageName: node
-  linkType: hard
-
-"@types/react@npm:^19.1.8":
+"@types/react@npm:*, @types/react@npm:^19.1.8":
   version: 19.1.8
   resolution: "@types/react@npm:19.1.8"
   dependencies:
@@ -4444,7 +4341,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:^17.0.33":
+"@types/yargs@npm:^17.0.33, @types/yargs@npm:^17.0.8":
   version: 17.0.33
   resolution: "@types/yargs@npm:17.0.33"
   dependencies:
@@ -4453,15 +4350,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:^17.0.8":
-  version: 17.0.32
-  resolution: "@types/yargs@npm:17.0.32"
-  dependencies:
-    "@types/yargs-parser": "npm:*"
-  checksum: 10c0/2095e8aad8a4e66b86147415364266b8d607a3b95b4239623423efd7e29df93ba81bb862784a6e08664f645cc1981b25fd598f532019174cd3e5e1e689e1cccf
-  languageName: node
-  linkType: hard
-
 "@typescript-eslint/eslint-plugin@npm:8.36.0":
   version: 8.36.0
   resolution: "@typescript-eslint/eslint-plugin@npm:8.36.0"
@@ -7806,7 +7694,6 @@ __metadata:
     "@types/react-dom": "npm:^19.1.6"
     "@types/react-redux": "npm:^7.1.24"
     "@types/react-syntax-highlighter": "npm:^15.5.7"
-    "@types/react-test-renderer": "npm:^19.1.0"
     "@types/redux-mock-store": "npm:^1.0.3"
     "@types/showdown": "npm:^2.0.1"
     "@types/xml2js": "npm:^0.4.11"
@@ -7883,7 +7770,6 @@ __metadata:
     react-simple-keyboard: "npm:^3.6.27"
     react-sortable-hoc: "npm:^2.0.0"
     react-syntax-highlighter: "npm:^15.5.0"
-    react-test-renderer: "npm:^19.1.0"
     react-textarea-autosize: "npm:^8.5.2"
     redux-mock-store: "npm:^1.5.4"
     redux-saga: "npm:^1.2.3"
@@ -7891,6 +7777,7 @@ __metadata:
     rehype-react: "npm:^8.0.0"
     resize-observer-polyfill: "npm:^1.5.1"
     sass: "npm:^1.63.6"
+    shallow-react-snapshot: "npm:^0.2.2"
     showdown: "npm:^2.1.0"
     sourceror: "npm:^0.8.5"
     stream-browserify: "npm:^3.0.0"
@@ -12123,13 +12010,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^19.1.0":
-  version: 19.1.0
-  resolution: "react-is@npm:19.1.0"
-  checksum: 10c0/b6c6cadd172d5d39f66d493700d137a5545c294a62ce0f8ec793d59794c97d2bed6bad227626f16bd0e90004ed7fdc8ed662a004e6edcf5d2b7ecb6e3040ea6b
-  languageName: node
-  linkType: hard
-
 "react-konva@npm:^19.0.7":
   version: 19.0.7
   resolution: "react-konva@npm:19.0.7"
@@ -12366,18 +12246,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-test-renderer@npm:^19.1.0":
-  version: 19.1.0
-  resolution: "react-test-renderer@npm:19.1.0"
-  dependencies:
-    react-is: "npm:^19.1.0"
-    scheduler: "npm:^0.26.0"
-  peerDependencies:
-    react: ^19.1.0
-  checksum: 10c0/34ed4a37ba8b0beb96c048de6ff28574f018a18dd1042c24f8f46142d48eb5b27f82ff7c2823d082932fd3983c5a3529ab8cc8f15191d4306df0082f9f84678f
-  languageName: node
-  linkType: hard
-
 "react-textarea-autosize@npm:^8.5.2":
   version: 8.5.9
   resolution: "react-textarea-autosize@npm:8.5.9"
@@ -13350,6 +13218,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shallow-react-snapshot@npm:^0.2.2":
+  version: 0.2.2
+  resolution: "shallow-react-snapshot@npm:0.2.2"
+  checksum: 10c0/16f4294df815ce0a3f0ea4befefad057fda52b312e3a98d28ea99a2eca4968a48d1ebcc268e89f20ccea1b1dc06b3989610b3d9110f09735af8a70e710ee8fef
+  languageName: node
+  linkType: hard
+
 "shallowequal@npm:1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"

From 090a536f78da1378b1be49b2fee81e7a616f7742 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 01:24:33 +0800
Subject: [PATCH 10/16] Delete useless test

---
 .../application/__tests__/Application.tsx     | 30 -------------------
 .../__snapshots__/Application.tsx.snap        | 25 ----------------
 2 files changed, 55 deletions(-)
 delete mode 100644 src/commons/application/__tests__/Application.tsx
 delete mode 100644 src/commons/application/__tests__/__snapshots__/Application.tsx.snap

diff --git a/src/commons/application/__tests__/Application.tsx b/src/commons/application/__tests__/Application.tsx
deleted file mode 100644
index 54ff1729f2..0000000000
--- a/src/commons/application/__tests__/Application.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useTypedSelector } from 'src/commons/utils/Hooks';
-import { shallowRender } from 'src/commons/utils/TestUtils';
-
-import Application from '../Application';
-
-// JSDOM does not implement window.matchMedia, so we have to mock it.
-window.matchMedia =
-  window.matchMedia ||
-  function () {
-    return {
-      matches: false,
-      addListener: function () {},
-      removeListener: function () {}
-    };
-  };
-
-jest.mock('react-redux', () => ({
-  ...jest.requireActual('react-redux'),
-  useDispatch: jest.fn(),
-  useSelector: jest.fn()
-}));
-const useSelectorMock = useTypedSelector as jest.Mock;
-
-test('Application renders correctly', () => {
-  useSelectorMock.mockReturnValue({ name: 'Bob' });
-
-  const app = <Application />;
-  const tree = shallowRender(app);
-  expect(tree).toMatchSnapshot();
-});
diff --git a/src/commons/application/__tests__/__snapshots__/Application.tsx.snap b/src/commons/application/__tests__/__snapshots__/Application.tsx.snap
deleted file mode 100644
index 48245c5e41..0000000000
--- a/src/commons/application/__tests__/__snapshots__/Application.tsx.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Application renders correctly 1`] = `
-<Context.Provider
-  value={
-    [
-      {
-        "editorBinding": "",
-      },
-      [Function],
-    ]
-  }
->
-  <div
-    className="Application"
-  >
-    <NavigationBar />
-    <div
-      className="Application__main"
-    >
-      <Outlet />
-    </div>
-  </div>
-</Context.Provider>
-`;

From 0c8ba12a05595bee545873c6317261d02d7190aa Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 01:29:05 +0800
Subject: [PATCH 11/16] Update some snapshots

---
 .../__snapshots__/ContentDisplay.tsx.snap     |   18 +-
 .../__tests__/__snapshots__/Markdown.tsx.snap |   83 +-
 .../AssessmentWorkspace.tsx.snap              |   95 +-
 .../NavigationBarLangSelectButton.tsx.snap    |   61 +-
 .../SideContentHtmlDisplay.tsx.snap           |   16 +-
 .../__snapshots__/SicpExercise.tsx.snap       |   77 +-
 .../__snapshots__/SicpIndexPage.tsx.snap      | 1203 +++++++----------
 .../__tests__/__snapshots__/SicpToc.tsx.snap  |  933 +++++--------
 8 files changed, 1031 insertions(+), 1455 deletions(-)

diff --git a/src/commons/__tests__/__snapshots__/ContentDisplay.tsx.snap b/src/commons/__tests__/__snapshots__/ContentDisplay.tsx.snap
index a10dcc05e0..cd84441922 100644
--- a/src/commons/__tests__/__snapshots__/ContentDisplay.tsx.snap
+++ b/src/commons/__tests__/__snapshots__/ContentDisplay.tsx.snap
@@ -1,19 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 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 bp5-card bp5-elevation-3"
+      class="col-md-10 col-xs-11 contentdisplay-content-parent"
     >
-      <div>
-         Test Content 
+      <div
+        class="contentdisplay-content bp5-card bp5-elevation-3"
+      >
+        <div>
+           Test Content 
+        </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/src/commons/__tests__/__snapshots__/Markdown.tsx.snap b/src/commons/__tests__/__snapshots__/Markdown.tsx.snap
index baf1d93d8f..f9a9e46630 100644
--- a/src/commons/__tests__/__snapshots__/Markdown.tsx.snap
+++ b/src/commons/__tests__/__snapshots__/Markdown.tsx.snap
@@ -1,16 +1,75 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Markdown page renders correctly 1`] = `
-<div
-  className="md bp5-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 bp5-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>
 `;
diff --git a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
index 3f1f133cb7..f455263a91 100644
--- a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
+++ b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
@@ -1,57 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AssessmentWorkspace AssessmentWorkspace page "loading" content renders correctly 1`] = `
-<div
-  className="bp5-non-ideal-state bp5-non-ideal-state-vertical WorkspaceParent bp5-dark"
->
+<DocumentFragment>
   <div
-    className="bp5-non-ideal-state-visual"
-    style={
-      {
-        "fontSize": "48px",
-        "lineHeight": "48px",
-      }
-    }
+    class="bp5-non-ideal-state bp5-non-ideal-state-vertical WorkspaceParent bp5-dark"
   >
     <div
-      aria-label="loading"
-      aria-valuemax={100}
-      aria-valuemin={0}
-      className="bp5-spinner"
-      role="progressbar"
+      class="bp5-non-ideal-state-visual"
+      style="font-size: 48px; line-height: 48px;"
     >
       <div
-        className="bp5-spinner-animation"
+        aria-label="loading"
+        aria-valuemax="100"
+        aria-valuemin="0"
+        class="bp5-spinner"
+        role="progressbar"
       >
-        <svg
-          height={100}
-          strokeWidth="4.00"
-          viewBox="3.00 3.00 94.00 94.00"
-          width={100}
+        <div
+          class="bp5-spinner-animation"
         >
-          <path
-            className="bp5-spinner-track"
-            d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
-          />
-          <path
-            className="bp5-spinner-head"
-            d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
-            pathLength={280}
-            strokeDasharray="280 280"
-            strokeDashoffset={210}
-          />
-        </svg>
+          <svg
+            height="100"
+            stroke-width="4.00"
+            viewBox="3.00 3.00 94.00 94.00"
+            width="100"
+          >
+            <path
+              class="bp5-spinner-track"
+              d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
+            />
+            <path
+              class="bp5-spinner-head"
+              d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
+              pathLength="280"
+              stroke-dasharray="280 280"
+              stroke-dashoffset="210"
+            />
+          </svg>
+        </div>
       </div>
     </div>
-  </div>
-  <div
-    className="bp5-non-ideal-state-text"
-  >
-    <div>
-      Getting mission ready...
+    <div
+      class="bp5-non-ideal-state-text"
+    >
+      <div>
+        Getting mission ready...
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting question renders correctly 1`] = `
@@ -387,7 +384,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_question_overview"
-                          aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
                           class="bp5-tab side-content-tab"
@@ -425,7 +421,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_briefing"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -463,7 +458,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_contest_voting"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -501,7 +495,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_score_leaderboard"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -539,7 +532,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_popular_vote_leaderboard"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -1701,7 +1693,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_question_overview"
-                          aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
                           class="bp5-tab side-content-tab"
@@ -1739,7 +1730,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_briefing"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -1777,7 +1767,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_autograder"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -2500,7 +2489,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_question_overview"
-                          aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
                           class="bp5-tab side-content-tab"
@@ -2538,7 +2526,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_briefing"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -2576,7 +2563,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_autograder"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -3341,7 +3327,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_question_overview"
-                          aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
                           class="bp5-tab side-content-tab"
@@ -3379,7 +3364,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_briefing"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -3417,7 +3401,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_autograder"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -4182,7 +4165,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_question_overview"
-                          aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
                           class="bp5-tab side-content-tab"
@@ -4220,7 +4202,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_briefing"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -4258,7 +4239,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_autograder"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -4296,7 +4276,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_grading"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
diff --git a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap
index 4a517e0706..8b86d46aba 100644
--- a/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap
+++ b/src/commons/navigationBar/subcomponents/__tests__/__snapshots__/NavigationBarLangSelectButton.tsx.snap
@@ -1,33 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NavigationBarLangSelectButton should render correctly 1`] = `
-<span
-  className="bp5-popover-target"
-  onClick={[Function]}
-  onKeyDown={[Function]}
->
-  <button
-    aria-expanded={false}
-    aria-haspopup="menu"
-    className="bp5-button"
-    data-testid="NavigationBarLangSelectButton"
-    disabled={false}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    type="button"
+<DocumentFragment>
+  <span
+    class="bp5-popover-target"
   >
-    <span
-      className="bp5-button-text"
+    <button
+      aria-expanded="false"
+      aria-haspopup="menu"
+      class="bp5-button"
+      data-testid="NavigationBarLangSelectButton"
+      type="button"
     >
-      JavaScript
-    </span>
-    <span
-      aria-hidden={true}
-      className="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-      data-icon="caret-down"
-    />
-  </button>
-</span>
+      <span
+        class="bp5-button-text"
+      >
+        JavaScript
+      </span>
+      <span
+        aria-hidden="true"
+        class="bp5-icon bp5-icon-caret-down"
+      >
+        <svg
+          data-icon="caret-down"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </span>
+</DocumentFragment>
 `;
diff --git a/src/commons/sideContent/__tests__/__snapshots__/SideContentHtmlDisplay.tsx.snap b/src/commons/sideContent/__tests__/__snapshots__/SideContentHtmlDisplay.tsx.snap
index d150036179..c0a5967b4a 100644
--- a/src/commons/sideContent/__tests__/__snapshots__/SideContentHtmlDisplay.tsx.snap
+++ b/src/commons/sideContent/__tests__/__snapshots__/SideContentHtmlDisplay.tsx.snap
@@ -1,11 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HTML Display renders correctly 1`] = `
-<iframe
-  className="sa-html-display"
-  sandbox="allow-scripts"
-  src="about:blank"
-  srcDoc="<p>Hello World!</p>"
-  title="HTML Display"
-/>
+<DocumentFragment>
+  <iframe
+    class="sa-html-display"
+    sandbox="allow-scripts"
+    src="about:blank"
+    srcdoc="<p>Hello World!</p>"
+    title="HTML Display"
+  />
+</DocumentFragment>
 `;
diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpExercise.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpExercise.tsx.snap
index 5f3535c741..a5804bcc14 100644
--- a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpExercise.tsx.snap
+++ b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpExercise.tsx.snap
@@ -1,56 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Sicp exercise renders correctly 1`] = `
-<div
-  className="sicp-exercise bp5-card bp5-elevation-1"
->
-  <b>
-    Title
-  </b>
-  <div>
-    <div>
-      body
-    </div>
-  </div>
+<DocumentFragment>
   <div
-    className="sicp-button-container"
+    class="sicp-exercise bp5-card bp5-elevation-1"
   >
-    <button
-      className="bp5-button bp5-large sicp-show-solution-button"
-      disabled={false}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      type="button"
+    <b>
+      Title
+    </b>
+    <div>
+      <div>
+        body
+      </div>
+    </div>
+    <div
+      class="sicp-button-container"
     >
-      <span
-        className="bp5-button-text"
+      <button
+        class="bp5-button bp5-large sicp-show-solution-button"
+        type="button"
       >
-        Show Solution
-      </span>
-    </button>
-  </div>
-  <div
-    className="bp5-collapse sicp-solution"
-    style={
-      {
-        "height": undefined,
-        "overflowY": undefined,
-        "transition": undefined,
-      }
-    }
-  >
+        <span
+          class="bp5-button-text"
+        >
+          Show Solution
+        </span>
+      </button>
+    </div>
     <div
-      aria-hidden={true}
-      className="bp5-collapse-body"
-      style={
-        {
-          "transform": "translateY(-undefinedpx)",
-          "transition": undefined,
-        }
-      }
-    />
+      class="bp5-collapse sicp-solution"
+    >
+      <div
+        aria-hidden="true"
+        class="bp5-collapse-body"
+        style="transform: translateY(-undefinedpx);"
+      />
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap
index 8cead71e28..4319e453b0 100644
--- a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap
+++ b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpIndexPage.tsx.snap
@@ -1,798 +1,567 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Sicp index page 1`] = `
-<div
-  className="sicp-index-page"
->
+<DocumentFragment>
   <div
-    className="sicp-cover"
+    class="sicp-index-page"
   >
-    <img
-      alt="SICP"
-      src="http://source-academy.github.io/sicp/sicpjs.png"
-    />
     <div
-      className="sicp-cover-text"
+      class="sicp-cover"
     >
-      <div>
-        <h1
-          className="bp5-heading"
-        >
-          Structure and Interpretation of Computer Programs
-        </h1>
-        <h2
-          className="bp5-heading"
-        >
-          — JavaScript Edition
-        </h2>
-      </div>
+      <img
+        alt="SICP"
+        src="http://source-academy.github.io/sicp/sicpjs.png"
+      />
       <div
-        className="sicp-authors"
+        class="sicp-cover-text"
       >
-        <h4
-          className="bp5-heading"
-        >
-          Harold Abelson and Gerald Jay Sussman
-        </h4>
-        <p>
-          with Julie Sussman
-          <i>
-            — original authors
-          </i>
-        </p>
-        <h4
-          className="bp5-heading"
-        >
-          Martin Henz and Tobias Wrigstad
-        </h4>
-        <p>
-          with Julie Sussman
-          <i>
-            — adapters to JavaScript
-          </i>
-        </p>
-        <h4
-          className="bp5-heading"
+        <div>
+          <h1
+            class="bp5-heading"
+          >
+            Structure and Interpretation of Computer Programs
+          </h1>
+          <h2
+            class="bp5-heading"
+          >
+            — JavaScript Edition
+          </h2>
+        </div>
+        <div
+          class="sicp-authors"
         >
-          Samuel Fang
-        </h4>
-        <p>
-          <i>
-            — designer and developer of this Interactive SICP JS edition
-          </i>
-        </p>
+          <h4
+            class="bp5-heading"
+          >
+            Harold Abelson and Gerald Jay Sussman
+          </h4>
+          <p>
+            with Julie Sussman
+            <i>
+              — original authors
+            </i>
+          </p>
+          <h4
+            class="bp5-heading"
+          >
+            Martin Henz and Tobias Wrigstad
+          </h4>
+          <p>
+            with Julie Sussman
+            <i>
+              — adapters to JavaScript
+            </i>
+          </p>
+          <h4
+            class="bp5-heading"
+          >
+            Samuel Fang
+          </h4>
+          <p>
+            <i>
+              — designer and developer of this Interactive SICP JS edition
+            </i>
+          </p>
+        </div>
       </div>
     </div>
-  </div>
-  <br />
-  <h2
-    className="bp5-heading"
-  >
-    Content
-  </h2>
-  <div
-    className="sicp-toc"
-  >
+    <br />
+    <h2
+      class="bp5-heading"
+    >
+      Content
+    </h2>
     <div
-      className="bp5-tree sicp-toc-tree"
+      class="sicp-toc"
     >
-      <ul
-        className="bp5-tree-node-list bp5-tree-root"
+      <div
+        class="bp5-tree sicp-toc-tree"
       >
-        <li
-          className="bp5-tree-node"
+        <ul
+          class="bp5-tree-node-list bp5-tree-root"
         >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
+          <li
+            class="bp5-tree-node"
           >
-            <span
-              className="bp5-tree-node-caret-none"
-            />
-            <span
-              className="bp5-tree-node-label"
+            <div
+              class="bp5-tree-node-content bp5-tree-node-content-0"
             >
-              Foreword
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
-          >
+              <span
+                class="bp5-tree-node-caret-none"
+              />
+              <span
+                class="bp5-tree-node-label"
+              >
+                Foreword
+              </span>
+            </div>
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-        <li
-          className="bp5-tree-node"
-        >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <span
-              className="bp5-tree-node-caret-none"
-            />
-            <span
-              className="bp5-tree-node-label"
+              class="bp5-collapse"
             >
-              Foreword to Structure and Interpretation of Computer Programs, 1984
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+          <li
+            class="bp5-tree-node"
           >
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-        <li
-          className="bp5-tree-node"
-        >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <span
-              className="bp5-tree-node-caret-none"
-            />
-            <span
-              className="bp5-tree-node-label"
+              class="bp5-tree-node-content bp5-tree-node-content-0"
             >
-              Preface
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
-          >
+              <span
+                class="bp5-tree-node-caret-none"
+              />
+              <span
+                class="bp5-tree-node-label"
+              >
+                Foreword to Structure and Interpretation of Computer Programs, 1984
+              </span>
+            </div>
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-        <li
-          className="bp5-tree-node"
-        >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <span
-              className="bp5-tree-node-caret-none"
-            />
-            <span
-              className="bp5-tree-node-label"
+              class="bp5-collapse"
             >
-              Prefaces to Structure and Interpretation of Computer Programs, 1996 & 1984
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+          <li
+            class="bp5-tree-node"
           >
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-        <li
-          className="bp5-tree-node"
-        >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <span
-              className="bp5-tree-node-caret-none"
-            />
-            <span
-              className="bp5-tree-node-label"
+              class="bp5-tree-node-content bp5-tree-node-content-0"
             >
-              Acknowledgments
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
-          >
+              <span
+                class="bp5-tree-node-caret-none"
+              />
+              <span
+                class="bp5-tree-node-label"
+              >
+                Preface
+              </span>
+            </div>
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-        <li
-          className="bp5-tree-node"
-        >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
+              class="bp5-collapse"
+            >
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+          <li
+            class="bp5-tree-node"
           >
-            <span
-              className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
-              onClick={[Function]}
+            <div
+              class="bp5-tree-node-content bp5-tree-node-content-0"
             >
-              <svg
-                data-icon="chevron-right"
-                height={16}
-                role="img"
-                viewBox="0 0 16 16"
-                width={16}
+              <span
+                class="bp5-tree-node-caret-none"
+              />
+              <span
+                class="bp5-tree-node-label"
               >
-                <title>
-                  Expand group
-                </title>
-                <path
-                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
-                  fillRule="evenodd"
-                  style={
-                    {
-                      "transformOrigin": "center",
-                    }
-                  }
-                  transform="scale(0.05, -0.05) translate(-160, -160)"
-                />
-              </svg>
-            </span>
-            <span
-              className="bp5-tree-node-label"
+                Prefaces to Structure and Interpretation of Computer Programs, 1996 & 1984
+              </span>
+            </div>
+            <div
+              class="bp5-collapse"
             >
-              1 Building Abstractions with Functions
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+          <li
+            class="bp5-tree-node"
           >
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-        <li
-          className="bp5-tree-node"
-        >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <span
-              className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
-              onClick={[Function]}
+              class="bp5-tree-node-content bp5-tree-node-content-0"
             >
-              <svg
-                data-icon="chevron-right"
-                height={16}
-                role="img"
-                viewBox="0 0 16 16"
-                width={16}
+              <span
+                class="bp5-tree-node-caret-none"
+              />
+              <span
+                class="bp5-tree-node-label"
               >
-                <title>
-                  Expand group
-                </title>
-                <path
-                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
-                  fillRule="evenodd"
-                  style={
-                    {
-                      "transformOrigin": "center",
-                    }
-                  }
-                  transform="scale(0.05, -0.05) translate(-160, -160)"
-                />
-              </svg>
-            </span>
-            <span
-              className="bp5-tree-node-label"
+                Acknowledgments
+              </span>
+            </div>
+            <div
+              class="bp5-collapse"
             >
-              2 Building Abstractions with Data
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+          <li
+            class="bp5-tree-node"
           >
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-        <li
-          className="bp5-tree-node"
-        >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <span
-              className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
-              onClick={[Function]}
+              class="bp5-tree-node-content bp5-tree-node-content-0"
             >
-              <svg
-                data-icon="chevron-right"
-                height={16}
-                role="img"
-                viewBox="0 0 16 16"
-                width={16}
+              <span
+                class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+              >
+                <svg
+                  data-icon="chevron-right"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <title>
+                    Expand group
+                  </title>
+                  <path
+                    d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                    fill-rule="evenodd"
+                    style="transform-origin: center;"
+                    transform="scale(0.05, -0.05) translate(-160, -160)"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp5-tree-node-label"
               >
-                <title>
-                  Expand group
-                </title>
-                <path
-                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
-                  fillRule="evenodd"
-                  style={
-                    {
-                      "transformOrigin": "center",
-                    }
-                  }
-                  transform="scale(0.05, -0.05) translate(-160, -160)"
-                />
-              </svg>
-            </span>
-            <span
-              className="bp5-tree-node-label"
+                1 Building Abstractions with Functions
+              </span>
+            </div>
+            <div
+              class="bp5-collapse"
             >
-              3 Modularity, Objects, and State
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+          <li
+            class="bp5-tree-node"
           >
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-        <li
-          className="bp5-tree-node"
-        >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <span
-              className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
-              onClick={[Function]}
+              class="bp5-tree-node-content bp5-tree-node-content-0"
             >
-              <svg
-                data-icon="chevron-right"
-                height={16}
-                role="img"
-                viewBox="0 0 16 16"
-                width={16}
+              <span
+                class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+              >
+                <svg
+                  data-icon="chevron-right"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <title>
+                    Expand group
+                  </title>
+                  <path
+                    d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                    fill-rule="evenodd"
+                    style="transform-origin: center;"
+                    transform="scale(0.05, -0.05) translate(-160, -160)"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp5-tree-node-label"
               >
-                <title>
-                  Expand group
-                </title>
-                <path
-                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
-                  fillRule="evenodd"
-                  style={
-                    {
-                      "transformOrigin": "center",
-                    }
-                  }
-                  transform="scale(0.05, -0.05) translate(-160, -160)"
-                />
-              </svg>
-            </span>
-            <span
-              className="bp5-tree-node-label"
+                2 Building Abstractions with Data
+              </span>
+            </div>
+            <div
+              class="bp5-collapse"
             >
-              4 Metalinguistic Abstraction
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+          <li
+            class="bp5-tree-node"
           >
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-        <li
-          className="bp5-tree-node"
-        >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <span
-              className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
-              onClick={[Function]}
+              class="bp5-tree-node-content bp5-tree-node-content-0"
             >
-              <svg
-                data-icon="chevron-right"
-                height={16}
-                role="img"
-                viewBox="0 0 16 16"
-                width={16}
+              <span
+                class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+              >
+                <svg
+                  data-icon="chevron-right"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <title>
+                    Expand group
+                  </title>
+                  <path
+                    d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                    fill-rule="evenodd"
+                    style="transform-origin: center;"
+                    transform="scale(0.05, -0.05) translate(-160, -160)"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp5-tree-node-label"
               >
-                <title>
-                  Expand group
-                </title>
-                <path
-                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
-                  fillRule="evenodd"
-                  style={
-                    {
-                      "transformOrigin": "center",
-                    }
-                  }
-                  transform="scale(0.05, -0.05) translate(-160, -160)"
-                />
-              </svg>
-            </span>
-            <span
-              className="bp5-tree-node-label"
+                3 Modularity, Objects, and State
+              </span>
+            </div>
+            <div
+              class="bp5-collapse"
             >
-              5 Computing with Register Machines
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+          <li
+            class="bp5-tree-node"
           >
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-        <li
-          className="bp5-tree-node"
-        >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-          >
-            <span
-              className="bp5-tree-node-caret-none"
-            />
-            <span
-              className="bp5-tree-node-label"
+              class="bp5-tree-node-content bp5-tree-node-content-0"
+            >
+              <span
+                class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+              >
+                <svg
+                  data-icon="chevron-right"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <title>
+                    Expand group
+                  </title>
+                  <path
+                    d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                    fill-rule="evenodd"
+                    style="transform-origin: center;"
+                    transform="scale(0.05, -0.05) translate(-160, -160)"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp5-tree-node-label"
+              >
+                4 Metalinguistic Abstraction
+              </span>
+            </div>
+            <div
+              class="bp5-collapse"
             >
-              References
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+          <li
+            class="bp5-tree-node"
           >
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-        <li
-          className="bp5-tree-node"
-        >
-          <div
-            className="bp5-tree-node-content bp5-tree-node-content-0"
-            onClick={[Function]}
-            onContextMenu={[Function]}
-            onDoubleClick={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
+              class="bp5-tree-node-content bp5-tree-node-content-0"
+            >
+              <span
+                class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+              >
+                <svg
+                  data-icon="chevron-right"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <title>
+                    Expand group
+                  </title>
+                  <path
+                    d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                    fill-rule="evenodd"
+                    style="transform-origin: center;"
+                    transform="scale(0.05, -0.05) translate(-160, -160)"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp5-tree-node-label"
+              >
+                5 Computing with Register Machines
+              </span>
+            </div>
+            <div
+              class="bp5-collapse"
+            >
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+          <li
+            class="bp5-tree-node"
           >
-            <span
-              className="bp5-tree-node-caret-none"
-            />
-            <span
-              className="bp5-tree-node-label"
+            <div
+              class="bp5-tree-node-content bp5-tree-node-content-0"
+            >
+              <span
+                class="bp5-tree-node-caret-none"
+              />
+              <span
+                class="bp5-tree-node-label"
+              >
+                References
+              </span>
+            </div>
+            <div
+              class="bp5-collapse"
             >
-              About the SICP JS Project
-            </span>
-          </div>
-          <div
-            className="bp5-collapse"
-            style={
-              {
-                "height": undefined,
-                "overflowY": undefined,
-                "transition": undefined,
-              }
-            }
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+          <li
+            class="bp5-tree-node"
           >
             <div
-              aria-hidden={true}
-              className="bp5-collapse-body"
-              style={
-                {
-                  "transform": "translateY(-undefinedpx)",
-                  "transition": undefined,
-                }
-              }
-            />
-          </div>
-        </li>
-      </ul>
-    </div>
-  </div>
-  <br />
-  <h2
-    className="bp5-heading"
-  >
-    Licenses
-  </h2>
-  <div
-    className="sicp-licenses"
-  >
-    <div>
-      <a
-        href="http://creativecommons.org/licenses/by-sa/4.0/"
-        rel="nofollow"
-      >
-        <img
-          alt="CC BY-SA 4.0"
-          src="https://licensebuttons.net/l/by-sa/4.0/88x31.png"
-        />
-      </a>
+              class="bp5-tree-node-content bp5-tree-node-content-0"
+            >
+              <span
+                class="bp5-tree-node-caret-none"
+              />
+              <span
+                class="bp5-tree-node-label"
+              >
+                About the SICP JS Project
+              </span>
+            </div>
+            <div
+              class="bp5-collapse"
+            >
+              <div
+                aria-hidden="true"
+                class="bp5-collapse-body"
+                style="transform: translateY(-undefinedpx);"
+              />
+            </div>
+          </li>
+        </ul>
+      </div>
     </div>
-    <div>
-      <p>
-        This work is licensed under a
-         
+    <br />
+    <h2
+      class="bp5-heading"
+    >
+      Licenses
+    </h2>
+    <div
+      class="sicp-licenses"
+    >
+      <div>
         <a
           href="http://creativecommons.org/licenses/by-sa/4.0/"
           rel="nofollow"
         >
-          Creative Commons Attribution-ShareAlike 4.0 International License
+          <img
+            alt="CC BY-SA 4.0"
+            src="https://licensebuttons.net/l/by-sa/4.0/88x31.png"
+          />
         </a>
-        .
-      </p>
-    </div>
-    <br />
-    <div>
-      <a
-        href="https://www.gnu.org/licenses/gpl-3.0.en.html"
-        rel="nofollow"
-      >
-        <img
-          alt="GPL 3"
-          data-canonical-src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/License_icon-gpl.svg/50px-License_icon-gpl.svg.png"
-          src="https://camo.githubusercontent.com/46d38fe6087a9b9bdf7e45458901b818765b8391/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f372f37392f4c6963656e73655f69636f6e2d67706c2e7376672f353070782d4c6963656e73655f69636f6e2d67706c2e7376672e706e67"
-        />
-      </a>
-    </div>
-    <div>
-      <p>
-        All JavaScript programs in this work are licensed under the
-         
+      </div>
+      <div>
+        <p>
+          This work is licensed under a 
+          <a
+            href="http://creativecommons.org/licenses/by-sa/4.0/"
+            rel="nofollow"
+          >
+            Creative Commons Attribution-ShareAlike 4.0 International License
+          </a>
+          .
+        </p>
+      </div>
+      <br />
+      <div>
         <a
           href="https://www.gnu.org/licenses/gpl-3.0.en.html"
           rel="nofollow"
         >
-          GNU General Public License Version 3
-        </a>
-        .
-      </p>
-    </div>
-    <br />
-    <div>
-      <a
-        href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
-        rel="nofollow"
-      >
-        <img
-          alt="CC BY-NC-SA 4.0"
-          src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png"
-        />
-      </a>
-    </div>
-    <div>
-      <p>
-        <a
-          href="https://mitpress.mit.edu/books/structure-and-interpretation-computer-programs-1"
-          rel="nofollow"
-        >
-          Print and Kindle versions of this work
-           
+          <img
+            alt="GPL 3"
+            data-canonical-src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/License_icon-gpl.svg/50px-License_icon-gpl.svg.png"
+            src="https://camo.githubusercontent.com/46d38fe6087a9b9bdf7e45458901b818765b8391/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f372f37392f4c6963656e73655f69636f6e2d67706c2e7376672f353070782d4c6963656e73655f69636f6e2d67706c2e7376672e706e67"
+          />
         </a>
-        are published by The MIT Press under a
-         
+      </div>
+      <div>
+        <p>
+          All JavaScript programs in this work are licensed under the 
+          <a
+            href="https://www.gnu.org/licenses/gpl-3.0.en.html"
+            rel="nofollow"
+          >
+            GNU General Public License Version 3
+          </a>
+          .
+        </p>
+      </div>
+      <br />
+      <div>
         <a
           href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
           rel="nofollow"
         >
-          Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
+          <img
+            alt="CC BY-NC-SA 4.0"
+            src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png"
+          />
         </a>
-        .
-      </p>
+      </div>
+      <div>
+        <p>
+          <a
+            href="https://mitpress.mit.edu/books/structure-and-interpretation-computer-programs-1"
+            rel="nofollow"
+          >
+            Print and Kindle versions of this work 
+          </a>
+          are published by The MIT Press under a 
+          <a
+            href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
+            rel="nofollow"
+          >
+            Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
+          </a>
+          .
+        </p>
+      </div>
+      <br />
     </div>
-    <br />
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpToc.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpToc.tsx.snap
index 90c9c26461..e64ae3273b 100644
--- a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpToc.tsx.snap
+++ b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpToc.tsx.snap
@@ -1,635 +1,408 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Sicp toc renders correctly 1`] = `
-<div
-  className="sicp-toc"
->
+<DocumentFragment>
   <div
-    className="bp5-tree sicp-toc-tree"
+    class="sicp-toc"
   >
-    <ul
-      className="bp5-tree-node-list bp5-tree-root"
+    <div
+      class="bp5-tree sicp-toc-tree"
     >
-      <li
-        className="bp5-tree-node"
+      <ul
+        class="bp5-tree-node-list bp5-tree-root"
       >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+        <li
+          class="bp5-tree-node"
         >
-          <span
-            className="bp5-tree-node-caret-none"
-          />
-          <span
-            className="bp5-tree-node-label"
+          <div
+            class="bp5-tree-node-content bp5-tree-node-content-0"
           >
-            Foreword
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
-        >
+            <span
+              class="bp5-tree-node-caret-none"
+            />
+            <span
+              class="bp5-tree-node-label"
+            >
+              Foreword
+            </span>
+          </div>
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-      <li
-        className="bp5-tree-node"
-      >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="bp5-tree-node-caret-none"
-          />
-          <span
-            className="bp5-tree-node-label"
+            class="bp5-collapse"
           >
-            Foreword to Structure and Interpretation of Computer Programs, 1984
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+        <li
+          class="bp5-tree-node"
         >
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-      <li
-        className="bp5-tree-node"
-      >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="bp5-tree-node-caret-none"
-          />
-          <span
-            className="bp5-tree-node-label"
+            class="bp5-tree-node-content bp5-tree-node-content-0"
           >
-            Preface
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
-        >
+            <span
+              class="bp5-tree-node-caret-none"
+            />
+            <span
+              class="bp5-tree-node-label"
+            >
+              Foreword to Structure and Interpretation of Computer Programs, 1984
+            </span>
+          </div>
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-      <li
-        className="bp5-tree-node"
-      >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="bp5-tree-node-caret-none"
-          />
-          <span
-            className="bp5-tree-node-label"
+            class="bp5-collapse"
           >
-            Prefaces to Structure and Interpretation of Computer Programs, 1996 & 1984
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+        <li
+          class="bp5-tree-node"
         >
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-      <li
-        className="bp5-tree-node"
-      >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="bp5-tree-node-caret-none"
-          />
-          <span
-            className="bp5-tree-node-label"
+            class="bp5-tree-node-content bp5-tree-node-content-0"
           >
-            Acknowledgments
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
-        >
+            <span
+              class="bp5-tree-node-caret-none"
+            />
+            <span
+              class="bp5-tree-node-label"
+            >
+              Preface
+            </span>
+          </div>
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-      <li
-        className="bp5-tree-node"
-      >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+            class="bp5-collapse"
+          >
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+        <li
+          class="bp5-tree-node"
         >
-          <span
-            className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
-            onClick={[Function]}
+          <div
+            class="bp5-tree-node-content bp5-tree-node-content-0"
           >
-            <svg
-              data-icon="chevron-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
+            <span
+              class="bp5-tree-node-caret-none"
+            />
+            <span
+              class="bp5-tree-node-label"
             >
-              <title>
-                Expand group
-              </title>
-              <path
-                d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
-                fillRule="evenodd"
-                style={
-                  {
-                    "transformOrigin": "center",
-                  }
-                }
-                transform="scale(0.05, -0.05) translate(-160, -160)"
-              />
-            </svg>
-          </span>
-          <span
-            className="bp5-tree-node-label"
+              Prefaces to Structure and Interpretation of Computer Programs, 1996 & 1984
+            </span>
+          </div>
+          <div
+            class="bp5-collapse"
           >
-            1 Building Abstractions with Functions
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+        <li
+          class="bp5-tree-node"
         >
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-      <li
-        className="bp5-tree-node"
-      >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
-            onClick={[Function]}
+            class="bp5-tree-node-content bp5-tree-node-content-0"
           >
-            <svg
-              data-icon="chevron-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
+            <span
+              class="bp5-tree-node-caret-none"
+            />
+            <span
+              class="bp5-tree-node-label"
             >
-              <title>
-                Expand group
-              </title>
-              <path
-                d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
-                fillRule="evenodd"
-                style={
-                  {
-                    "transformOrigin": "center",
-                  }
-                }
-                transform="scale(0.05, -0.05) translate(-160, -160)"
-              />
-            </svg>
-          </span>
-          <span
-            className="bp5-tree-node-label"
+              Acknowledgments
+            </span>
+          </div>
+          <div
+            class="bp5-collapse"
           >
-            2 Building Abstractions with Data
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+        <li
+          class="bp5-tree-node"
         >
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-      <li
-        className="bp5-tree-node"
-      >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
-            onClick={[Function]}
+            class="bp5-tree-node-content bp5-tree-node-content-0"
           >
-            <svg
-              data-icon="chevron-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
+            <span
+              class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
             >
-              <title>
-                Expand group
-              </title>
-              <path
-                d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
-                fillRule="evenodd"
-                style={
-                  {
-                    "transformOrigin": "center",
-                  }
-                }
-                transform="scale(0.05, -0.05) translate(-160, -160)"
-              />
-            </svg>
-          </span>
-          <span
-            className="bp5-tree-node-label"
+              <svg
+                data-icon="chevron-right"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <title>
+                  Expand group
+                </title>
+                <path
+                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                  fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
+                />
+              </svg>
+            </span>
+            <span
+              class="bp5-tree-node-label"
+            >
+              1 Building Abstractions with Functions
+            </span>
+          </div>
+          <div
+            class="bp5-collapse"
           >
-            3 Modularity, Objects, and State
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+        <li
+          class="bp5-tree-node"
         >
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-      <li
-        className="bp5-tree-node"
-      >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
-            onClick={[Function]}
+            class="bp5-tree-node-content bp5-tree-node-content-0"
           >
-            <svg
-              data-icon="chevron-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
+            <span
+              class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+            >
+              <svg
+                data-icon="chevron-right"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <title>
+                  Expand group
+                </title>
+                <path
+                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                  fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
+                />
+              </svg>
+            </span>
+            <span
+              class="bp5-tree-node-label"
             >
-              <title>
-                Expand group
-              </title>
-              <path
-                d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
-                fillRule="evenodd"
-                style={
-                  {
-                    "transformOrigin": "center",
-                  }
-                }
-                transform="scale(0.05, -0.05) translate(-160, -160)"
-              />
-            </svg>
-          </span>
-          <span
-            className="bp5-tree-node-label"
+              2 Building Abstractions with Data
+            </span>
+          </div>
+          <div
+            class="bp5-collapse"
           >
-            4 Metalinguistic Abstraction
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+        <li
+          class="bp5-tree-node"
         >
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-      <li
-        className="bp5-tree-node"
-      >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
-            onClick={[Function]}
+            class="bp5-tree-node-content bp5-tree-node-content-0"
           >
-            <svg
-              data-icon="chevron-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
+            <span
+              class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+            >
+              <svg
+                data-icon="chevron-right"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <title>
+                  Expand group
+                </title>
+                <path
+                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                  fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
+                />
+              </svg>
+            </span>
+            <span
+              class="bp5-tree-node-label"
             >
-              <title>
-                Expand group
-              </title>
-              <path
-                d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
-                fillRule="evenodd"
-                style={
-                  {
-                    "transformOrigin": "center",
-                  }
-                }
-                transform="scale(0.05, -0.05) translate(-160, -160)"
-              />
-            </svg>
-          </span>
-          <span
-            className="bp5-tree-node-label"
+              3 Modularity, Objects, and State
+            </span>
+          </div>
+          <div
+            class="bp5-collapse"
           >
-            5 Computing with Register Machines
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+        <li
+          class="bp5-tree-node"
         >
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-      <li
-        className="bp5-tree-node"
-      >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <span
-            className="bp5-tree-node-caret-none"
-          />
-          <span
-            className="bp5-tree-node-label"
+            class="bp5-tree-node-content bp5-tree-node-content-0"
           >
-            References
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
+            <span
+              class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+            >
+              <svg
+                data-icon="chevron-right"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <title>
+                  Expand group
+                </title>
+                <path
+                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                  fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
+                />
+              </svg>
+            </span>
+            <span
+              class="bp5-tree-node-label"
+            >
+              4 Metalinguistic Abstraction
+            </span>
+          </div>
+          <div
+            class="bp5-collapse"
+          >
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+        <li
+          class="bp5-tree-node"
         >
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-      <li
-        className="bp5-tree-node"
-      >
-        <div
-          className="bp5-tree-node-content bp5-tree-node-content-0"
-          onClick={[Function]}
-          onContextMenu={[Function]}
-          onDoubleClick={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+            class="bp5-tree-node-content bp5-tree-node-content-0"
+          >
+            <span
+              class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+            >
+              <svg
+                data-icon="chevron-right"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <title>
+                  Expand group
+                </title>
+                <path
+                  d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                  fill-rule="evenodd"
+                  style="transform-origin: center;"
+                  transform="scale(0.05, -0.05) translate(-160, -160)"
+                />
+              </svg>
+            </span>
+            <span
+              class="bp5-tree-node-label"
+            >
+              5 Computing with Register Machines
+            </span>
+          </div>
+          <div
+            class="bp5-collapse"
+          >
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+        <li
+          class="bp5-tree-node"
         >
-          <span
-            className="bp5-tree-node-caret-none"
-          />
-          <span
-            className="bp5-tree-node-label"
+          <div
+            class="bp5-tree-node-content bp5-tree-node-content-0"
           >
-            About the SICP JS Project
-          </span>
-        </div>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
+            <span
+              class="bp5-tree-node-caret-none"
+            />
+            <span
+              class="bp5-tree-node-label"
+            >
+              References
+            </span>
+          </div>
+          <div
+            class="bp5-collapse"
+          >
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+        <li
+          class="bp5-tree-node"
         >
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
-        </div>
-      </li>
-    </ul>
+            class="bp5-tree-node-content bp5-tree-node-content-0"
+          >
+            <span
+              class="bp5-tree-node-caret-none"
+            />
+            <span
+              class="bp5-tree-node-label"
+            >
+              About the SICP JS Project
+            </span>
+          </div>
+          <div
+            class="bp5-collapse"
+          >
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;

From 210060c9149e5588a6424f3980b7a6ffff964c7a Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 01:31:38 +0800
Subject: [PATCH 12/16] Update more snapshots

---
 .../__snapshots__/Assessment.tsx.snap         | 2490 ++++++++---------
 .../__tests__/__snapshots__/Dropdown.tsx.snap |   96 +-
 .../SideContentContestVoting.tsx.snap         |  380 +--
 .../SideContentCseMachine.tsx.snap            |  842 +++---
 .../__snapshots__/Playground.tsx.snap         |    8 -
 5 files changed, 1742 insertions(+), 2074 deletions(-)

diff --git a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
index 7f453e8c1b..ea908d8029 100644
--- a/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
+++ b/src/commons/assessment/__tests__/__snapshots__/Assessment.tsx.snap
@@ -1,1692 +1,1558 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Assessment page "loading" content renders correctly 1`] = `
-<div
-  className="Assessment"
->
+<DocumentFragment>
   <div
-    className="ContentDisplay row center-xs"
+    class="Assessment"
   >
     <div
-      className="col-md-10 col-xs-11 contentdisplay-content-parent"
+      class="ContentDisplay row center-xs"
     >
       <div
-        className="contentdisplay-content bp5-card bp5-elevation-3"
+        class="col-md-10 col-xs-11 contentdisplay-content-parent"
       >
         <div
-          className="bp5-non-ideal-state bp5-non-ideal-state-vertical"
+          class="contentdisplay-content bp5-card bp5-elevation-3"
         >
           <div
-            className="bp5-non-ideal-state-visual"
-            style={
-              {
-                "fontSize": "48px",
-                "lineHeight": "48px",
-              }
-            }
+            class="bp5-non-ideal-state bp5-non-ideal-state-vertical"
           >
             <div
-              aria-label="loading"
-              aria-valuemax={100}
-              aria-valuemin={0}
-              className="bp5-spinner"
-              role="progressbar"
+              class="bp5-non-ideal-state-visual"
+              style="font-size: 48px; line-height: 48px;"
             >
               <div
-                className="bp5-spinner-animation"
+                aria-label="loading"
+                aria-valuemax="100"
+                aria-valuemin="0"
+                class="bp5-spinner"
+                role="progressbar"
               >
-                <svg
-                  height={50}
-                  strokeWidth="8.00"
-                  viewBox="1.00 1.00 98.00 98.00"
-                  width={50}
+                <div
+                  class="bp5-spinner-animation"
                 >
-                  <path
-                    className="bp5-spinner-track"
-                    d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
-                  />
-                  <path
-                    className="bp5-spinner-head"
-                    d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
-                    pathLength={280}
-                    strokeDasharray="280 280"
-                    strokeDashoffset={210}
-                  />
-                </svg>
+                  <svg
+                    height="50"
+                    stroke-width="8.00"
+                    viewBox="1.00 1.00 98.00 98.00"
+                    width="50"
+                  >
+                    <path
+                      class="bp5-spinner-track"
+                      d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
+                    />
+                    <path
+                      class="bp5-spinner-head"
+                      d="M 50,50 m 0,-45 a 45,45 0 1 1 0,90 a 45,45 0 1 1 0,-90"
+                      pathLength="280"
+                      stroke-dasharray="280 280"
+                      stroke-dashoffset="210"
+                    />
+                  </svg>
+                </div>
               </div>
             </div>
-          </div>
-          <div
-            className="bp5-non-ideal-state-text"
-          >
-            <div>
-              Fetching assessment...
+            <div
+              class="bp5-non-ideal-state-text"
+            >
+              <div>
+                Fetching assessment...
+              </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Assessment page does not show attempt Button for upcoming assessments for student user 1`] = `
-<div
-  className="Assessment"
->
+<DocumentFragment>
   <div
-    className="ContentDisplay row center-xs"
+    class="Assessment"
   >
     <div
-      className="col-md-10 col-xs-11 contentdisplay-content-parent"
+      class="ContentDisplay row center-xs"
     >
       <div
-        className="contentdisplay-content bp5-card bp5-elevation-3"
+        class="col-md-10 col-xs-11 contentdisplay-content-parent"
       >
-        <button
-          className="bp5-button bp5-minimal collapse-button"
-          disabled={false}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
+        <div
+          class="contentdisplay-content bp5-card bp5-elevation-3"
         >
-          <span
-            aria-hidden={true}
-            className="bp5-icon bp5-icon-caret-down"
+          <button
+            class="bp5-button bp5-minimal collapse-button"
           >
-            <svg
-              data-icon="caret-down"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
+            <span
+              aria-hidden="true"
+              class="bp5-icon bp5-icon-caret-down"
             >
-              <path
-                d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
-          <span
-            className="bp5-button-text"
-          >
-            Upcoming
-          </span>
-        </button>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": "auto",
-              "overflowY": "visible",
-              "transition": "none",
-            }
-          }
-        >
+              <svg
+                data-icon="caret-down"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+            <span
+              class="bp5-button-text"
+            >
+              Upcoming
+            </span>
+          </button>
           <div
-            aria-hidden={false}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(0)",
-                "transition": "none",
-              }
-            }
+            class="bp5-collapse"
+            style="height: auto; overflow-y: visible; transition: none;"
           >
-            <div>
-              <div
-                className="row listing bp5-card bp5-elevation-1"
-              >
-                <div
-                  className="listing-picture col-xs-3"
-                >
-                  <img
-                    alt="Assessment"
-                    className="cover-image-not_attempted"
-                    src="https://fakeimg.pl/300/"
-                  />
-                </div>
+            <div
+              aria-hidden="false"
+              class="bp5-collapse-body"
+              style="transform: translateY(0); transition: none;"
+            >
+              <div>
                 <div
-                  className="listing-text col-xs-9"
+                  class="row listing bp5-card bp5-elevation-1"
                 >
                   <div
-                    className="listing-header"
+                    class="listing-picture col-xs-3"
+                  >
+                    <img
+                      alt="Assessment"
+                      class="cover-image-not_attempted"
+                      src="https://fakeimg.pl/300/"
+                    />
+                  </div>
+                  <div
+                    class="listing-text col-xs-9"
                   >
                     <div
-                      className="bp5-text-overflow-ellipsis"
+                      class="listing-header"
                     >
-                      <h4
-                        className="bp5-heading listing-title"
+                      <div
+                        class="bp5-text-overflow-ellipsis"
                       >
-                        An Odessey to Runes (Duplicate)
-                      </h4>
-                    </div>
-                    <div
-                      className="listing-button"
-                    >
-                      <span
-                        className="bp5-popover-target"
-                        onBlur={[Function]}
-                        onContextMenu={[Function]}
-                        onFocus={[Function]}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
+                        <h4
+                          class="bp5-heading listing-title"
+                        >
+                          An Odessey to Runes (Duplicate)
+                        </h4>
+                      </div>
+                      <div
+                        class="listing-button"
                       >
-                        <button
-                          className="bp5-button bp5-disabled bp5-minimal"
-                          disabled={true}
-                          onBlur={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          tabIndex={-1}
-                          type="button"
+                        <span
+                          class="bp5-popover-target"
                         >
-                          <span
-                            aria-hidden={true}
-                            className="bp5-icon bp5-icon-confirm"
+                          <button
+                            class="bp5-button bp5-disabled bp5-minimal"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
                           >
-                            <svg
-                              data-icon="confirm"
-                              height={16}
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width={16}
+                            <span
+                              aria-hidden="true"
+                              class="bp5-icon bp5-icon-confirm"
                             >
-                              <path
-                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                                fillRule="evenodd"
-                              />
-                            </svg>
-                          </span>
-                          <span
-                            className="bp5-button-text"
-                          >
-                            <span>
-                              Finalize
+                              <svg
+                                data-icon="confirm"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                              >
+                                <path
+                                  d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
                             </span>
                             <span
-                              className="custom-hidden-xxs"
+                              class="bp5-button-text"
                             >
-                               Submission
+                              <span>
+                                Finalize
+                              </span>
+                              <span
+                                class="custom-hidden-xxs"
+                              >
+                                 Submission
+                              </span>
                             </span>
-                          </span>
-                        </button>
-                      </span>
+                          </button>
+                        </span>
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    className="listing-xp"
-                  >
-                    <h6
-                      className="bp5-heading"
+                    <div
+                      class="listing-xp"
                     >
-                      Max XP: 1000
-                    </h6>
-                  </div>
-                  <div
-                    className="listing-description"
-                  >
+                      <h6
+                        class="bp5-heading"
+                      >
+                        Max XP: 1000
+                      </h6>
+                    </div>
                     <div
-                      className="md bp5-running-text"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<p>This is a test for the UI of the unopened assessment overview. It links to the mock Mission 0</p>",
-                        }
-                      }
-                    />
-                  </div>
-                  <div>
-                    <h6
-                      className="bp5-heading"
+                      class="listing-description"
                     >
-                       This is an individual assessment. 
-                    </h6>
-                  </div>
-                  <div
-                    className="listing-footer"
-                  >
-                    <div>
                       <div
-                        className="listing-due-date"
+                        class="md bp5-running-text"
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-calendar listing-due-icon"
-                        >
-                          <svg
-                            data-icon="calendar"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        Opens: 18th June, 13:24
+                        <p>
+                          This is a test for the UI of the unopened assessment overview. It links to the mock Mission 0
+                        </p>
                       </div>
                     </div>
-                    <div
-                      className="listing-button"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <button
-          className="bp5-button bp5-minimal collapse-button"
-          disabled={false}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-        >
-          <span
-            aria-hidden={true}
-            className="bp5-icon bp5-icon-caret-down"
-          >
-            <svg
-              data-icon="caret-down"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
-          <span
-            className="bp5-button-text"
-          >
-            Open
-          </span>
-        </button>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": "auto",
-              "overflowY": "visible",
-              "transition": "none",
-            }
-          }
-        >
-          <div
-            aria-hidden={false}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(0)",
-                "transition": "none",
-              }
-            }
-          >
-            <div>
-              <div
-                className="row listing bp5-card bp5-elevation-1"
-              >
-                <div
-                  className="listing-picture col-xs-3"
-                >
-                  <img
-                    alt="Assessment"
-                    className="cover-image-attempting"
-                    src="https://fakeimg.pl/350x200/?text=World&font=lobster"
-                  />
-                </div>
-                <div
-                  className="listing-text col-xs-9"
-                >
-                  <div
-                    className="listing-header"
-                  >
-                    <div
-                      className="bp5-text-overflow-ellipsis"
-                    >
-                      <h4
-                        className="bp5-heading listing-title"
+                    <div>
+                      <h6
+                        class="bp5-heading"
                       >
-                        The Secret to Streams
-                      </h4>
+                         This is an individual assessment. 
+                      </h6>
                     </div>
                     <div
-                      className="listing-button"
+                      class="listing-footer"
                     >
-                      <span
-                        className="bp5-popover-target"
-                        onBlur={[Function]}
-                        onContextMenu={[Function]}
-                        onFocus={[Function]}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                      >
-                        <button
-                          className="bp5-button bp5-disabled bp5-minimal"
-                          disabled={true}
-                          onBlur={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          tabIndex={-1}
-                          type="button"
+                      <div>
+                        <div
+                          class="listing-due-date"
                         >
                           <span
-                            aria-hidden={true}
-                            className="bp5-icon bp5-icon-confirm"
+                            aria-hidden="true"
+                            class="bp5-icon bp5-icon-calendar listing-due-icon"
                           >
                             <svg
-                              data-icon="confirm"
-                              height={16}
+                              data-icon="calendar"
+                              height="12"
                               role="img"
                               viewBox="0 0 16 16"
-                              width={16}
+                              width="12"
                             >
                               <path
-                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                                fillRule="evenodd"
+                                d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </span>
-                          <span
-                            className="bp5-button-text"
-                          >
-                            <span>
-                              Finalize
-                            </span>
-                            <span
-                              className="custom-hidden-xxs"
-                            >
-                               Submission
-                            </span>
-                          </span>
-                        </button>
-                      </span>
+                          Opens: 18th June, 13:24
+                        </div>
+                      </div>
+                      <div
+                        class="listing-button"
+                      />
                     </div>
                   </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <button
+            class="bp5-button bp5-minimal collapse-button"
+          >
+            <span
+              aria-hidden="true"
+              class="bp5-icon bp5-icon-caret-down"
+            >
+              <svg
+                data-icon="caret-down"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+            <span
+              class="bp5-button-text"
+            >
+              Open
+            </span>
+          </button>
+          <div
+            class="bp5-collapse"
+            style="height: auto; overflow-y: visible; transition: none;"
+          >
+            <div
+              aria-hidden="false"
+              class="bp5-collapse-body"
+              style="transform: translateY(0); transition: none;"
+            >
+              <div>
+                <div
+                  class="row listing bp5-card bp5-elevation-1"
+                >
                   <div
-                    className="listing-xp"
+                    class="listing-picture col-xs-3"
                   >
-                    <h6
-                      className="bp5-heading"
-                    >
-                      Max XP: 1000
-                    </h6>
+                    <img
+                      alt="Assessment"
+                      class="cover-image-attempting"
+                      src="https://fakeimg.pl/350x200/?text=World&font=lobster"
+                    />
                   </div>
                   <div
-                    className="listing-description"
+                    class="listing-text col-xs-9"
                   >
                     <div
-                      className="md bp5-running-text"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<p>Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum.</p>",
-                        }
-                      }
-                    />
-                  </div>
-                  <div>
-                    <h6
-                      className="bp5-heading"
+                      class="listing-header"
                     >
-                       This is an individual assessment. 
-                    </h6>
-                  </div>
-                  <div
-                    className="listing-footer"
-                  >
-                    <div>
                       <div
-                        className="listing-due-date"
+                        class="bp5-text-overflow-ellipsis"
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-calendar listing-due-icon"
+                        <h4
+                          class="bp5-heading listing-title"
                         >
-                          <svg
-                            data-icon="calendar"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        Opened: 18th July, 13:24
+                          The Secret to Streams
+                        </h4>
                       </div>
                       <div
-                        className="listing-due-date"
+                        class="listing-button"
                       >
                         <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-time listing-due-icon"
+                          class="bp5-popover-target"
                         >
-                          <svg
-                            data-icon="time"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
+                          <button
+                            class="bp5-button bp5-disabled bp5-minimal"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
                           >
-                            <path
-                              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
+                            <span
+                              aria-hidden="true"
+                              class="bp5-icon bp5-icon-confirm"
+                            >
+                              <svg
+                                data-icon="confirm"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                              >
+                                <path
+                                  d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
+                            </span>
+                            <span
+                              class="bp5-button-text"
+                            >
+                              <span>
+                                Finalize
+                              </span>
+                              <span
+                                class="custom-hidden-xxs"
+                              >
+                                 Submission
+                              </span>
+                            </span>
+                          </button>
                         </span>
-                        Due: 18th June, 13:24
                       </div>
                     </div>
                     <div
-                      className="listing-button"
+                      class="listing-xp"
+                    >
+                      <h6
+                        class="bp5-heading"
+                      >
+                        Max XP: 1000
+                      </h6>
+                    </div>
+                    <div
+                      class="listing-description"
                     >
-                      <a
-                        className=""
-                        data-discover="true"
-                        href="/courses/undefined/missions/3/0"
-                        onClick={[Function]}
+                      <div
+                        class="md bp5-running-text"
                       >
-                        <button
-                          className="bp5-button bp5-minimal"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          type="button"
+                        <p>
+                          Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum.
+                        </p>
+                      </div>
+                    </div>
+                    <div>
+                      <h6
+                        class="bp5-heading"
+                      >
+                         This is an individual assessment. 
+                      </h6>
+                    </div>
+                    <div
+                      class="listing-footer"
+                    >
+                      <div>
+                        <div
+                          class="listing-due-date"
                         >
                           <span
-                            aria-hidden={true}
-                            className="bp5-icon bp5-icon-play"
+                            aria-hidden="true"
+                            class="bp5-icon bp5-icon-calendar listing-due-icon"
                           >
                             <svg
-                              data-icon="play"
-                              height={16}
+                              data-icon="calendar"
+                              height="12"
                               role="img"
                               viewBox="0 0 16 16"
-                              width={16}
+                              width="12"
                             >
                               <path
-                                d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 005 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z"
-                                fillRule="evenodd"
+                                d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </span>
-                          <span
-                            className="bp5-button-text"
-                          >
-                            <span
-                              data-testid="Assessment-Attempt-Button"
-                            >
-                              Continue
-                            </span>
-                            <span
-                              className="custom-hidden-xxxs"
-                            >
-                               Attempt
-                            </span>
-                          </span>
-                        </button>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div>
-              <div
-                className="row listing bp5-card bp5-elevation-1"
-              >
-                <div
-                  className="listing-picture col-xs-3"
-                >
-                  <img
-                    alt="Assessment"
-                    className="cover-image-attempted"
-                    src="https://fakeimg.pl/300/"
-                  />
-                </div>
-                <div
-                  className="listing-text col-xs-9"
-                >
-                  <div
-                    className="listing-header"
-                  >
-                    <div
-                      className="bp5-text-overflow-ellipsis"
-                    >
-                      <h4
-                        className="bp5-heading listing-title"
-                      >
-                        An Odessey to Runes
-                      </h4>
-                    </div>
-                    <div
-                      className="listing-button"
-                    >
-                      <span
-                        className="bp5-popover-target"
-                        onBlur={[Function]}
-                        onContextMenu={[Function]}
-                        onFocus={[Function]}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                      >
-                        <button
-                          className="bp5-button bp5-intent-danger bp5-minimal"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          type="button"
+                          Opened: 18th July, 13:24
+                        </div>
+                        <div
+                          class="listing-due-date"
                         >
                           <span
-                            aria-hidden={true}
-                            className="bp5-icon bp5-icon-confirm"
+                            aria-hidden="true"
+                            class="bp5-icon bp5-icon-time listing-due-icon"
                           >
                             <svg
-                              data-icon="confirm"
-                              height={16}
+                              data-icon="time"
+                              height="12"
                               role="img"
                               viewBox="0 0 16 16"
-                              width={16}
+                              width="12"
                             >
                               <path
-                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                                fillRule="evenodd"
+                                d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </span>
-                          <span
-                            className="bp5-button-text"
+                          Due: 18th June, 13:24
+                        </div>
+                      </div>
+                      <div
+                        class="listing-button"
+                      >
+                        <a
+                          class=""
+                          data-discover="true"
+                          href="/courses/undefined/missions/3/0"
+                        >
+                          <button
+                            class="bp5-button bp5-minimal"
+                            type="button"
                           >
-                            <span>
-                              Finalize
+                            <span
+                              aria-hidden="true"
+                              class="bp5-icon bp5-icon-play"
+                            >
+                              <svg
+                                data-icon="play"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                              >
+                                <path
+                                  d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 005 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
                             </span>
                             <span
-                              className="custom-hidden-xxs"
+                              class="bp5-button-text"
                             >
-                               Submission
+                              <span
+                                data-testid="Assessment-Attempt-Button"
+                              >
+                                Continue
+                              </span>
+                              <span
+                                class="custom-hidden-xxxs"
+                              >
+                                 Attempt
+                              </span>
                             </span>
-                          </span>
-                        </button>
-                      </span>
+                          </button>
+                        </a>
+                      </div>
                     </div>
                   </div>
+                </div>
+              </div>
+              <div>
+                <div
+                  class="row listing bp5-card bp5-elevation-1"
+                >
                   <div
-                    className="listing-xp"
-                  >
-                    <h6
-                      className="bp5-heading"
-                    >
-                      Max XP: 1000
-                    </h6>
-                  </div>
-                  <div
-                    className="listing-description"
+                    class="listing-picture col-xs-3"
                   >
-                    <div
-                      className="md bp5-running-text"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<p><em>Lorem ipsum</em> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-  incididunt ut labore et dolore magna aliqua.</p>
-<pre><code>  const a = 5;
-</code></pre>
-<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-  <em>doloremque laudantium</em>, totam rem aperiam, eaque ipsa quae ab illo inventore
-  <a href="google.com">veritatis et quasi architecto</a> beatae vitae dicta sunt
-  <code>explicabo</code>.</p>",
-                        }
-                      }
+                    <img
+                      alt="Assessment"
+                      class="cover-image-attempted"
+                      src="https://fakeimg.pl/300/"
                     />
                   </div>
                   <div
-                    className="listing-team_information"
+                    class="listing-text col-xs-9"
                   >
-                    <h6
-                      className="bp5-heading"
+                    <div
+                      class="listing-header"
                     >
-                       This is a team assessment. 
-                    </h6>
-                  </div>
-                  <div
-                    className="listing-footer"
-                  >
-                    <div>
                       <div
-                        className="listing-due-date"
+                        class="bp5-text-overflow-ellipsis"
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-calendar listing-due-icon"
+                        <h4
+                          class="bp5-heading listing-title"
                         >
-                          <svg
-                            data-icon="calendar"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        Opened: 18th June, 13:24
+                          An Odessey to Runes
+                        </h4>
                       </div>
                       <div
-                        className="listing-due-date"
+                        class="listing-button"
                       >
                         <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-time listing-due-icon"
+                          class="bp5-popover-target"
                         >
-                          <svg
-                            data-icon="time"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
+                          <button
+                            class="bp5-button bp5-intent-danger bp5-minimal"
+                            type="button"
                           >
-                            <path
-                              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
+                            <span
+                              aria-hidden="true"
+                              class="bp5-icon bp5-icon-confirm"
+                            >
+                              <svg
+                                data-icon="confirm"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                              >
+                                <path
+                                  d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
+                            </span>
+                            <span
+                              class="bp5-button-text"
+                            >
+                              <span>
+                                Finalize
+                              </span>
+                              <span
+                                class="custom-hidden-xxs"
+                              >
+                                 Submission
+                              </span>
+                            </span>
+                          </button>
                         </span>
-                        Due: 18th June, 13:24
                       </div>
                     </div>
                     <div
-                      className="listing-button"
+                      class="listing-xp"
+                    >
+                      <h6
+                        class="bp5-heading"
+                      >
+                        Max XP: 1000
+                      </h6>
+                    </div>
+                    <div
+                      class="listing-description"
+                    >
+                      <div
+                        class="md bp5-running-text"
+                      >
+                        <p>
+                          <em>
+                            Lorem ipsum
+                          </em>
+                           dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.
+                        </p>
+                        
+
+                        <pre>
+                          <code>
+                              const a = 5;
+
+                          </code>
+                        </pre>
+                        
+
+                        <p>
+                          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+  
+                          <em>
+                            doloremque laudantium
+                          </em>
+                          , totam rem aperiam, eaque ipsa quae ab illo inventore
+  
+                          <a
+                            href="google.com"
+                          >
+                            veritatis et quasi architecto
+                          </a>
+                           beatae vitae dicta sunt
+  
+                          <code>
+                            explicabo
+                          </code>
+                          .
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="listing-team_information"
                     >
-                      <a
-                        className=""
-                        data-discover="true"
-                        href="/courses/undefined/missions/2/0"
-                        onClick={[Function]}
+                      <h6
+                        class="bp5-heading"
                       >
-                        <button
-                          className="bp5-button bp5-minimal"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          type="button"
+                         This is a team assessment. 
+                      </h6>
+                    </div>
+                    <div
+                      class="listing-footer"
+                    >
+                      <div>
+                        <div
+                          class="listing-due-date"
                         >
                           <span
-                            aria-hidden={true}
-                            className="bp5-icon bp5-icon-edit"
+                            aria-hidden="true"
+                            class="bp5-icon bp5-icon-calendar listing-due-icon"
                           >
                             <svg
-                              data-icon="edit"
-                              height={16}
+                              data-icon="calendar"
+                              height="12"
                               role="img"
                               viewBox="0 0 16 16"
-                              width={16}
+                              width="12"
                             >
                               <path
-                                d="M3.25 10.26l2.47 2.47 6.69-6.69-2.46-2.48-6.7 6.7zM.99 14.99l3.86-1.39-2.46-2.44-1.4 3.83zm12.25-14c-.48 0-.92.2-1.24.51l-1.44 1.44 2.47 2.47 1.44-1.44c.32-.32.51-.75.51-1.24.01-.95-.77-1.74-1.74-1.74z"
-                                fillRule="evenodd"
+                                d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </span>
+                          Opened: 18th June, 13:24
+                        </div>
+                        <div
+                          class="listing-due-date"
+                        >
                           <span
-                            className="bp5-button-text"
+                            aria-hidden="true"
+                            class="bp5-icon bp5-icon-time listing-due-icon"
+                          >
+                            <svg
+                              data-icon="time"
+                              height="12"
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width="12"
+                            >
+                              <path
+                                d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </span>
+                          Due: 18th June, 13:24
+                        </div>
+                      </div>
+                      <div
+                        class="listing-button"
+                      >
+                        <a
+                          class=""
+                          data-discover="true"
+                          href="/courses/undefined/missions/2/0"
+                        >
+                          <button
+                            class="bp5-button bp5-minimal"
+                            type="button"
                           >
                             <span
-                              data-testid="Assessment-Attempt-Button"
+                              aria-hidden="true"
+                              class="bp5-icon bp5-icon-edit"
                             >
-                              Review
+                              <svg
+                                data-icon="edit"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                              >
+                                <path
+                                  d="M3.25 10.26l2.47 2.47 6.69-6.69-2.46-2.48-6.7 6.7zM.99 14.99l3.86-1.39-2.46-2.44-1.4 3.83zm12.25-14c-.48 0-.92.2-1.24.51l-1.44 1.44 2.47 2.47 1.44-1.44c.32-.32.51-.75.51-1.24.01-.95-.77-1.74-1.74-1.74z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
                             </span>
                             <span
-                              className="custom-hidden-xxxs"
+                              class="bp5-button-text"
                             >
-                               Attempt
+                              <span
+                                data-testid="Assessment-Attempt-Button"
+                              >
+                                Review
+                              </span>
+                              <span
+                                class="custom-hidden-xxxs"
+                              >
+                                 Attempt
+                              </span>
                             </span>
-                          </span>
-                        </button>
-                      </a>
+                          </button>
+                        </a>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <button
-          className="bp5-button bp5-minimal collapse-button"
-          disabled={false}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-        >
-          <span
-            aria-hidden={true}
-            className="bp5-icon bp5-icon-caret-right"
+          <button
+            class="bp5-button bp5-minimal collapse-button"
           >
-            <svg
-              data-icon="caret-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
+            <span
+              aria-hidden="true"
+              class="bp5-icon bp5-icon-caret-right"
             >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
-          <span
-            className="bp5-button-text"
-          >
-            Closed
-          </span>
-        </button>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
-        >
+              <svg
+                data-icon="caret-right"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+            <span
+              class="bp5-button-text"
+            >
+              Closed
+            </span>
+          </button>
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
+            class="bp5-collapse"
+          >
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Assessment page with 0 missions renders correctly 1`] = `
-<div
-  className="Assessment"
->
+<DocumentFragment>
   <div
-    className="ContentDisplay row center-xs"
+    class="Assessment"
   >
     <div
-      className="col-md-10 col-xs-11 contentdisplay-content-parent"
+      class="ContentDisplay row center-xs"
     >
       <div
-        className="contentdisplay-content bp5-card bp5-elevation-3"
+        class="col-md-10 col-xs-11 contentdisplay-content-parent"
       >
         <div
-          className="bp5-non-ideal-state bp5-non-ideal-state-vertical"
+          class="contentdisplay-content bp5-card bp5-elevation-3"
         >
           <div
-            className="bp5-non-ideal-state-visual"
-            style={
-              {
-                "fontSize": "48px",
-                "lineHeight": "48px",
-              }
-            }
+            class="bp5-non-ideal-state bp5-non-ideal-state-vertical"
           >
-            <span
-              aria-hidden={true}
-              className="bp5-icon bp5-icon-flame bp5-icon-muted"
-              tabIndex={-1}
+            <div
+              class="bp5-non-ideal-state-visual"
+              style="font-size: 48px; line-height: 48px;"
             >
-              <svg
-                data-icon="flame"
-                height={48}
-                role="img"
-                viewBox="0 0 20 20"
-                width={48}
+              <span
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-flame bp5-icon-muted"
+                tabindex="-1"
               >
-                <path
-                  d="M11.622 0c0 1.71.49 3.077 1.472 4.103C16.364 6.496 18 9.23 18 12.308c0 3.418-1.962 5.983-5.887 7.692 2.887-3 2.453-4.23-.49-8C8.5 13.5 9 14.5 9.5 16.5c-1.048 0-2 0-2.5-.5 0 .684 1.197 2.5 1.952 4-3.924-1.026-8.123-7.18-6.651-7.692.981-.342 2.126-.171 3.434.513C4.1 6.667 6.062 2.393 11.622 0z"
-                  fillRule="evenodd"
-                />
-              </svg>
-            </span>
-          </div>
-          <div
-            className="bp5-non-ideal-state-text"
-          >
-            <h4
-              className="bp5-heading"
+                <svg
+                  data-icon="flame"
+                  height="48"
+                  role="img"
+                  viewBox="0 0 20 20"
+                  width="48"
+                >
+                  <path
+                    d="M11.622 0c0 1.71.49 3.077 1.472 4.103C16.364 6.496 18 9.23 18 12.308c0 3.418-1.962 5.983-5.887 7.692 2.887-3 2.453-4.23-.49-8C8.5 13.5 9 14.5 9.5 16.5c-1.048 0-2 0-2.5-.5 0 .684 1.197 2.5 1.952 4-3.924-1.026-8.123-7.18-6.651-7.692.981-.342 2.126-.171 3.434.513C4.1 6.667 6.062 2.393 11.622 0z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </div>
+            <div
+              class="bp5-non-ideal-state-text"
             >
-              There are no assessments.
-            </h4>
+              <h4
+                class="bp5-heading"
+              >
+                There are no assessments.
+              </h4>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Assessment page with multiple loaded missions renders correctly 1`] = `
-<div
-  className="Assessment"
->
+<DocumentFragment>
   <div
-    className="ContentDisplay row center-xs"
+    class="Assessment"
   >
     <div
-      className="col-md-10 col-xs-11 contentdisplay-content-parent"
+      class="ContentDisplay row center-xs"
     >
       <div
-        className="contentdisplay-content bp5-card bp5-elevation-3"
+        class="col-md-10 col-xs-11 contentdisplay-content-parent"
       >
-        <button
-          className="bp5-button bp5-minimal collapse-button"
-          disabled={false}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-        >
-          <span
-            aria-hidden={true}
-            className="bp5-icon bp5-icon-caret-down"
-          >
-            <svg
-              data-icon="caret-down"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
-          <span
-            className="bp5-button-text"
-          >
-            Upcoming
-          </span>
-        </button>
         <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": "auto",
-              "overflowY": "visible",
-              "transition": "none",
-            }
-          }
+          class="contentdisplay-content bp5-card bp5-elevation-3"
         >
-          <div
-            aria-hidden={false}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(0)",
-                "transition": "none",
-              }
-            }
+          <button
+            class="bp5-button bp5-minimal collapse-button"
           >
-            <div>
-              <div
-                className="row listing bp5-card bp5-elevation-1"
+            <span
+              aria-hidden="true"
+              class="bp5-icon bp5-icon-caret-down"
+            >
+              <svg
+                data-icon="caret-down"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
               >
+                <path
+                  d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+            <span
+              class="bp5-button-text"
+            >
+              Upcoming
+            </span>
+          </button>
+          <div
+            class="bp5-collapse"
+            style="height: auto; overflow-y: visible; transition: none;"
+          >
+            <div
+              aria-hidden="false"
+              class="bp5-collapse-body"
+              style="transform: translateY(0); transition: none;"
+            >
+              <div>
                 <div
-                  className="listing-picture col-xs-3"
-                >
-                  <img
-                    alt="Assessment"
-                    className="cover-image-not_attempted"
-                    src="https://fakeimg.pl/300/"
-                  />
-                </div>
-                <div
-                  className="listing-text col-xs-9"
+                  class="row listing bp5-card bp5-elevation-1"
                 >
                   <div
-                    className="listing-header"
+                    class="listing-picture col-xs-3"
+                  >
+                    <img
+                      alt="Assessment"
+                      class="cover-image-not_attempted"
+                      src="https://fakeimg.pl/300/"
+                    />
+                  </div>
+                  <div
+                    class="listing-text col-xs-9"
                   >
                     <div
-                      className="bp5-text-overflow-ellipsis"
+                      class="listing-header"
                     >
-                      <h4
-                        className="bp5-heading listing-title"
+                      <div
+                        class="bp5-text-overflow-ellipsis"
                       >
-                        An Odessey to Runes (Duplicate)
-                      </h4>
-                    </div>
-                    <div
-                      className="listing-button"
-                    >
-                      <span
-                        className="bp5-popover-target"
-                        onBlur={[Function]}
-                        onContextMenu={[Function]}
-                        onFocus={[Function]}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
+                        <h4
+                          class="bp5-heading listing-title"
+                        >
+                          An Odessey to Runes (Duplicate)
+                        </h4>
+                      </div>
+                      <div
+                        class="listing-button"
                       >
-                        <button
-                          className="bp5-button bp5-disabled bp5-minimal"
-                          disabled={true}
-                          onBlur={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          tabIndex={-1}
-                          type="button"
+                        <span
+                          class="bp5-popover-target"
                         >
-                          <span
-                            aria-hidden={true}
-                            className="bp5-icon bp5-icon-confirm"
+                          <button
+                            class="bp5-button bp5-disabled bp5-minimal"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
                           >
-                            <svg
-                              data-icon="confirm"
-                              height={16}
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width={16}
+                            <span
+                              aria-hidden="true"
+                              class="bp5-icon bp5-icon-confirm"
                             >
-                              <path
-                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                                fillRule="evenodd"
-                              />
-                            </svg>
-                          </span>
-                          <span
-                            className="bp5-button-text"
-                          >
-                            <span>
-                              Finalize
+                              <svg
+                                data-icon="confirm"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                              >
+                                <path
+                                  d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
                             </span>
                             <span
-                              className="custom-hidden-xxs"
+                              class="bp5-button-text"
                             >
-                               Submission
+                              <span>
+                                Finalize
+                              </span>
+                              <span
+                                class="custom-hidden-xxs"
+                              >
+                                 Submission
+                              </span>
                             </span>
-                          </span>
-                        </button>
-                      </span>
+                          </button>
+                        </span>
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    className="listing-xp"
-                  >
-                    <h6
-                      className="bp5-heading"
+                    <div
+                      class="listing-xp"
                     >
-                      Max XP: 1000
-                    </h6>
-                  </div>
-                  <div
-                    className="listing-description"
-                  >
+                      <h6
+                        class="bp5-heading"
+                      >
+                        Max XP: 1000
+                      </h6>
+                    </div>
                     <div
-                      className="md bp5-running-text"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<p>This is a test for the UI of the unopened assessment overview. It links to the mock Mission 0</p>",
-                        }
-                      }
-                    />
-                  </div>
-                  <div>
-                    <h6
-                      className="bp5-heading"
+                      class="listing-description"
                     >
-                       This is an individual assessment. 
-                    </h6>
-                  </div>
-                  <div
-                    className="listing-footer"
-                  >
-                    <div>
                       <div
-                        className="listing-due-date"
+                        class="md bp5-running-text"
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-calendar listing-due-icon"
-                        >
-                          <svg
-                            data-icon="calendar"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        Opens: 18th June, 13:24
+                        <p>
+                          This is a test for the UI of the unopened assessment overview. It links to the mock Mission 0
+                        </p>
                       </div>
                     </div>
+                    <div>
+                      <h6
+                        class="bp5-heading"
+                      >
+                         This is an individual assessment. 
+                      </h6>
+                    </div>
                     <div
-                      className="listing-button"
+                      class="listing-footer"
                     >
-                      <a
-                        className=""
-                        data-discover="true"
-                        href="/courses/undefined/missions/1/0"
-                        onClick={[Function]}
-                      >
-                        <button
-                          className="bp5-button bp5-minimal"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          type="button"
+                      <div>
+                        <div
+                          class="listing-due-date"
                         >
                           <span
-                            aria-hidden={true}
-                            className="bp5-icon bp5-icon-play"
+                            aria-hidden="true"
+                            class="bp5-icon bp5-icon-calendar listing-due-icon"
                           >
                             <svg
-                              data-icon="play"
-                              height={16}
+                              data-icon="calendar"
+                              height="12"
                               role="img"
                               viewBox="0 0 16 16"
-                              width={16}
+                              width="12"
                             >
                               <path
-                                d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 005 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z"
-                                fillRule="evenodd"
+                                d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </span>
-                          <span
-                            className="bp5-button-text"
+                          Opens: 18th June, 13:24
+                        </div>
+                      </div>
+                      <div
+                        class="listing-button"
+                      >
+                        <a
+                          class=""
+                          data-discover="true"
+                          href="/courses/undefined/missions/1/0"
+                        >
+                          <button
+                            class="bp5-button bp5-minimal"
+                            type="button"
                           >
                             <span
-                              data-testid="Assessment-Attempt-Button"
+                              aria-hidden="true"
+                              class="bp5-icon bp5-icon-play"
                             >
-                              Attempt
+                              <svg
+                                data-icon="play"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                              >
+                                <path
+                                  d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 005 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
                             </span>
                             <span
-                              className="custom-hidden-xxxs"
-                            />
-                          </span>
-                        </button>
-                      </a>
+                              class="bp5-button-text"
+                            >
+                              <span
+                                data-testid="Assessment-Attempt-Button"
+                              >
+                                Attempt
+                              </span>
+                              <span
+                                class="custom-hidden-xxxs"
+                              />
+                            </span>
+                          </button>
+                        </a>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <button
-          className="bp5-button bp5-minimal collapse-button"
-          disabled={false}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-        >
-          <span
-            aria-hidden={true}
-            className="bp5-icon bp5-icon-caret-down"
+          <button
+            class="bp5-button bp5-minimal collapse-button"
           >
-            <svg
-              data-icon="caret-down"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
+            <span
+              aria-hidden="true"
+              class="bp5-icon bp5-icon-caret-down"
             >
-              <path
-                d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
-          <span
-            className="bp5-button-text"
-          >
-            Open
-          </span>
-        </button>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": "auto",
-              "overflowY": "visible",
-              "transition": "none",
-            }
-          }
-        >
+              <svg
+                data-icon="caret-down"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+            <span
+              class="bp5-button-text"
+            >
+              Open
+            </span>
+          </button>
           <div
-            aria-hidden={false}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(0)",
-                "transition": "none",
-              }
-            }
+            class="bp5-collapse"
+            style="height: auto; overflow-y: visible; transition: none;"
           >
-            <div>
-              <div
-                className="row listing bp5-card bp5-elevation-1"
-              >
-                <div
-                  className="listing-picture col-xs-3"
-                >
-                  <img
-                    alt="Assessment"
-                    className="cover-image-attempting"
-                    src="https://fakeimg.pl/350x200/?text=World&font=lobster"
-                  />
-                </div>
+            <div
+              aria-hidden="false"
+              class="bp5-collapse-body"
+              style="transform: translateY(0); transition: none;"
+            >
+              <div>
                 <div
-                  className="listing-text col-xs-9"
+                  class="row listing bp5-card bp5-elevation-1"
                 >
                   <div
-                    className="listing-header"
+                    class="listing-picture col-xs-3"
+                  >
+                    <img
+                      alt="Assessment"
+                      class="cover-image-attempting"
+                      src="https://fakeimg.pl/350x200/?text=World&font=lobster"
+                    />
+                  </div>
+                  <div
+                    class="listing-text col-xs-9"
                   >
                     <div
-                      className="bp5-text-overflow-ellipsis"
+                      class="listing-header"
                     >
-                      <h4
-                        className="bp5-heading listing-title"
+                      <div
+                        class="bp5-text-overflow-ellipsis"
                       >
-                        The Secret to Streams
-                      </h4>
-                    </div>
-                    <div
-                      className="listing-button"
-                    >
-                      <span
-                        className="bp5-popover-target"
-                        onBlur={[Function]}
-                        onContextMenu={[Function]}
-                        onFocus={[Function]}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
+                        <h4
+                          class="bp5-heading listing-title"
+                        >
+                          The Secret to Streams
+                        </h4>
+                      </div>
+                      <div
+                        class="listing-button"
                       >
-                        <button
-                          className="bp5-button bp5-disabled bp5-minimal"
-                          disabled={true}
-                          onBlur={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          tabIndex={-1}
-                          type="button"
+                        <span
+                          class="bp5-popover-target"
                         >
-                          <span
-                            aria-hidden={true}
-                            className="bp5-icon bp5-icon-confirm"
+                          <button
+                            class="bp5-button bp5-disabled bp5-minimal"
+                            disabled=""
+                            tabindex="-1"
+                            type="button"
                           >
-                            <svg
-                              data-icon="confirm"
-                              height={16}
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width={16}
+                            <span
+                              aria-hidden="true"
+                              class="bp5-icon bp5-icon-confirm"
                             >
-                              <path
-                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                                fillRule="evenodd"
-                              />
-                            </svg>
-                          </span>
-                          <span
-                            className="bp5-button-text"
-                          >
-                            <span>
-                              Finalize
+                              <svg
+                                data-icon="confirm"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                              >
+                                <path
+                                  d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
                             </span>
                             <span
-                              className="custom-hidden-xxs"
+                              class="bp5-button-text"
                             >
-                               Submission
+                              <span>
+                                Finalize
+                              </span>
+                              <span
+                                class="custom-hidden-xxs"
+                              >
+                                 Submission
+                              </span>
                             </span>
-                          </span>
-                        </button>
-                      </span>
+                          </button>
+                        </span>
+                      </div>
                     </div>
-                  </div>
-                  <div
-                    className="listing-xp"
-                  >
-                    <h6
-                      className="bp5-heading"
+                    <div
+                      class="listing-xp"
                     >
-                      Max XP: 1000
-                    </h6>
-                  </div>
-                  <div
-                    className="listing-description"
-                  >
+                      <h6
+                        class="bp5-heading"
+                      >
+                        Max XP: 1000
+                      </h6>
+                    </div>
                     <div
-                      className="md bp5-running-text"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<p>Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum.</p>",
-                        }
-                      }
-                    />
-                  </div>
-                  <div>
-                    <h6
-                      className="bp5-heading"
+                      class="listing-description"
                     >
-                       This is an individual assessment. 
-                    </h6>
-                  </div>
-                  <div
-                    className="listing-footer"
-                  >
-                    <div>
                       <div
-                        className="listing-due-date"
+                        class="md bp5-running-text"
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-calendar listing-due-icon"
-                        >
-                          <svg
-                            data-icon="calendar"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        Opened: 18th July, 13:24
+                        <p>
+                          Once upon a time, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec vulputate sapien. Fusce vel lacus fermentum, efficitur ipsum.
+                        </p>
                       </div>
-                      <div
-                        className="listing-due-date"
+                    </div>
+                    <div>
+                      <h6
+                        class="bp5-heading"
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-time listing-due-icon"
-                        >
-                          <svg
-                            data-icon="time"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        Due: 18th June, 13:24
-                      </div>
+                         This is an individual assessment. 
+                      </h6>
                     </div>
                     <div
-                      className="listing-button"
+                      class="listing-footer"
                     >
-                      <a
-                        className=""
-                        data-discover="true"
-                        href="/courses/undefined/missions/3/0"
-                        onClick={[Function]}
-                      >
-                        <button
-                          className="bp5-button bp5-minimal"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          type="button"
+                      <div>
+                        <div
+                          class="listing-due-date"
                         >
                           <span
-                            aria-hidden={true}
-                            className="bp5-icon bp5-icon-play"
+                            aria-hidden="true"
+                            class="bp5-icon bp5-icon-calendar listing-due-icon"
                           >
                             <svg
-                              data-icon="play"
-                              height={16}
+                              data-icon="calendar"
+                              height="12"
                               role="img"
                               viewBox="0 0 16 16"
-                              width={16}
+                              width="12"
                             >
                               <path
-                                d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 005 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z"
-                                fillRule="evenodd"
+                                d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </span>
-                          <span
-                            className="bp5-button-text"
-                          >
-                            <span
-                              data-testid="Assessment-Attempt-Button"
-                            >
-                              Continue
-                            </span>
-                            <span
-                              className="custom-hidden-xxxs"
-                            >
-                               Attempt
-                            </span>
-                          </span>
-                        </button>
-                      </a>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div>
-              <div
-                className="row listing bp5-card bp5-elevation-1"
-              >
-                <div
-                  className="listing-picture col-xs-3"
-                >
-                  <img
-                    alt="Assessment"
-                    className="cover-image-attempted"
-                    src="https://fakeimg.pl/300/"
-                  />
-                </div>
-                <div
-                  className="listing-text col-xs-9"
-                >
-                  <div
-                    className="listing-header"
-                  >
-                    <div
-                      className="bp5-text-overflow-ellipsis"
-                    >
-                      <h4
-                        className="bp5-heading listing-title"
-                      >
-                        An Odessey to Runes
-                      </h4>
-                    </div>
-                    <div
-                      className="listing-button"
-                    >
-                      <span
-                        className="bp5-popover-target"
-                        onBlur={[Function]}
-                        onContextMenu={[Function]}
-                        onFocus={[Function]}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                      >
-                        <button
-                          className="bp5-button bp5-intent-danger bp5-minimal"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          type="button"
+                          Opened: 18th July, 13:24
+                        </div>
+                        <div
+                          class="listing-due-date"
                         >
                           <span
-                            aria-hidden={true}
-                            className="bp5-icon bp5-icon-confirm"
+                            aria-hidden="true"
+                            class="bp5-icon bp5-icon-time listing-due-icon"
                           >
                             <svg
-                              data-icon="confirm"
-                              height={16}
+                              data-icon="time"
+                              height="12"
                               role="img"
                               viewBox="0 0 16 16"
-                              width={16}
+                              width="12"
                             >
                               <path
-                                d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
-                                fillRule="evenodd"
+                                d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </span>
-                          <span
-                            className="bp5-button-text"
+                          Due: 18th June, 13:24
+                        </div>
+                      </div>
+                      <div
+                        class="listing-button"
+                      >
+                        <a
+                          class=""
+                          data-discover="true"
+                          href="/courses/undefined/missions/3/0"
+                        >
+                          <button
+                            class="bp5-button bp5-minimal"
+                            type="button"
                           >
-                            <span>
-                              Finalize
+                            <span
+                              aria-hidden="true"
+                              class="bp5-icon bp5-icon-play"
+                            >
+                              <svg
+                                data-icon="play"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                              >
+                                <path
+                                  d="M12 8c0-.35-.19-.64-.46-.82l.01-.02-6-4-.01.02A.969.969 0 005 3c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1 .21 0 .39-.08.54-.18l.01.02 6-4-.01-.02c.27-.18.46-.47.46-.82z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
                             </span>
                             <span
-                              className="custom-hidden-xxs"
+                              class="bp5-button-text"
                             >
-                               Submission
+                              <span
+                                data-testid="Assessment-Attempt-Button"
+                              >
+                                Continue
+                              </span>
+                              <span
+                                class="custom-hidden-xxxs"
+                              >
+                                 Attempt
+                              </span>
                             </span>
-                          </span>
-                        </button>
-                      </span>
+                          </button>
+                        </a>
+                      </div>
                     </div>
                   </div>
+                </div>
+              </div>
+              <div>
+                <div
+                  class="row listing bp5-card bp5-elevation-1"
+                >
                   <div
-                    className="listing-xp"
-                  >
-                    <h6
-                      className="bp5-heading"
-                    >
-                      Max XP: 1000
-                    </h6>
-                  </div>
-                  <div
-                    className="listing-description"
+                    class="listing-picture col-xs-3"
                   >
-                    <div
-                      className="md bp5-running-text"
-                      dangerouslySetInnerHTML={
-                        {
-                          "__html": "<p><em>Lorem ipsum</em> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-  incididunt ut labore et dolore magna aliqua.</p>
-<pre><code>  const a = 5;
-</code></pre>
-<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-  <em>doloremque laudantium</em>, totam rem aperiam, eaque ipsa quae ab illo inventore
-  <a href="google.com">veritatis et quasi architecto</a> beatae vitae dicta sunt
-  <code>explicabo</code>.</p>",
-                        }
-                      }
+                    <img
+                      alt="Assessment"
+                      class="cover-image-attempted"
+                      src="https://fakeimg.pl/300/"
                     />
                   </div>
                   <div
-                    className="listing-team_information"
+                    class="listing-text col-xs-9"
                   >
-                    <h6
-                      className="bp5-heading"
+                    <div
+                      class="listing-header"
                     >
-                       This is a team assessment. 
-                    </h6>
-                  </div>
-                  <div
-                    className="listing-footer"
-                  >
-                    <div>
                       <div
-                        className="listing-due-date"
+                        class="bp5-text-overflow-ellipsis"
                       >
-                        <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-calendar listing-due-icon"
+                        <h4
+                          class="bp5-heading listing-title"
                         >
-                          <svg
-                            data-icon="calendar"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
-                          >
-                            <path
-                              d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
-                        </span>
-                        Opened: 18th June, 13:24
+                          An Odessey to Runes
+                        </h4>
                       </div>
                       <div
-                        className="listing-due-date"
+                        class="listing-button"
                       >
                         <span
-                          aria-hidden={true}
-                          className="bp5-icon bp5-icon-time listing-due-icon"
+                          class="bp5-popover-target"
                         >
-                          <svg
-                            data-icon="time"
-                            height={12}
-                            role="img"
-                            viewBox="0 0 16 16"
-                            width={12}
+                          <button
+                            class="bp5-button bp5-intent-danger bp5-minimal"
+                            type="button"
                           >
-                            <path
-                              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
-                              fillRule="evenodd"
-                            />
-                          </svg>
+                            <span
+                              aria-hidden="true"
+                              class="bp5-icon bp5-icon-confirm"
+                            >
+                              <svg
+                                data-icon="confirm"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                              >
+                                <path
+                                  d="M8.7 4.29a.965.965 0 00-.71-.3 1.003 1.003 0 00-.71 1.71l2 2c.18.18.43.29.71.29s.53-.11.71-.29l5-5a1.003 1.003 0 00-1.42-1.42l-4.29 4.3L8.7 4.29zm5.22 3.01c.03.23.07.45.07.69 0 3.31-2.69 6-6 6s-6-2.69-6-6 2.69-6 6-6c.81 0 1.59.17 2.3.46l1.5-1.5A7.998 7.998 0 00-.01 7.99c0 4.42 3.58 8 8 8s8-3.58 8-8c0-.83-.13-1.64-.36-2.39l-1.71 1.7z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
+                            </span>
+                            <span
+                              class="bp5-button-text"
+                            >
+                              <span>
+                                Finalize
+                              </span>
+                              <span
+                                class="custom-hidden-xxs"
+                              >
+                                 Submission
+                              </span>
+                            </span>
+                          </button>
                         </span>
-                        Due: 18th June, 13:24
                       </div>
                     </div>
                     <div
-                      className="listing-button"
+                      class="listing-xp"
+                    >
+                      <h6
+                        class="bp5-heading"
+                      >
+                        Max XP: 1000
+                      </h6>
+                    </div>
+                    <div
+                      class="listing-description"
+                    >
+                      <div
+                        class="md bp5-running-text"
+                      >
+                        <p>
+                          <em>
+                            Lorem ipsum
+                          </em>
+                           dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+  incididunt ut labore et dolore magna aliqua.
+                        </p>
+                        
+
+                        <pre>
+                          <code>
+                              const a = 5;
+
+                          </code>
+                        </pre>
+                        
+
+                        <p>
+                          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
+  
+                          <em>
+                            doloremque laudantium
+                          </em>
+                          , totam rem aperiam, eaque ipsa quae ab illo inventore
+  
+                          <a
+                            href="google.com"
+                          >
+                            veritatis et quasi architecto
+                          </a>
+                           beatae vitae dicta sunt
+  
+                          <code>
+                            explicabo
+                          </code>
+                          .
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="listing-team_information"
                     >
-                      <a
-                        className=""
-                        data-discover="true"
-                        href="/courses/undefined/missions/2/0"
-                        onClick={[Function]}
+                      <h6
+                        class="bp5-heading"
                       >
-                        <button
-                          className="bp5-button bp5-minimal"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onKeyDown={[Function]}
-                          onKeyUp={[Function]}
-                          type="button"
+                         This is a team assessment. 
+                      </h6>
+                    </div>
+                    <div
+                      class="listing-footer"
+                    >
+                      <div>
+                        <div
+                          class="listing-due-date"
                         >
                           <span
-                            aria-hidden={true}
-                            className="bp5-icon bp5-icon-edit"
+                            aria-hidden="true"
+                            class="bp5-icon bp5-icon-calendar listing-due-icon"
                           >
                             <svg
-                              data-icon="edit"
-                              height={16}
+                              data-icon="calendar"
+                              height="12"
                               role="img"
                               viewBox="0 0 16 16"
-                              width={16}
+                              width="12"
                             >
                               <path
-                                d="M3.25 10.26l2.47 2.47 6.69-6.69-2.46-2.48-6.7 6.7zM.99 14.99l3.86-1.39-2.46-2.44-1.4 3.83zm12.25-14c-.48 0-.92.2-1.24.51l-1.44 1.44 2.47 2.47 1.44-1.44c.32-.32.51-.75.51-1.24.01-.95-.77-1.74-1.74-1.74z"
-                                fillRule="evenodd"
+                                d="M11 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1s-1 .4-1 1v1c0 .5.4 1 1 1zm3-2h-1v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H6v1c0 1.1-.9 2-2 2s-2-.9-2-2V1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h13c.6 0 1-.4 1-1V2c0-.6-.5-1-1-1zM5 13H2v-3h3v3zm0-4H2V6h3v3zm4 4H6v-3h3v3zm0-4H6V6h3v3zm4 4h-3v-3h3v3zm0-4h-3V6h3v3zM4 3c.6 0 1-.5 1-1V1c0-.6-.4-1-1-1S3 .4 3 1v1c0 .5.4 1 1 1z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </span>
+                          Opened: 18th June, 13:24
+                        </div>
+                        <div
+                          class="listing-due-date"
+                        >
                           <span
-                            className="bp5-button-text"
+                            aria-hidden="true"
+                            class="bp5-icon bp5-icon-time listing-due-icon"
+                          >
+                            <svg
+                              data-icon="time"
+                              height="12"
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width="12"
+                            >
+                              <path
+                                d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
+                                fill-rule="evenodd"
+                              />
+                            </svg>
+                          </span>
+                          Due: 18th June, 13:24
+                        </div>
+                      </div>
+                      <div
+                        class="listing-button"
+                      >
+                        <a
+                          class=""
+                          data-discover="true"
+                          href="/courses/undefined/missions/2/0"
+                        >
+                          <button
+                            class="bp5-button bp5-minimal"
+                            type="button"
                           >
                             <span
-                              data-testid="Assessment-Attempt-Button"
+                              aria-hidden="true"
+                              class="bp5-icon bp5-icon-edit"
                             >
-                              Review
+                              <svg
+                                data-icon="edit"
+                                height="16"
+                                role="img"
+                                viewBox="0 0 16 16"
+                                width="16"
+                              >
+                                <path
+                                  d="M3.25 10.26l2.47 2.47 6.69-6.69-2.46-2.48-6.7 6.7zM.99 14.99l3.86-1.39-2.46-2.44-1.4 3.83zm12.25-14c-.48 0-.92.2-1.24.51l-1.44 1.44 2.47 2.47 1.44-1.44c.32-.32.51-.75.51-1.24.01-.95-.77-1.74-1.74-1.74z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
                             </span>
                             <span
-                              className="custom-hidden-xxxs"
+                              class="bp5-button-text"
                             >
-                               Attempt
+                              <span
+                                data-testid="Assessment-Attempt-Button"
+                              >
+                                Review
+                              </span>
+                              <span
+                                class="custom-hidden-xxxs"
+                              >
+                                 Attempt
+                              </span>
                             </span>
-                          </span>
-                        </button>
-                      </a>
+                          </button>
+                        </a>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <button
-          className="bp5-button bp5-minimal collapse-button"
-          disabled={false}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-        >
-          <span
-            aria-hidden={true}
-            className="bp5-icon bp5-icon-caret-right"
+          <button
+            class="bp5-button bp5-minimal collapse-button"
           >
-            <svg
-              data-icon="caret-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
+            <span
+              aria-hidden="true"
+              class="bp5-icon bp5-icon-caret-right"
             >
-              <path
-                d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
-          <span
-            className="bp5-button-text"
-          >
-            Closed
-          </span>
-        </button>
-        <div
-          className="bp5-collapse"
-          style={
-            {
-              "height": undefined,
-              "overflowY": undefined,
-              "transition": undefined,
-            }
-          }
-        >
+              <svg
+                data-icon="caret-right"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
+              >
+                <path
+                  d="M11 8c0-.15-.07-.28-.17-.37l-4-3.5A.495.495 0 006 4.5v7a.495.495 0 00.83.37l4-3.5c.1-.09.17-.22.17-.37z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+            <span
+              class="bp5-button-text"
+            >
+              Closed
+            </span>
+          </button>
           <div
-            aria-hidden={true}
-            className="bp5-collapse-body"
-            style={
-              {
-                "transform": "translateY(-undefinedpx)",
-                "transition": undefined,
-              }
-            }
-          />
+            class="bp5-collapse"
+          >
+            <div
+              aria-hidden="true"
+              class="bp5-collapse-body"
+              style="transform: translateY(-undefinedpx);"
+            />
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap b/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap
index bbe96b5fc2..8330a6969e 100644
--- a/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap
+++ b/src/commons/dropdown/__tests__/__snapshots__/Dropdown.tsx.snap
@@ -1,57 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dropdown correctly mounts Profile, DropdownCourses, and DropdownCreateCourses components when a user is logged in 1`] = `
-<span
-  className="bp5-popover-target"
-  onClick={[Function]}
-  onKeyDown={[Function]}
->
-  <button
-    className="bp5-button bp5-minimal"
-    disabled={false}
-    onBlur={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
+<DocumentFragment>
+  <span
+    class="bp5-popover-target"
   >
-    <span
-      aria-hidden={true}
-      className="bp5-icon bp5-icon-caret-down"
+    <button
+      class="bp5-button bp5-minimal"
     >
-      <svg
-        data-icon="caret-down"
-        height={16}
-        role="img"
-        viewBox="0 0 16 16"
-        width={16}
+      <span
+        aria-hidden="true"
+        class="bp5-icon bp5-icon-caret-down"
       >
-        <path
-          d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
-  </button>
-</span>
+        <svg
+          data-icon="caret-down"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </span>
+</DocumentFragment>
 `;
 
 exports[`Dropdown does not mount Profile, DropdownCourses and DropdownCreateCourses components when a user is not logged in 1`] = `
-<span
-  className="bp5-popover-target"
-  onClick={[Function]}
-  onKeyDown={[Function]}
->
-  <button
-    className="bp5-button bp5-minimal"
-    disabled={false}
-    onBlur={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
+<DocumentFragment>
+  <span
+    class="bp5-popover-target"
   >
-    <span
-      aria-hidden={true}
-      className="bp5-icon bp5-icon-standard bp5-icon-caret-down"
-      data-icon="caret-down"
-    />
-  </button>
-</span>
+    <button
+      class="bp5-button bp5-minimal"
+    >
+      <span
+        aria-hidden="true"
+        class="bp5-icon bp5-icon-caret-down"
+      >
+        <svg
+          data-icon="caret-down"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </button>
+  </span>
+</DocumentFragment>
 `;
diff --git a/src/commons/sideContent/__tests__/__snapshots__/SideContentContestVoting.tsx.snap b/src/commons/sideContent/__tests__/__snapshots__/SideContentContestVoting.tsx.snap
index bbc846099c..0c8cb0b26f 100644
--- a/src/commons/sideContent/__tests__/__snapshots__/SideContentContestVoting.tsx.snap
+++ b/src/commons/sideContent/__tests__/__snapshots__/SideContentContestVoting.tsx.snap
@@ -1,272 +1,200 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SideContentContestVotingContainer matches snapshot 1`] = `
-<div
-  className="ContestEntryVoting"
->
-  <button
-    className="bp5-button bp5-minimal collapse-button"
-    disabled={false}
-    onBlur={[Function]}
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    type="button"
+<DocumentFragment>
+  <div
+    class="ContestEntryVoting"
   >
-    <span
-      aria-hidden={true}
-      className="bp5-icon bp5-icon-caret-down"
+    <button
+      class="bp5-button bp5-minimal collapse-button"
+      type="button"
     >
-      <svg
-        data-icon="caret-down"
-        height={16}
-        role="img"
-        viewBox="0 0 16 16"
-        width={16}
+      <span
+        aria-hidden="true"
+        class="bp5-icon bp5-icon-caret-down"
       >
-        <path
-          d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
-    <span
-      className="bp5-button-text"
-    >
-      <span>
-        Contest Voting
+        <svg
+          data-icon="caret-down"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
+            fill-rule="evenodd"
+          />
+        </svg>
       </span>
       <span
-        className="bp5-popover-target"
-        onBlur={[Function]}
-        onContextMenu={[Function]}
-        onFocus={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+        class="bp5-button-text"
       >
+        <span>
+          Contest Voting
+        </span>
         <span
-          aria-hidden={true}
-          className="bp5-icon bp5-icon-help"
-          tabIndex={0}
+          class="bp5-popover-target"
         >
-          <svg
-            data-icon="help"
-            height={16}
-            role="img"
-            viewBox="0 0 16 16"
-            width={16}
+          <span
+            aria-hidden="true"
+            class="bp5-icon bp5-icon-help"
+            tabindex="0"
           >
-            <path
-              d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm1.93-6.52c-.14.32-.35.64-.62.97L9.25 8.83c-.12.15-.24.29-.28.42-.04.13-.09.3-.09.52V10H7.12V8.88s.05-.51.21-.71L8.4 6.73c.22-.26.35-.49.44-.68.09-.19.12-.38.12-.58 0-.3-.1-.55-.28-.75-.18-.19-.44-.28-.76-.28-.33 0-.59.1-.78.29-.19.19-.33.46-.4.81-.03.11-.1.15-.2.14l-1.7-.25c-.12-.01-.16-.08-.14-.19.12-.82.46-1.47 1.03-1.94.57-.48 1.32-.72 2.25-.72.47 0 .9.07 1.29.22s.72.34 1 .59c.28.25.49.55.65.89.15.35.22.72.22 1.12s-.07.75-.21 1.08z"
-              fillRule="evenodd"
-            />
-          </svg>
+            <svg
+              data-icon="help"
+              height="16"
+              role="img"
+              viewBox="0 0 16 16"
+              width="16"
+            >
+              <path
+                d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm1 13H7v-2h2v2zm1.93-6.52c-.14.32-.35.64-.62.97L9.25 8.83c-.12.15-.24.29-.28.42-.04.13-.09.3-.09.52V10H7.12V8.88s.05-.51.21-.71L8.4 6.73c.22-.26.35-.49.44-.68.09-.19.12-.38.12-.58 0-.3-.1-.55-.28-.75-.18-.19-.44-.28-.76-.28-.33 0-.59.1-.78.29-.19.19-.33.46-.4.81-.03.11-.1.15-.2.14l-1.7-.25c-.12-.01-.16-.08-.14-.19.12-.82.46-1.47 1.03-1.94.57-.48 1.32-.72 2.25-.72.47 0 .9.07 1.29.22s.72.34 1 .59c.28.25.49.55.65.89.15.35.22.72.22 1.12s-.07.75-.21 1.08z"
+                fill-rule="evenodd"
+              />
+            </svg>
+          </span>
         </span>
       </span>
-    </span>
-  </button>
-  <div
-    className="bp5-collapse"
-    style={
-      {
-        "height": "auto",
-        "overflowY": "visible",
-        "transition": "none",
-      }
-    }
-  >
+    </button>
     <div
-      aria-hidden={false}
-      className="bp5-collapse-body"
-      style={
-        {
-          "transform": "translateY(0)",
-          "transition": "none",
-        }
-      }
+      class="bp5-collapse"
+      style="height: auto; overflow-y: visible; transition: none;"
     >
       <div
-        className="tier-list"
+        aria-hidden="false"
+        class="bp5-collapse-body"
+        style="transform: translateY(0); transition: none;"
       >
         <div
-          className="tier"
-          data-testid="tier"
-          id="tier-s"
+          class="tier-list"
         >
-          <h2
-            style={
-              {
-                "backgroundColor": "rgb(255, 127, 127)",
-              }
-            }
-          >
-            S
-          </h2>
           <div
-            className="item-container"
-            onDragEnter={[Function]}
-            onDragLeave={[Function]}
-            onDragOver={[Function]}
-            onDrop={[Function]}
-          />
-        </div>
-        <div
-          className="tier"
-          data-testid="tier"
-          id="tier-a"
-        >
-          <h2
-            style={
-              {
-                "backgroundColor": "rgb(255, 223, 127)",
-              }
-            }
+            class="tier"
+            data-testid="tier"
+            id="tier-s"
           >
-            A
-          </h2>
+            <h2
+              style="background-color: rgb(255, 127, 127);"
+            >
+              S
+            </h2>
+            <div
+              class="item-container"
+            />
+          </div>
           <div
-            className="item-container"
-            onDragEnter={[Function]}
-            onDragLeave={[Function]}
-            onDragOver={[Function]}
-            onDrop={[Function]}
-          />
-        </div>
-        <div
-          className="tier"
-          data-testid="tier"
-          id="tier-b"
-        >
-          <h2
-            style={
-              {
-                "backgroundColor": "rgb(255, 255, 127)",
-              }
-            }
+            class="tier"
+            data-testid="tier"
+            id="tier-a"
           >
-            B
-          </h2>
+            <h2
+              style="background-color: rgb(255, 223, 127);"
+            >
+              A
+            </h2>
+            <div
+              class="item-container"
+            />
+          </div>
           <div
-            className="item-container"
-            onDragEnter={[Function]}
-            onDragLeave={[Function]}
-            onDragOver={[Function]}
-            onDrop={[Function]}
-          />
-        </div>
-        <div
-          className="tier"
-          data-testid="tier"
-          id="tier-c"
-        >
-          <h2
-            style={
-              {
-                "backgroundColor": "rgb(191, 255, 127)",
-              }
-            }
+            class="tier"
+            data-testid="tier"
+            id="tier-b"
           >
-            C
-          </h2>
+            <h2
+              style="background-color: rgb(255, 255, 127);"
+            >
+              B
+            </h2>
+            <div
+              class="item-container"
+            />
+          </div>
           <div
-            className="item-container"
-            onDragEnter={[Function]}
-            onDragLeave={[Function]}
-            onDragOver={[Function]}
-            onDrop={[Function]}
-          />
-        </div>
-        <div
-          className="tier"
-          data-testid="tier"
-          id="tier-d"
-        >
-          <h2
-            style={
-              {
-                "backgroundColor": "rgb(127, 191, 255)",
-              }
-            }
+            class="tier"
+            data-testid="tier"
+            id="tier-c"
           >
-            D
-          </h2>
+            <h2
+              style="background-color: rgb(191, 255, 127);"
+            >
+              C
+            </h2>
+            <div
+              class="item-container"
+            />
+          </div>
           <div
-            className="item-container"
-            onDragEnter={[Function]}
-            onDragLeave={[Function]}
-            onDragOver={[Function]}
-            onDrop={[Function]}
-          />
-        </div>
-        <div
-          className="tier"
-          data-testid="tier"
-          id="bank"
-        >
+            class="tier"
+            data-testid="tier"
+            id="tier-d"
+          >
+            <h2
+              style="background-color: rgb(127, 191, 255);"
+            >
+              D
+            </h2>
+            <div
+              class="item-container"
+            />
+          </div>
           <div
-            className="item-container"
-            data-testid="voting-item-container"
-            id="items"
-            onDragEnter={[Function]}
-            onDragLeave={[Function]}
-            onDragOver={[Function]}
-            onDrop={[Function]}
+            class="tier"
+            data-testid="tier"
+            id="bank"
           >
             <div
-              className="item"
-              data-testid="voting-item"
-              draggable={true}
-              id="item-1"
-              onDragEnd={[Function]}
-              onDragStart={[Function]}
+              class="item-container"
+              data-testid="voting-item-container"
+              id="items"
             >
               <div
-                className="bp5-interactive bp5-card bp5-elevation-1"
-                onClick={[Function]}
+                class="item"
+                data-testid="voting-item"
+                draggable="true"
+                id="item-1"
               >
-                <pre
-                  className="bp5-code-block contestentry-entryid"
+                <div
+                  class="bp5-interactive bp5-card bp5-elevation-1"
                 >
-                  1
-                </pre>
+                  <pre
+                    class="bp5-code-block contestentry-entryid"
+                  >
+                    1
+                  </pre>
+                </div>
               </div>
-            </div>
-            <div
-              className="item"
-              data-testid="voting-item"
-              draggable={true}
-              id="item-2"
-              onDragEnd={[Function]}
-              onDragStart={[Function]}
-            >
               <div
-                className="bp5-interactive bp5-card bp5-elevation-1"
-                onClick={[Function]}
+                class="item"
+                data-testid="voting-item"
+                draggable="true"
+                id="item-2"
               >
-                <pre
-                  className="bp5-code-block contestentry-entryid"
+                <div
+                  class="bp5-interactive bp5-card bp5-elevation-1"
                 >
-                  2
-                </pre>
+                  <pre
+                    class="bp5-code-block contestentry-entryid"
+                  >
+                    2
+                  </pre>
+                </div>
               </div>
-            </div>
-            <div
-              className="item"
-              data-testid="voting-item"
-              draggable={true}
-              id="item-3"
-              onDragEnd={[Function]}
-              onDragStart={[Function]}
-            >
               <div
-                className="bp5-interactive bp5-card bp5-elevation-1"
-                onClick={[Function]}
+                class="item"
+                data-testid="voting-item"
+                draggable="true"
+                id="item-3"
               >
-                <pre
-                  className="bp5-code-block contestentry-entryid"
+                <div
+                  class="bp5-interactive bp5-card bp5-elevation-1"
                 >
-                  3
-                </pre>
+                  <pre
+                    class="bp5-code-block contestentry-entryid"
+                  >
+                    3
+                  </pre>
+                </div>
               </div>
             </div>
           </div>
@@ -274,5 +202,5 @@ exports[`SideContentContestVotingContainer matches snapshot 1`] = `
       </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap b/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap
index 5c03e21faf..d0e91d258c 100644
--- a/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap
+++ b/src/commons/sideContent/__tests__/__snapshots__/SideContentCseMachine.tsx.snap
@@ -1,556 +1,434 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CSE Machine component renders correctly 1`] = `
-<div
-  onKeyDown={[Function]}
-  style={
-    {
-      "maxHeight": "100%",
-      "overflow": "auto",
-    }
-  }
-  tabIndex={-1}
->
+<DocumentFragment>
   <div
-    className="sa-substituter bp5-dark"
+    style="max-height: 100%; overflow: auto;"
+    tabindex="-1"
   >
     <div
-      className="bp5-slider bp5-disabled"
-      onMouseDown={[Function]}
-      onTouchStart={[Function]}
+      class="sa-substituter bp5-dark"
     >
       <div
-        className="bp5-slider-track"
+        class="bp5-slider bp5-disabled"
       >
         <div
-          className="bp5-slider-progress"
-          style={
-            {
-              "left": "0.00%",
-              "right": "100.00%",
-              "top": 0,
-            }
-          }
-        />
-        <div
-          className="bp5-slider-progress"
-          style={
-            {
-              "left": "0.00%",
-              "right": "100.00%",
-              "top": 0,
-            }
-          }
-        />
-        <div
-          className="bp5-slider-progress"
-          style={
-            {
-              "left": "0.00%",
-              "right": "100.00%",
-              "top": 0,
-            }
-          }
-        />
-      </div>
-      <div
-        className="bp5-slider-axis"
-      >
+          class="bp5-slider-track"
+        >
+          <div
+            class="bp5-slider-progress"
+            style="left: 0.00%; right: 100.00%; top: 0px;"
+          />
+          <div
+            class="bp5-slider-progress"
+            style="left: 0.00%; right: 100.00%; top: 0px;"
+          />
+          <div
+            class="bp5-slider-progress"
+            style="left: 0.00%; right: 100.00%; top: 0px;"
+          />
+        </div>
         <div
-          className="bp5-slider-label"
-          style={
-            {
-              "left": "NaN%",
-            }
-          }
+          class="bp5-slider-axis"
         >
-          0
+          <div
+            class="bp5-slider-label"
+          >
+            0
+          </div>
         </div>
-      </div>
-      <span
-        aria-disabled={true}
-        aria-orientation="horizontal"
-        aria-valuemax={0}
-        aria-valuemin={0}
-        aria-valuenow={0}
-        className="bp5-slider-handle"
-        role="slider"
-        style={{}}
-        tabIndex={0}
-      >
         <span
-          className="bp5-slider-label"
+          aria-disabled="true"
+          aria-orientation="horizontal"
+          aria-valuemax="0"
+          aria-valuemin="0"
+          aria-valuenow="0"
+          class="bp5-slider-handle"
+          role="slider"
+          style="left: calc(NaN% - 0px);"
+          tabindex="0"
         >
-          0
+          <span
+            class="bp5-slider-label"
+          >
+            0
+          </span>
         </span>
-      </span>
-    </div>
-    <div
-      style={
-        {
-          "alignItems": "center",
-          "display": "flex",
-          "justifyContent": "space-between",
-        }
-      }
-    >
+      </div>
       <div
-        className="bp5-button-group"
+        style="display: flex; justify-content: space-between; align-items: center;"
       >
-        <span
-          className="bp5-popover-target"
-          onBlur={[Function]}
-          onContextMenu={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+        <div
+          class="bp5-button-group"
         >
-          <a
-            aria-disabled={true}
-            className="bp5-button bp5-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseUp={[Function]}
-            role="button"
-            tabIndex={-1}
+          <span
+            class="bp5-popover-target"
           >
-            <span
-              aria-hidden={true}
-              className="bp5-icon bp5-icon-layers"
+            <a
+              aria-disabled="true"
+              class="bp5-button bp5-disabled"
+              disabled=""
+              role="button"
+              tabindex="-1"
             >
-              <svg
-                data-icon="layers"
-                height={16}
-                role="img"
-                viewBox="0 0 16 16"
-                width={16}
+              <span
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-layers"
               >
-                <path
-                  d="M.55 4.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3a.998.998 0 00-.06-1.81L8.4.08a1.006 1.006 0 00-.79 0l-6.99 3a.992.992 0 00-.07 1.81zM15 11c-.16 0-.31.04-.45.11L8 14l-6.55-2.9c-.14-.06-.29-.1-.45-.1-.55 0-1 .45-1 1 0 .39.23.73.55.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3c.32-.16.55-.5.55-.89 0-.55-.45-1-1-1zm0-4c-.16 0-.31.04-.45.11L8 10 1.45 7.11A.997.997 0 001 7c-.55 0-1 .45-1 1 0 .39.23.73.55.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3c.32-.16.55-.5.55-.89 0-.55-.45-1-1-1z"
-                  fillRule="evenodd"
-                />
-              </svg>
-            </span>
-            <span
-              className="bp5-button-text"
+                <svg
+                  data-icon="layers"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M.55 4.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3a.998.998 0 00-.06-1.81L8.4.08a1.006 1.006 0 00-.79 0l-6.99 3a.992.992 0 00-.07 1.81zM15 11c-.16 0-.31.04-.45.11L8 14l-6.55-2.9c-.14-.06-.29-.1-.45-.1-.55 0-1 .45-1 1 0 .39.23.73.55.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3c.32-.16.55-.5.55-.89 0-.55-.45-1-1-1zm0-4c-.16 0-.31.04-.45.11L8 10 1.45 7.11A.997.997 0 001 7c-.55 0-1 .45-1 1 0 .39.23.73.55.89l7 3c.14.07.29.11.45.11.16 0 .31-.04.45-.11l7-3c.32-.16.55-.5.55-.89 0-.55-.45-1-1-1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp5-button-text"
+              >
+                <label
+                  class="bp5-control bp5-checkbox bp5-disabled"
+                  style="margin: 0px;"
+                >
+                  <input
+                    disabled=""
+                    type="checkbox"
+                  />
+                  <span
+                    class="bp5-control-indicator"
+                  />
+                </label>
+              </span>
+            </a>
+          </span>
+          <span
+            class="bp5-popover-target"
+          >
+            <a
+              aria-disabled="true"
+              class="bp5-button bp5-disabled"
+              disabled=""
+              role="button"
+              tabindex="-1"
             >
-              <label
-                className="bp5-control bp5-checkbox bp5-disabled"
-                style={
-                  {
-                    "margin": 0,
-                  }
-                }
+              <span
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-minimize"
               >
-                <input
-                  checked={false}
-                  disabled={true}
-                  onChange={[Function]}
-                  type="checkbox"
-                />
-                <span
-                  className="bp5-control-indicator"
-                />
-              </label>
-            </span>
-          </a>
-        </span>
-        <span
-          className="bp5-popover-target"
-          onBlur={[Function]}
-          onContextMenu={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
+                <svg
+                  data-icon="minimize"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M15.99.99a1.003 1.003 0 00-1.71-.71l-3.29 3.29V1.99c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H12.4l3.3-3.29c.18-.18.29-.43.29-.71zm-10 8h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59L.29 14.28a1.003 1.003 0 001.42 1.42L5 12.41V14c0 .55.45 1 1 1s1-.45 1-1v-4a1.02 1.02 0 00-1.01-1.01z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp5-button-text"
+              >
+                <label
+                  class="bp5-control bp5-checkbox bp5-disabled"
+                  style="margin: 0px;"
+                >
+                  <input
+                    disabled=""
+                    type="checkbox"
+                  />
+                  <span
+                    class="bp5-control-indicator"
+                  />
+                </label>
+              </span>
+            </a>
+          </span>
+        </div>
+        <div
+          class="bp5-button-group"
         >
-          <a
-            aria-disabled={true}
-            className="bp5-button bp5-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseUp={[Function]}
-            role="button"
-            tabIndex={-1}
+          <button
+            class="bp5-button bp5-disabled"
+            disabled=""
+            tabindex="-1"
+            type="button"
           >
             <span
-              aria-hidden={true}
-              className="bp5-icon bp5-icon-minimize"
+              aria-hidden="true"
+              class="bp5-icon bp5-icon-double-chevron-left"
             >
               <svg
-                data-icon="minimize"
-                height={16}
+                data-icon="double-chevron-left"
+                height="16"
                 role="img"
                 viewBox="0 0 16 16"
-                width={16}
+                width="16"
               >
                 <path
-                  d="M15.99.99a1.003 1.003 0 00-1.71-.71l-3.29 3.29V1.99c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H12.4l3.3-3.29c.18-.18.29-.43.29-.71zm-10 8h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59L.29 14.28a1.003 1.003 0 001.42 1.42L5 12.41V14c0 .55.45 1 1 1s1-.45 1-1v-4a1.02 1.02 0 00-1.01-1.01z"
-                  fillRule="evenodd"
+                  d="M4.41 8L7.7 4.71c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C2.11 7.47 2 7.72 2 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L4.41 8zm5 0l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C7.11 7.47 7 7.72 7 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L9.41 8z"
+                  fill-rule="evenodd"
                 />
               </svg>
             </span>
-            <span
-              className="bp5-button-text"
-            >
-              <label
-                className="bp5-control bp5-checkbox bp5-disabled"
-                style={
-                  {
-                    "margin": 0,
-                  }
-                }
-              >
-                <input
-                  checked={false}
-                  disabled={true}
-                  onChange={[Function]}
-                  type="checkbox"
-                />
-                <span
-                  className="bp5-control-indicator"
-                />
-              </label>
-            </span>
-          </a>
-        </span>
-      </div>
-      <div
-        className="bp5-button-group"
-      >
-        <button
-          className="bp5-button bp5-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          tabIndex={-1}
-          type="button"
-        >
-          <span
-            aria-hidden={true}
-            className="bp5-icon bp5-icon-double-chevron-left"
-          >
-            <svg
-              data-icon="double-chevron-left"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M4.41 8L7.7 4.71c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C2.11 7.47 2 7.72 2 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L4.41 8zm5 0l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C7.11 7.47 7 7.72 7 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L9.41 8z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
-        </button>
-        <button
-          className="bp5-button bp5-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          tabIndex={-1}
-          type="button"
-        >
-          <span
-            aria-hidden={true}
-            className="bp5-icon bp5-icon-chevron-left"
-          >
-            <svg
-              data-icon="chevron-left"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
-        </button>
-        <button
-          className="bp5-button bp5-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          tabIndex={-1}
-          type="button"
-        >
-          <span
-            aria-hidden={true}
-            className="bp5-icon bp5-icon-chevron-right"
-          >
-            <svg
-              data-icon="chevron-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
-        </button>
-        <button
-          className="bp5-button bp5-disabled"
-          disabled={true}
-          onBlur={[Function]}
-          onKeyDown={[Function]}
-          onKeyUp={[Function]}
-          tabIndex={-1}
-          type="button"
-        >
-          <span
-            aria-hidden={true}
-            className="bp5-icon bp5-icon-double-chevron-right"
-          >
-            <svg
-              data-icon="double-chevron-right"
-              height={16}
-              role="img"
-              viewBox="0 0 16 16"
-              width={16}
-            >
-              <path
-                d="M9 8c0-.28-.11-.53-.29-.71l-4-4a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4C8.89 8.53 9 8.28 9 8zm4.71-.71l-4-4a1.003 1.003 0 00-1.42 1.42L11.59 8 8.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
-                fillRule="evenodd"
-              />
-            </svg>
-          </span>
-        </button>
-      </div>
-      <div
-        className="bp5-button-group"
-      >
-        <span
-          className="bp5-popover-target"
-          onBlur={[Function]}
-          onContextMenu={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <a
-            aria-disabled={true}
-            className="bp5-button bp5-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseUp={[Function]}
-            role="button"
-            tabIndex={-1}
+          </button>
+          <button
+            class="bp5-button bp5-disabled"
+            disabled=""
+            tabindex="-1"
+            type="button"
           >
             <span
-              aria-hidden={true}
-              className="bp5-icon bp5-icon-print"
+              aria-hidden="true"
+              class="bp5-icon bp5-icon-chevron-left"
             >
               <svg
-                data-icon="print"
-                height={16}
+                data-icon="chevron-left"
+                height="16"
                 role="img"
                 viewBox="0 0 16 16"
-                width={16}
+                width="16"
               >
                 <path
-                  d="M12 2.02c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1v1h8v-1zm3 2H1c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h1v-3h12v3h1c.55 0 1-.45 1-1v-6c0-.56-.45-1-1-1zm-1 3h-2v-1h2v1zm-3 6H5v-3H3v4c0 .55.45 1 1 1h8c.55 0 1-.45 1-1v-4h-2v3z"
-                  fillRule="evenodd"
+                  d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
+                  fill-rule="evenodd"
                 />
               </svg>
             </span>
+          </button>
+          <button
+            class="bp5-button bp5-disabled"
+            disabled=""
+            tabindex="-1"
+            type="button"
+          >
             <span
-              className="bp5-button-text"
+              aria-hidden="true"
+              class="bp5-icon bp5-icon-chevron-right"
             >
-              <label
-                className="bp5-control bp5-checkbox bp5-disabled"
-                style={
-                  {
-                    "margin": 0,
-                  }
-                }
+              <svg
+                data-icon="chevron-right"
+                height="16"
+                role="img"
+                viewBox="0 0 16 16"
+                width="16"
               >
-                <input
-                  checked={false}
-                  disabled={true}
-                  onChange={[Function]}
-                  type="checkbox"
-                />
-                <span
-                  className="bp5-control-indicator"
+                <path
+                  d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                  fill-rule="evenodd"
                 />
-              </label>
+              </svg>
             </span>
-          </a>
-        </span>
-        <span
-          className="bp5-popover-target"
-          onBlur={[Function]}
-          onContextMenu={[Function]}
-          onFocus={[Function]}
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <a
-            aria-disabled={true}
-            className="bp5-button bp5-disabled"
-            disabled={true}
-            onBlur={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            role="button"
-            tabIndex={-1}
+          </button>
+          <button
+            class="bp5-button bp5-disabled"
+            disabled=""
+            tabindex="-1"
+            type="button"
           >
             <span
-              aria-hidden={true}
-              className="bp5-icon bp5-icon-floppy-disk"
+              aria-hidden="true"
+              class="bp5-icon bp5-icon-double-chevron-right"
             >
               <svg
-                data-icon="floppy-disk"
-                height={16}
+                data-icon="double-chevron-right"
+                height="16"
                 role="img"
                 viewBox="0 0 16 16"
-                width={16}
+                width="16"
               >
                 <path
-                  d="M15.71 2.29l-2-2A.997.997 0 0013 0h-1v6H4V0H1C.45 0 0 .45 0 1v14c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V3c0-.28-.11-.53-.29-.71zM14 15H2V9c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v6zM11 1H9v4h2V1z"
-                  fillRule="evenodd"
+                  d="M9 8c0-.28-.11-.53-.29-.71l-4-4a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4C8.89 8.53 9 8.28 9 8zm4.71-.71l-4-4a1.003 1.003 0 00-1.42 1.42L11.59 8 8.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                  fill-rule="evenodd"
                 />
               </svg>
             </span>
-          </a>
-        </span>
+          </button>
+        </div>
+        <div
+          class="bp5-button-group"
+        >
+          <span
+            class="bp5-popover-target"
+          >
+            <a
+              aria-disabled="true"
+              class="bp5-button bp5-disabled"
+              disabled=""
+              role="button"
+              tabindex="-1"
+            >
+              <span
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-print"
+              >
+                <svg
+                  data-icon="print"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M12 2.02c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1v1h8v-1zm3 2H1c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h1v-3h12v3h1c.55 0 1-.45 1-1v-6c0-.56-.45-1-1-1zm-1 3h-2v-1h2v1zm-3 6H5v-3H3v4c0 .55.45 1 1 1h8c.55 0 1-.45 1-1v-4h-2v3z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+              <span
+                class="bp5-button-text"
+              >
+                <label
+                  class="bp5-control bp5-checkbox bp5-disabled"
+                  style="margin: 0px;"
+                >
+                  <input
+                    disabled=""
+                    type="checkbox"
+                  />
+                  <span
+                    class="bp5-control-indicator"
+                  />
+                </label>
+              </span>
+            </a>
+          </span>
+          <span
+            class="bp5-popover-target"
+          >
+            <a
+              aria-disabled="true"
+              class="bp5-button bp5-disabled"
+              disabled=""
+              role="button"
+              tabindex="-1"
+            >
+              <span
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-floppy-disk"
+              >
+                <svg
+                  data-icon="floppy-disk"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M15.71 2.29l-2-2A.997.997 0 0013 0h-1v6H4V0H1C.45 0 0 .45 0 1v14c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V3c0-.28-.11-.53-.29-.71zM14 15H2V9c0-.55.45-1 1-1h10c.55 0 1 .45 1 1v6zM11 1H9v4h2V1z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </a>
+          </span>
+        </div>
       </div>
     </div>
-  </div>
-   
-  <div />
-  <div
-    className="bp5-running-text"
-    data-testid="cse-machine-default-text"
-    id="cse-machine-default-text"
-  >
-    <span>
-      The CSE machine generates control, stash and environment model diagrams following a notation introduced in
-       
-      <a
-        href="https://sourceacademy.org/sicpjs/3.2"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <i>
-          Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2
-        </i>
-      </a>
-    </span>
-    .
-    <br />
-    <br />
-     On this tab, the REPL will be hidden from view, so do check that your code has no errors before running the stepper. You may use this tool by running your program and then dragging the slider above to see the state of the control, stash and environment at different stages in the evaluation of your program. Clicking on the fast-forward button (double chevron) will take you to the next breakpoint in your program
-    <br />
-    <br />
+     
+    <div />
     <div
-      className="bp5-divider"
-    />
-    Some useful keyboard shortcuts:
-    <br />
-    <br />
-    a: Move to the first step
-    <br />
-    e: Move to the last step
-    <br />
-    f: Move to the next step
-    <br />
-    b: Move to the previous step
-    <br />
-    <br />
-    Note that these shortcuts are only active when the browser focus is on this tab.
-  </div>
-  <div
-    className="bp5-button-group bp5-vertical"
-    style={
-      {
-        "bottom": "20px",
-        "position": "absolute",
-        "right": "20px",
-      }
-    }
-  >
-    <button
-      className="bp5-button bp5-disabled"
-      disabled={true}
-      onBlur={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      style={
-        {
-          "borderRadius": "3px",
-          "marginBottom": "5px",
-        }
-      }
-      tabIndex={-1}
-      type="button"
+      class="bp5-running-text"
+      data-testid="cse-machine-default-text"
+      id="cse-machine-default-text"
     >
-      <span
-        aria-hidden={true}
-        className="bp5-icon bp5-icon-plus"
-      >
-        <svg
-          data-icon="plus"
-          height={16}
-          role="img"
-          viewBox="0 0 16 16"
-          width={16}
+      <span>
+        The CSE machine generates control, stash and environment model diagrams following a notation introduced in 
+        <a
+          href="https://sourceacademy.org/sicpjs/3.2"
+          rel="noopener noreferrer"
+          target="_blank"
         >
-          <path
-            d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
-            fillRule="evenodd"
-          />
-        </svg>
+          <i>
+            Structure and Interpretation of Computer Programs, JavaScript Edition, Chapter 3, Section 2
+          </i>
+        </a>
       </span>
-    </button>
-    <button
-      className="bp5-button bp5-disabled"
-      disabled={true}
-      onBlur={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      style={
-        {
-          "borderRadius": "3px",
-        }
-      }
-      tabIndex={-1}
-      type="button"
+      .
+      <br />
+      <br />
+       On this tab, the REPL will be hidden from view, so do check that your code has no errors before running the stepper. You may use this tool by running your program and then dragging the slider above to see the state of the control, stash and environment at different stages in the evaluation of your program. Clicking on the fast-forward button (double chevron) will take you to the next breakpoint in your program
+      <br />
+      <br />
+      <div
+        class="bp5-divider"
+      />
+      Some useful keyboard shortcuts:
+      <br />
+      <br />
+      a: Move to the first step
+      <br />
+      e: Move to the last step
+      <br />
+      f: Move to the next step
+      <br />
+      b: Move to the previous step
+      <br />
+      <br />
+      Note that these shortcuts are only active when the browser focus is on this tab.
+    </div>
+    <div
+      class="bp5-button-group bp5-vertical"
+      style="position: absolute; bottom: 20px; right: 20px;"
     >
-      <span
-        aria-hidden={true}
-        className="bp5-icon bp5-icon-minus"
+      <button
+        class="bp5-button bp5-disabled"
+        disabled=""
+        style="margin-bottom: 5px; border-radius: 3px;"
+        tabindex="-1"
+        type="button"
       >
-        <svg
-          data-icon="minus"
-          height={16}
-          role="img"
-          viewBox="0 0 16 16"
-          width={16}
+        <span
+          aria-hidden="true"
+          class="bp5-icon bp5-icon-plus"
         >
-          <path
-            d="M13 7H3c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1z"
-            fillRule="evenodd"
-          />
-        </svg>
-      </span>
-    </button>
+          <svg
+            data-icon="plus"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M13 7H9V3c0-.55-.45-1-1-1s-1 .45-1 1v4H3c-.55 0-1 .45-1 1s.45 1 1 1h4v4c0 .55.45 1 1 1s1-.45 1-1V9h4c.55 0 1-.45 1-1s-.45-1-1-1z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </button>
+      <button
+        class="bp5-button bp5-disabled"
+        disabled=""
+        style="border-radius: 3px;"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-hidden="true"
+          class="bp5-icon bp5-icon-minus"
+        >
+          <svg
+            data-icon="minus"
+            height="16"
+            role="img"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M13 7H3c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
index 17e0741271..7a2c11734e 100644
--- a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
+++ b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
@@ -561,7 +561,6 @@ exports[`Playground tests Playground renders correctly 1`] = `
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_introduction"
-                          aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
                           class="bp5-tab side-content-tab"
@@ -599,7 +598,6 @@ exports[`Playground tests Playground renders correctly 1`] = `
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_data_visualizer"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -637,7 +635,6 @@ exports[`Playground tests Playground renders correctly 1`] = `
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_cse_machine"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -675,7 +672,6 @@ exports[`Playground tests Playground renders correctly 1`] = `
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_remote_execution"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -2110,7 +2106,6 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_introduction"
-                          aria-disabled="false"
                           aria-expanded="true"
                           aria-selected="true"
                           class="bp5-tab side-content-tab"
@@ -2148,7 +2143,6 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_data_visualizer"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -2186,7 +2180,6 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_subst_visualiser"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"
@@ -2224,7 +2217,6 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
                         </div>
                         <div
                           aria-controls="bp5-tab-panel_side-content-tabs_remote_execution"
-                          aria-disabled="false"
                           aria-expanded="false"
                           aria-selected="false"
                           class="bp5-tab side-content-tab"

From 26066263b237c1b2b842d2a7dc99122d95dc560a Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 02:20:41 +0800
Subject: [PATCH 13/16] Fix some tests and snapshots

---
 .../sicp/errors/__tests__/SicpErrors.tsx      |  17 +-
 .../__snapshots__/SicpErrors.tsx.snap         | 226 ++++---
 src/pages/sicp/__tests__/Sicp.tsx             |   6 +-
 .../__tests__/__snapshots__/Sicp.tsx.snap     | 595 +++++++++++++++++-
 .../subcomponents/__tests__/SicpLatex.tsx     |  10 +-
 .../__snapshots__/SicpLatex.tsx.snap          |  20 +-
 6 files changed, 720 insertions(+), 154 deletions(-)

diff --git a/src/features/sicp/errors/__tests__/SicpErrors.tsx b/src/features/sicp/errors/__tests__/SicpErrors.tsx
index 4d2be1aa2f..f130364446 100644
--- a/src/features/sicp/errors/__tests__/SicpErrors.tsx
+++ b/src/features/sicp/errors/__tests__/SicpErrors.tsx
@@ -1,31 +1,24 @@
-import { render, screen } from '@testing-library/react';
-import { act } from 'react';
-import { shallowRender } from 'src/commons/utils/TestUtils';
+import { screen } from '@testing-library/react';
+import { renderTree } from 'src/commons/utils/TestUtils';
 
 import getSicpError, { SicpErrorType } from '../SicpErrors';
 
 describe('Sicp errors:', () => {
   test('unexpected error renders correctly', async () => {
     const element = getSicpError(SicpErrorType.UNEXPECTED_ERROR);
-    expect(shallowRender(element)).toMatchSnapshot();
-
-    await act(() => render(element));
+    expect(await renderTree(element)).toMatchSnapshot();
     screen.getByTestId('sicp-unexpected-error');
   });
 
   test('page not found error renders correctly', async () => {
     const element = getSicpError(SicpErrorType.PAGE_NOT_FOUND_ERROR);
-    expect(shallowRender(element)).toMatchSnapshot();
-
-    await act(() => render(element));
+    expect(await renderTree(element)).toMatchSnapshot();
     screen.getByTestId('sicp-page-not-found-error');
   });
 
   test('unexpected error renders correctly', async () => {
     const element = getSicpError(SicpErrorType.PARSING_ERROR);
-    expect(shallowRender(element)).toMatchSnapshot();
-
-    await act(() => render(element));
+    expect(await renderTree(element)).toMatchSnapshot();
     screen.getByTestId('sicp-parsing-error');
   });
 });
diff --git a/src/features/sicp/errors/__tests__/__snapshots__/SicpErrors.tsx.snap b/src/features/sicp/errors/__tests__/__snapshots__/SicpErrors.tsx.snap
index 1b2240e663..17f867bad7 100644
--- a/src/features/sicp/errors/__tests__/__snapshots__/SicpErrors.tsx.snap
+++ b/src/features/sicp/errors/__tests__/__snapshots__/SicpErrors.tsx.snap
@@ -1,131 +1,157 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Sicp errors: page not found error renders correctly 1`] = `
-<div
-  className="bp5-non-ideal-state bp5-non-ideal-state-vertical"
->
+<DocumentFragment>
   <div
-    className="bp5-non-ideal-state-visual"
-    style={
-      {
-        "fontSize": "48px",
-        "lineHeight": "48px",
-      }
-    }
+    class="bp5-non-ideal-state bp5-non-ideal-state-vertical"
   >
-    <Blueprint5.Icon
-      aria-hidden={true}
-      className="bp5-icon-muted"
-      icon="error"
-      size={48}
-      tabIndex={-1}
-    />
-  </div>
-  <div
-    className="bp5-non-ideal-state-text"
-  >
-    <ForwardRef>
-      Something went wrong :(
-    </ForwardRef>
     <div
-      data-testid="sicp-page-not-found-error"
+      class="bp5-non-ideal-state-visual"
+      style="font-size: 48px; line-height: 48px;"
+    >
+      <span
+        aria-hidden="true"
+        class="bp5-icon bp5-icon-error bp5-icon-muted"
+        tabindex="-1"
+      >
+        <svg
+          data-icon="error"
+          height="48"
+          role="img"
+          viewBox="0 0 20 20"
+          width="48"
+        >
+          <path
+            d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 16H9v-2h2v2zm0-3H9V4h2v9z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="bp5-non-ideal-state-text"
     >
-      We could not find the page you were looking for. Please check the URL again. If you believe the URL is correct, kindly let us know by filing an issue at
-       
-      <a
-        href="https://github.com/source-academy/frontend"
+      <h4
+        class="bp5-heading"
+      >
+        Something went wrong :(
+      </h4>
+      <div
+        data-testid="sicp-page-not-found-error"
       >
-        https://github.com/source-academy/frontend
-      </a>
-      .
+        We could not find the page you were looking for. Please check the URL again. If you believe the URL is correct, kindly let us know by filing an issue at 
+        <a
+          href="https://github.com/source-academy/frontend"
+        >
+          https://github.com/source-academy/frontend
+        </a>
+        .
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Sicp errors: unexpected error renders correctly 1`] = `
-<div
-  className="bp5-non-ideal-state bp5-non-ideal-state-vertical"
->
-  <div
-    className="bp5-non-ideal-state-visual"
-    style={
-      {
-        "fontSize": "48px",
-        "lineHeight": "48px",
-      }
-    }
-  >
-    <Blueprint5.Icon
-      aria-hidden={true}
-      className="bp5-icon-muted"
-      icon="error"
-      size={48}
-      tabIndex={-1}
-    />
-  </div>
+<DocumentFragment>
   <div
-    className="bp5-non-ideal-state-text"
+    class="bp5-non-ideal-state bp5-non-ideal-state-vertical"
   >
-    <ForwardRef>
-      Something went wrong :(
-    </ForwardRef>
     <div
-      data-testid="sicp-unexpected-error"
+      class="bp5-non-ideal-state-visual"
+      style="font-size: 48px; line-height: 48px;"
+    >
+      <span
+        aria-hidden="true"
+        class="bp5-icon bp5-icon-error bp5-icon-muted"
+        tabindex="-1"
+      >
+        <svg
+          data-icon="error"
+          height="48"
+          role="img"
+          viewBox="0 0 20 20"
+          width="48"
+        >
+          <path
+            d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 16H9v-2h2v2zm0-3H9V4h2v9z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="bp5-non-ideal-state-text"
     >
-      Something unexpected went wrong trying to load this page. Please try refreshing the page. If the issue persists, kindly let us know by filing an issue at
-       
-      <a
-        href="https://github.com/source-academy/frontend"
+      <h4
+        class="bp5-heading"
       >
-        https://github.com/source-academy/frontend
-      </a>
-      .
+        Something went wrong :(
+      </h4>
+      <div
+        data-testid="sicp-unexpected-error"
+      >
+        Something unexpected went wrong trying to load this page. Please try refreshing the page. If the issue persists, kindly let us know by filing an issue at 
+        <a
+          href="https://github.com/source-academy/frontend"
+        >
+          https://github.com/source-academy/frontend
+        </a>
+        .
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Sicp errors: unexpected error renders correctly 2`] = `
-<div
-  className="bp5-non-ideal-state bp5-non-ideal-state-vertical"
->
-  <div
-    className="bp5-non-ideal-state-visual"
-    style={
-      {
-        "fontSize": "48px",
-        "lineHeight": "48px",
-      }
-    }
-  >
-    <Blueprint5.Icon
-      aria-hidden={true}
-      className="bp5-icon-muted"
-      icon="error"
-      size={48}
-      tabIndex={-1}
-    />
-  </div>
+<DocumentFragment>
   <div
-    className="bp5-non-ideal-state-text"
+    class="bp5-non-ideal-state bp5-non-ideal-state-vertical"
   >
-    <ForwardRef>
-      Something went wrong :(
-    </ForwardRef>
     <div
-      data-testid="sicp-parsing-error"
+      class="bp5-non-ideal-state-visual"
+      style="font-size: 48px; line-height: 48px;"
+    >
+      <span
+        aria-hidden="true"
+        class="bp5-icon bp5-icon-error bp5-icon-muted"
+        tabindex="-1"
+      >
+        <svg
+          data-icon="error"
+          height="48"
+          role="img"
+          viewBox="0 0 20 20"
+          width="48"
+        >
+          <path
+            d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zm1 16H9v-2h2v2zm0-3H9V4h2v9z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="bp5-non-ideal-state-text"
     >
-      An error occured while loading the page. Kindly let us know by filing an issue at
-       
-      <a
-        href="https://github.com/source-academy/frontend"
+      <h4
+        class="bp5-heading"
+      >
+        Something went wrong :(
+      </h4>
+      <div
+        data-testid="sicp-parsing-error"
       >
-        https://github.com/source-academy/frontend
-      </a>
-       
-      and we will get it fixed as soon as possible.
+        An error occured while loading the page. Kindly let us know by filing an issue at 
+        <a
+          href="https://github.com/source-academy/frontend"
+        >
+          https://github.com/source-academy/frontend
+        </a>
+         and we will get it fixed as soon as possible.
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
diff --git a/src/pages/sicp/__tests__/Sicp.tsx b/src/pages/sicp/__tests__/Sicp.tsx
index 5cf0d3f8bf..17886acd9c 100644
--- a/src/pages/sicp/__tests__/Sicp.tsx
+++ b/src/pages/sicp/__tests__/Sicp.tsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import type { Location } from 'react-router';
 import { mockInitialStore } from 'src/commons/mocks/StoreMocks';
-import { shallowRender } from 'src/commons/utils/TestUtils';
+import { renderTree } from 'src/commons/utils/TestUtils';
 
 import Sicp from '../Sicp';
 
@@ -14,13 +14,13 @@ jest.mock('react-router', () => ({
 }));
 
 describe('Sicp renders', () => {
-  test('correctly', () => {
+  test('correctly', async () => {
     const sicp = (
       <Provider store={mockInitialStore()}>
         <Sicp />
       </Provider>
     );
-    const tree = shallowRender(sicp);
+    const tree = await renderTree(sicp);
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/src/pages/sicp/__tests__/__snapshots__/Sicp.tsx.snap b/src/pages/sicp/__tests__/__snapshots__/Sicp.tsx.snap
index 7834ae72df..289d34c5c6 100644
--- a/src/pages/sicp/__tests__/__snapshots__/Sicp.tsx.snap
+++ b/src/pages/sicp/__tests__/__snapshots__/Sicp.tsx.snap
@@ -1,32 +1,571 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Sicp renders correctly 1`] = `
-<Context.Provider
-  value={
-    {
-      "getServerState": undefined,
-      "noopCheck": "once",
-      "stabilityCheck": "once",
-      "store": {
-        "clearActions": [Function],
-        "dispatch": [Function],
-        "getActions": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      },
-      "subscription": {
-        "addNestedSub": [Function],
-        "getListeners": [Function],
-        "handleChangeWrapper": [Function],
-        "isSubscribed": [Function],
-        "notifyNestedSubs": [Function],
-        "trySubscribe": [Function],
-        "tryUnsubscribe": [Function],
-      },
-    }
-  }
->
-  <Sicp />
-</Context.Provider>
+<DocumentFragment>
+  <div
+    class="Sicp bp5-running-text bp5-text-large bp5-dark"
+  >
+    <div
+      class="sicp-index-page"
+    >
+      <div
+        class="sicp-cover"
+      >
+        <img
+          alt="SICP"
+          src="http://source-academy.github.io/sicp/sicpjs.png"
+        />
+        <div
+          class="sicp-cover-text"
+        >
+          <div>
+            <h1
+              class="bp5-heading"
+            >
+              Structure and Interpretation of Computer Programs
+            </h1>
+            <h2
+              class="bp5-heading"
+            >
+              — JavaScript Edition
+            </h2>
+          </div>
+          <div
+            class="sicp-authors"
+          >
+            <h4
+              class="bp5-heading"
+            >
+              Harold Abelson and Gerald Jay Sussman
+            </h4>
+            <p>
+              with Julie Sussman
+              <i>
+                — original authors
+              </i>
+            </p>
+            <h4
+              class="bp5-heading"
+            >
+              Martin Henz and Tobias Wrigstad
+            </h4>
+            <p>
+              with Julie Sussman
+              <i>
+                — adapters to JavaScript
+              </i>
+            </p>
+            <h4
+              class="bp5-heading"
+            >
+              Samuel Fang
+            </h4>
+            <p>
+              <i>
+                — designer and developer of this Interactive SICP JS edition
+              </i>
+            </p>
+          </div>
+        </div>
+      </div>
+      <br />
+      <h2
+        class="bp5-heading"
+      >
+        Content
+      </h2>
+      <div
+        class="sicp-toc"
+      >
+        <div
+          class="bp5-tree sicp-toc-tree"
+        >
+          <ul
+            class="bp5-tree-node-list bp5-tree-root"
+          >
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-tree-node-caret-none"
+                />
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  Foreword
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-tree-node-caret-none"
+                />
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  Foreword to Structure and Interpretation of Computer Programs, 1984
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-tree-node-caret-none"
+                />
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  Preface
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-tree-node-caret-none"
+                />
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  Prefaces to Structure and Interpretation of Computer Programs, 1996 & 1984
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-tree-node-caret-none"
+                />
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  Acknowledgments
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+                >
+                  <svg
+                    data-icon="chevron-right"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <title>
+                      Expand group
+                    </title>
+                    <path
+                      d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                      fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  1 Building Abstractions with Functions
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+                >
+                  <svg
+                    data-icon="chevron-right"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <title>
+                      Expand group
+                    </title>
+                    <path
+                      d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                      fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  2 Building Abstractions with Data
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+                >
+                  <svg
+                    data-icon="chevron-right"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <title>
+                      Expand group
+                    </title>
+                    <path
+                      d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                      fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  3 Modularity, Objects, and State
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+                >
+                  <svg
+                    data-icon="chevron-right"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <title>
+                      Expand group
+                    </title>
+                    <path
+                      d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                      fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  4 Metalinguistic Abstraction
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-icon bp5-icon-chevron-right bp5-tree-node-caret bp5-tree-node-caret-closed"
+                >
+                  <svg
+                    data-icon="chevron-right"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <title>
+                      Expand group
+                    </title>
+                    <path
+                      d="M214.2 174.2L134.2 254.2C130.6 257.8 125.6 260 120 260C109 260 100 251 100 240C100 234.4 102.2 229.4 105.8 225.8L171.8 160L106 94.2C102.2 90.6 100 85.6 100 80C100 69 109 60 120 60C125.6 60 130.6 62.2 134.2 65.8L214.2 145.8C217.8 149.4 220 154.4 220 160C220 165.6 217.8 170.6 214.2 174.2z"
+                      fill-rule="evenodd"
+                      style="transform-origin: center;"
+                      transform="scale(0.05, -0.05) translate(-160, -160)"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  5 Computing with Register Machines
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-tree-node-caret-none"
+                />
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  References
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+            <li
+              class="bp5-tree-node"
+            >
+              <div
+                class="bp5-tree-node-content bp5-tree-node-content-0"
+              >
+                <span
+                  class="bp5-tree-node-caret-none"
+                />
+                <span
+                  class="bp5-tree-node-label"
+                >
+                  About the SICP JS Project
+                </span>
+              </div>
+              <div
+                class="bp5-collapse"
+              >
+                <div
+                  aria-hidden="true"
+                  class="bp5-collapse-body"
+                  style="transform: translateY(-undefinedpx);"
+                />
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <br />
+      <h2
+        class="bp5-heading"
+      >
+        Licenses
+      </h2>
+      <div
+        class="sicp-licenses"
+      >
+        <div>
+          <a
+            href="http://creativecommons.org/licenses/by-sa/4.0/"
+            rel="nofollow"
+          >
+            <img
+              alt="CC BY-SA 4.0"
+              src="https://licensebuttons.net/l/by-sa/4.0/88x31.png"
+            />
+          </a>
+        </div>
+        <div>
+          <p>
+            This work is licensed under a 
+            <a
+              href="http://creativecommons.org/licenses/by-sa/4.0/"
+              rel="nofollow"
+            >
+              Creative Commons Attribution-ShareAlike 4.0 International License
+            </a>
+            .
+          </p>
+        </div>
+        <br />
+        <div>
+          <a
+            href="https://www.gnu.org/licenses/gpl-3.0.en.html"
+            rel="nofollow"
+          >
+            <img
+              alt="GPL 3"
+              data-canonical-src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/License_icon-gpl.svg/50px-License_icon-gpl.svg.png"
+              src="https://camo.githubusercontent.com/46d38fe6087a9b9bdf7e45458901b818765b8391/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f7468756d622f372f37392f4c6963656e73655f69636f6e2d67706c2e7376672f353070782d4c6963656e73655f69636f6e2d67706c2e7376672e706e67"
+            />
+          </a>
+        </div>
+        <div>
+          <p>
+            All JavaScript programs in this work are licensed under the 
+            <a
+              href="https://www.gnu.org/licenses/gpl-3.0.en.html"
+              rel="nofollow"
+            >
+              GNU General Public License Version 3
+            </a>
+            .
+          </p>
+        </div>
+        <br />
+        <div>
+          <a
+            href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
+            rel="nofollow"
+          >
+            <img
+              alt="CC BY-NC-SA 4.0"
+              src="https://licensebuttons.net/l/by-nc-sa/4.0/88x31.png"
+            />
+          </a>
+        </div>
+        <div>
+          <p>
+            <a
+              href="https://mitpress.mit.edu/books/structure-and-interpretation-computer-programs-1"
+              rel="nofollow"
+            >
+              Print and Kindle versions of this work 
+            </a>
+            are published by The MIT Press under a 
+            <a
+              href="http://creativecommons.org/licenses/by-nc-sa/4.0/"
+              rel="nofollow"
+            >
+              Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License
+            </a>
+            .
+          </p>
+        </div>
+        <br />
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
 `;
diff --git a/src/pages/sicp/subcomponents/__tests__/SicpLatex.tsx b/src/pages/sicp/subcomponents/__tests__/SicpLatex.tsx
index da78044a31..e296a8de17 100644
--- a/src/pages/sicp/subcomponents/__tests__/SicpLatex.tsx
+++ b/src/pages/sicp/subcomponents/__tests__/SicpLatex.tsx
@@ -1,25 +1,25 @@
-import { shallowRender } from 'src/commons/utils/TestUtils';
+import { renderTree } from 'src/commons/utils/TestUtils';
 
 import SicpLatex from '../SicpLatex';
 
 describe('Sicp latex renders', () => {
-  test('correctly block', () => {
+  test('correctly block', async () => {
     const props = {
       math: '1+1',
       inline: false
     };
 
-    const tree = shallowRender(<SicpLatex {...props} />);
+    const tree = await renderTree(<SicpLatex {...props} />);
     expect(tree).toMatchSnapshot();
   });
 
-  test('correctly inline', () => {
+  test('correctly inline', async () => {
     const props = {
       math: '1+1',
       inline: true
     };
 
-    const tree = shallowRender(<SicpLatex {...props} />);
+    const tree = await renderTree(<SicpLatex {...props} />);
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpLatex.tsx.snap b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpLatex.tsx.snap
index 444b406753..b4a885af28 100644
--- a/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpLatex.tsx.snap
+++ b/src/pages/sicp/subcomponents/__tests__/__snapshots__/SicpLatex.tsx.snap
@@ -1,13 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Sicp latex renders correctly block 1`] = `
-<Latex$1>
-  1+1
-</Latex$1>
+<DocumentFragment>
+  <span
+    class="__Latex__"
+  >
+    1+1
+  </span>
+</DocumentFragment>
 `;
 
 exports[`Sicp latex renders correctly inline 1`] = `
-<Latex$1>
-  1+1
-</Latex$1>
+<DocumentFragment>
+  <span
+    class="__Latex__"
+  >
+    1+1
+  </span>
+</DocumentFragment>
 `;

From 39c8903137c2b7a66528963762b9f37e64c1e59d Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 02:25:10 +0800
Subject: [PATCH 14/16] Update more snapshots

---
 .../__snapshots__/CseMachine.tsx.snap         | 3868 ++++++++++++-----
 .../__snapshots__/ParseJson.tsx.snap          | 1114 ++---
 2 files changed, 3294 insertions(+), 1688 deletions(-)

diff --git a/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap b/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
index 4ba8d5e510..5fa9134f8d 100644
--- a/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
+++ b/src/features/cseMachine/__tests__/__snapshots__/CseMachine.tsx.snap
@@ -1,1264 +1,2732 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CSE Machine Control Stash correctly renders: Control is truncated properly 1`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={40}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="*"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={45}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Perform * on top 2 stash values"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "208",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "*",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 40,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Perform * on top 2 stash values",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 45,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: Control is truncated properly 2`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={75}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#030fff"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="*"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={80}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Perform * on top 2 stash values"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "209",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#030fff",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "*",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 75,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Perform * on top 2 stash values",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 80,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: Control is truncated properly 3`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={140}
-    y={5}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={10}
-      preventDefault={false}
-      text="10"
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={45}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="10"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "210",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 10,
+                "preventDefault": false,
+                "text": "10",
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 140,
+          "y": 5,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "10",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 45,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: Control is truncated properly 4`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={178}
-    y={5}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#ff1744"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={10}
-      preventDefault={false}
-      text="9"
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={183}
-    y={45}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="9"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "211",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#ff1744",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 10,
+                "preventDefault": false,
+                "text": "9",
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 178,
+          "y": 5,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "9",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 183,
+          "y": 45,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: Control is truncated properly 5`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={207}
-    y={5}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#ff1744"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={10}
-      preventDefault={false}
-      text="40320"
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={212}
-    y={45}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="40320"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "212",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#ff1744",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 10,
+                "preventDefault": false,
+                "text": "40320",
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 207,
+          "y": 5,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "40320",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 212,
+          "y": 45,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 1`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={40}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="call 0"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={45}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Call function with 0 arguments"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "105",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "call 0",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 40,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Call function with 0 arguments",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 45,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 2`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={75}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="arr acc"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={80}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Access array at given index"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "106",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "arr acc",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 75,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Access array at given index",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 80,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 3`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={110}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="1"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={115}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="1"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "107",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "1",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 110,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "1",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 115,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 4`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={145}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="env"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={150}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Set current environment to this environment"
-    />
-  </Label>
-  <Group
-    listening={false}
-  >
-    <Path
-      data="M 140 162.5 L 170 240 L 170 240 "
-      preventDefault={false}
-      stroke="#999"
-      strokeWidth={1}
-    />
-    <Arrow
-      fill="#999"
-      pointerWidth={10}
-      points={
-        [
-          140,
-          162.5,
-          170,
-          240,
-        ]
-      }
-      preventDefault={false}
-      strokeEnabled={false}
-    />
-  </Group>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "111",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "env",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 145,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Set current environment to this environment",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 150,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": "110",
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": "108",
+              "props": {
+                "data": "M 140 162.5 L 170 240 L 170 240 ",
+                "preventDefault": false,
+                "stroke": "#999",
+                "strokeWidth": 1,
+              },
+              "type": "Path",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": "109",
+              "props": {
+                "fill": "#999",
+                "pointerWidth": 10,
+                "points": [
+                  140,
+                  162.5,
+                  170,
+                  240,
+                ],
+                "preventDefault": false,
+                "strokeEnabled": false,
+              },
+              "type": "Arrow",
+            },
+          ],
+          "listening": false,
+          "ref": {
+            "current": null,
+          },
+        },
+        "type": "Group",
+      },
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 5`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={180}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="mark"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={185}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Mark return address"
-    />
-  </Label>
-</React.Fragment>
-`;
-
-exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 6`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={215}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="env"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={220}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Set current environment to this environment"
-    />
-  </Label>
-  <Group
-    listening={false}
-  >
-    <Path
-      data="M 140 232.5 L 170 390 L 170 390 "
-      preventDefault={false}
-      stroke="#999"
-      strokeWidth={1}
-    />
-    <Arrow
-      fill="#999"
-      pointerWidth={10}
-      points={
-        [
-          140,
-          232.5,
-          170,
-          390,
-        ]
-      }
-      preventDefault={false}
-      strokeEnabled={false}
-    />
-  </Group>
-</React.Fragment>
-`;
-
-exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 7`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={250}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="return ar…"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={255}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="return arr;"
-    />
-  </Label>
-</React.Fragment>
-`;
-
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "112",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "mark",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 180,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Mark return address",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 185,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
+`;
+
+exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 6`] = `
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "116",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "env",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 215,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Set current environment to this environment",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 220,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": "115",
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": "113",
+              "props": {
+                "data": "M 140 232.5 L 170 390 L 170 390 ",
+                "preventDefault": false,
+                "stroke": "#999",
+                "strokeWidth": 1,
+              },
+              "type": "Path",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": "114",
+              "props": {
+                "fill": "#999",
+                "pointerWidth": 10,
+                "points": [
+                  140,
+                  232.5,
+                  170,
+                  390,
+                ],
+                "preventDefault": false,
+                "strokeEnabled": false,
+              },
+              "type": "Arrow",
+            },
+          ],
+          "listening": false,
+          "ref": {
+            "current": null,
+          },
+        },
+        "type": "Group",
+      },
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
+`;
+
+exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 7`] = `
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "117",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "return ar…",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 250,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "return arr;",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 255,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
+`;
+
 exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 8`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={285}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="pop"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={290}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Pop most recently pushed value from stash"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "118",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "pop",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 285,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Pop most recently pushed value from stash",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 290,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 9`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={320}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="while"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={325}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Keep executing while loop body if predicate holds"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "119",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "while",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 320,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Keep executing while loop body if predicate holds",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 325,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 10`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={355}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="x < n"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={360}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="x < n"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "120",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "x < n",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 355,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "x < n",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 360,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 11`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={390}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="x = x + 1;"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={395}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="x = x + 1;"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "121",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "x = x + 1;",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 390,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "x = x + 1;",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 395,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 12`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={425}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="pop"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={430}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Pop most recently pushed value from stash"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "122",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "pop",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 425,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Pop most recently pushed value from stash",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 430,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: arrows from the environment instruction to the frame and arrows from the stash to closures 13`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={460}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#030fff"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="arr[x] = …"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={465}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="arr[x] = () => x;"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "123",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#030fff",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "arr[x] = …",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 460,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "arr[x] = () => x;",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 465,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: global environments are treated correctly 1`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={40}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="math_sin(…"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={45}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="math_sin(math_PI / 2);"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "54",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "math_sin(…",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 40,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "math_sin(math_PI / 2);",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 45,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: global environments are treated correctly 2`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={75}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="env"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={80}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Set current environment to this environment"
-    />
-  </Label>
-  <Group
-    listening={false}
-  >
-    <Path
-      data="M 140 92.5 L 170 105 L 170 105 "
-      preventDefault={false}
-      stroke="#999"
-      strokeWidth={1}
-    />
-    <Arrow
-      fill="#999"
-      pointerWidth={10}
-      points={
-        [
-          140,
-          92.5,
-          170,
-          105,
-        ]
-      }
-      preventDefault={false}
-      strokeEnabled={false}
-    />
-  </Group>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "58",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "env",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 75,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Set current environment to this environment",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 80,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": "57",
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": "55",
+              "props": {
+                "data": "M 140 92.5 L 170 105 L 170 105 ",
+                "preventDefault": false,
+                "stroke": "#999",
+                "strokeWidth": 1,
+              },
+              "type": "Path",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": "56",
+              "props": {
+                "fill": "#999",
+                "pointerWidth": 10,
+                "points": [
+                  140,
+                  92.5,
+                  170,
+                  105,
+                ],
+                "preventDefault": false,
+                "strokeEnabled": false,
+              },
+              "type": "Arrow",
+            },
+          ],
+          "listening": false,
+          "ref": {
+            "current": null,
+          },
+        },
+        "type": "Group",
+      },
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: global environments are treated correctly 3`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={110}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="pop"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={115}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Pop most recently pushed value from stash"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "59",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "pop",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 110,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Pop most recently pushed value from stash",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 115,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: global environments are treated correctly 4`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={20}
-    y={145}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#030fff"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      height={35}
-      padding={10}
-      preventDefault={false}
-      text="asgn math…"
-      width={120}
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={150}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="Assign value on top of stash to math_sin"
-    />
-  </Label>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "60",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#030fff",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "height": 35,
+                "padding": 10,
+                "preventDefault": false,
+                "text": "asgn math…",
+                "width": 120,
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 20,
+          "y": 145,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "Assign value on top of stash to math_sin",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 150,
+        },
+        "type": "Label",
+      },
+      undefined,
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine Control Stash correctly renders: global environments are treated correctly 5`] = `
-<React.Fragment>
-  <Label
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    x={140}
-    y={5}
-  >
-    <Tag
-      cornerRadius={5}
-      preventDefault={false}
-      stroke="#999"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={10}
-      preventDefault={false}
-      text="closure"
-    />
-  </Label>
-  <Label
-    visible={false}
-    x={145}
-    y={45}
-  >
-    <Tag
-      fill="#000"
-      opacity={0.7}
-      preventDefault={false}
-      stroke="#000"
-    />
-    <Text
-      fill="#999"
-      fontFamily="monospace, monospace"
-      fontSize={15}
-      fontStyle="normal"
-      fontVariant="normal"
-      padding={5}
-      preventDefault={false}
-      text="closure"
-    />
-  </Label>
-  <Group
-    listening={false}
-  >
-    <Path
-      data="M 181.5 40 L 379 330 L 379 330 "
-      preventDefault={false}
-      stroke="#999"
-      strokeWidth={1}
-    />
-    <Arrow
-      fill="#999"
-      pointerWidth={10}
-      points={
-        [
-          181.5,
-          40,
-          379,
-          330,
-        ]
-      }
-      preventDefault={false}
-      strokeEnabled={false}
-    />
-  </Group>
-</React.Fragment>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": "64",
+  "props": {
+    "children": [
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "cornerRadius": 5,
+                "preventDefault": false,
+                "stroke": "#999",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 10,
+                "preventDefault": false,
+                "text": "closure",
+              },
+              "type": "Text",
+            },
+          ],
+          "onMouseEnter": [Function],
+          "onMouseLeave": [Function],
+          "ref": {
+            "current": null,
+          },
+          "x": 140,
+          "y": 5,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": null,
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#000",
+                "opacity": 0.7,
+                "preventDefault": false,
+                "stroke": "#000",
+              },
+              "type": "Tag",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": null,
+              "props": {
+                "fill": "#999",
+                "fontFamily": "monospace, monospace",
+                "fontSize": 15,
+                "fontStyle": "normal",
+                "fontVariant": "normal",
+                "padding": 5,
+                "preventDefault": false,
+                "text": "closure",
+              },
+              "type": "Text",
+            },
+          ],
+          "ref": {
+            "current": null,
+          },
+          "visible": false,
+          "x": 145,
+          "y": 45,
+        },
+        "type": "Label",
+      },
+      {
+        "$$typeof": Symbol(react.transitional.element),
+        "_owner": null,
+        "_store": {},
+        "key": "63",
+        "props": {
+          "children": [
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": "61",
+              "props": {
+                "data": "M 181.5 40 L 379 330 L 379 330 ",
+                "preventDefault": false,
+                "stroke": "#999",
+                "strokeWidth": 1,
+              },
+              "type": "Path",
+            },
+            {
+              "$$typeof": Symbol(react.transitional.element),
+              "_owner": null,
+              "_store": {},
+              "key": "62",
+              "props": {
+                "fill": "#999",
+                "pointerWidth": 10,
+                "points": [
+                  181.5,
+                  40,
+                  379,
+                  330,
+                ],
+                "preventDefault": false,
+                "strokeEnabled": false,
+              },
+              "type": "Arrow",
+            },
+          ],
+          "listening": false,
+          "ref": {
+            "current": null,
+          },
+        },
+        "type": "Group",
+      },
+    ],
+  },
+  "type": Symbol(react.fragment),
+}
 `;
 
 exports[`CSE Machine calculates correct layout for code sample 0 1`] = `
diff --git a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap
index b2d8868098..1279343f80 100644
--- a/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap
+++ b/src/features/sicp/parser/__tests__/__snapshots__/ParseJson.tsx.snap
@@ -1,418 +1,382 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Parse array no child successful 1`] = `null`;
+exports[`Parse array no child successful 1`] = `<DocumentFragment />`;
 
-exports[`Parse array one child successful 1`] = `"Mock Text"`;
+exports[`Parse array one child successful 1`] = `
+<DocumentFragment>
+  Mock Text
+</DocumentFragment>
+`;
 
 exports[`Parse array two child successful 1`] = `
-[
-  "Mock Text",
-  "Mock Text",
-]
+<DocumentFragment>
+  Mock TextMock Text
+</DocumentFragment>
 `;
 
 exports[`Parse epigraph EPIGRAPH with all successful 1`] = `
-<blockquote
-  className="bp5-blockquote sicp-epigraph"
->
-  Mock Text
-  <div
-    className="sicp-attribution"
+<DocumentFragment>
+  <blockquote
+    class="bp5-blockquote sicp-epigraph"
   >
-    -
-    Author
-    <i>
-      Title
-    </i>
-    2021
-  </div>
-</blockquote>
+    Mock Text
+    <div
+      class="sicp-attribution"
+    >
+      -Author
+      <i>
+        Title
+      </i>
+      2021
+    </div>
+  </blockquote>
+</DocumentFragment>
 `;
 
 exports[`Parse epigraph EPIGRAPH with author successful 1`] = `
-<blockquote
-  className="bp5-blockquote sicp-epigraph"
->
-  Mock Text
-  <div
-    className="sicp-attribution"
+<DocumentFragment>
+  <blockquote
+    class="bp5-blockquote sicp-epigraph"
   >
-    -
-    Author
-  </div>
-</blockquote>
+    Mock Text
+    <div
+      class="sicp-attribution"
+    >
+      -Author
+    </div>
+  </blockquote>
+</DocumentFragment>
 `;
 
 exports[`Parse epigraph EPIGRAPH with date successful 1`] = `
-<blockquote
-  className="bp5-blockquote sicp-epigraph"
->
-  Mock Text
-  <div
-    className="sicp-attribution"
+<DocumentFragment>
+  <blockquote
+    class="bp5-blockquote sicp-epigraph"
   >
-    -
-    2021
-  </div>
-</blockquote>
+    Mock Text
+    <div
+      class="sicp-attribution"
+    >
+      -2021
+    </div>
+  </blockquote>
+</DocumentFragment>
 `;
 
 exports[`Parse epigraph EPIGRAPH with none successful 1`] = `
-<blockquote
-  className="bp5-blockquote sicp-epigraph"
->
-  Mock Text
-</blockquote>
+<DocumentFragment>
+  <blockquote
+    class="bp5-blockquote sicp-epigraph"
+  >
+    Mock Text
+  </blockquote>
+</DocumentFragment>
 `;
 
 exports[`Parse epigraph EPIGRAPH with title successful 1`] = `
-<blockquote
-  className="bp5-blockquote sicp-epigraph"
->
-  Mock Text
-  <div
-    className="sicp-attribution"
+<DocumentFragment>
+  <blockquote
+    class="bp5-blockquote sicp-epigraph"
   >
-    -
-    <i>
-      Title
-    </i>
-  </div>
-</blockquote>
+    Mock Text
+    <div
+      class="sicp-attribution"
+    >
+      -
+      <i>
+        Title
+      </i>
+    </div>
+  </blockquote>
+</DocumentFragment>
 `;
 
 exports[`Parse exercise EXERCISE with solution successful 1`] = `
-<div
-  className="sicp-anchor-link-container"
->
+<DocumentFragment>
   <div
-    className="sicp-exercise bp5-card bp5-elevation-1"
+    class="sicp-anchor-link-container"
   >
-    <b />
-    <div />
     <div
-      className="sicp-button-container"
+      class="sicp-exercise bp5-card bp5-elevation-1"
     >
-      <button
-        className="bp5-button bp5-large sicp-show-solution-button"
-        disabled={false}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        type="button"
+      <b />
+      <div />
+      <div
+        class="sicp-button-container"
       >
-        <span
-          className="bp5-button-text"
+        <button
+          class="bp5-button bp5-large sicp-show-solution-button"
+          type="button"
         >
-          Show Solution
-        </span>
-      </button>
-    </div>
-    <div
-      className="bp5-collapse sicp-solution"
-      style={
-        {
-          "height": undefined,
-          "overflowY": undefined,
-          "transition": undefined,
-        }
-      }
-    >
+          <span
+            class="bp5-button-text"
+          >
+            Show Solution
+          </span>
+        </button>
+      </div>
       <div
-        aria-hidden={true}
-        className="bp5-collapse-body"
-        style={
-          {
-            "transform": "translateY(-undefinedpx)",
-            "transition": undefined,
-          }
-        }
-      />
+        class="bp5-collapse sicp-solution"
+      >
+        <div
+          aria-hidden="true"
+          class="bp5-collapse-body"
+          style="transform: translateY(-undefinedpx);"
+        />
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Parse exercise EXERCISE without solution successful 1`] = `
-<div
-  className="sicp-anchor-link-container"
->
+<DocumentFragment>
   <div
-    className="sicp-exercise bp5-card bp5-elevation-1"
+    class="sicp-anchor-link-container"
   >
-    <b>
-      Title
-    </b>
-    <div>
-      Mock Text
-    </div>
     <div
-      className="sicp-button-container"
+      class="sicp-exercise bp5-card bp5-elevation-1"
     >
-      <button
-        className="bp5-button bp5-large sicp-show-solution-button"
-        disabled={false}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        type="button"
+      <b>
+        Title
+      </b>
+      <div>
+        Mock Text
+      </div>
+      <div
+        class="sicp-button-container"
       >
-        <span
-          className="bp5-button-text"
+        <button
+          class="bp5-button bp5-large sicp-show-solution-button"
+          type="button"
         >
-          Show Solution
-        </span>
-      </button>
-    </div>
-    <div
-      className="bp5-collapse sicp-solution"
-      style={
-        {
-          "height": undefined,
-          "overflowY": undefined,
-          "transition": undefined,
-        }
-      }
-    >
+          <span
+            class="bp5-button-text"
+          >
+            Show Solution
+          </span>
+        </button>
+      </div>
       <div
-        aria-hidden={true}
-        className="bp5-collapse-body"
-        style={
-          {
-            "transform": "translateY(-undefinedpx)",
-            "transition": undefined,
-          }
-        }
-      />
+        class="bp5-collapse sicp-solution"
+      >
+        <div
+          aria-hidden="true"
+          class="bp5-collapse-body"
+          style="transform: translateY(-undefinedpx);"
+        />
+      </div>
     </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Parse figures FIGURE with image and scale successful 1`] = `
-<div
-  className="sicp-anchor-link-container"
->
-  <a
-    className="sicp-anchor-link"
-    data-discover="true"
-    href="/id"
-    onClick={[Function]}
-    style={
-      {
-        "top": 36,
-      }
-    }
+<DocumentFragment>
+  <div
+    class="sicp-anchor-link-container"
   >
-    <span
-      aria-hidden={true}
-      className="bp5-icon bp5-icon-link"
+    <a
+      class="sicp-anchor-link"
+      data-discover="true"
+      href="/id"
+      style="top: 36px;"
     >
-      <svg
-        data-icon="link"
-        height={16}
-        role="img"
-        viewBox="0 0 16 16"
-        width={16}
+      <span
+        aria-hidden="true"
+        class="bp5-icon bp5-icon-link"
       >
-        <path
-          d="M4.99 11.99c.28 0 .53-.11.71-.29l6-6a1.003 1.003 0 00-1.42-1.42l-6 6a1.003 1.003 0 00.71 1.71zm3.85-2.02L6.4 12.41l-1 1-.01-.01c-.36.36-.85.6-1.4.6-1.1 0-2-.9-2-2 0-.55.24-1.04.6-1.4l-.01-.01 1-1 2.44-2.44c-.33-.1-.67-.16-1.03-.16-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.73.72-1.19 1.71-1.19 2.81 0 2.21 1.79 4 4 4 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02c.73-.72 1.19-1.71 1.19-2.81 0-.35-.06-.69-.15-1.02zm7.15-5.98c0-2.21-1.79-4-4-4-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.72.72-1.19 1.71-1.19 2.81 0 .36.06.69.15 1.02l2.44-2.44 1-1 .01.01c.36-.36.85-.6 1.4-.6 1.1 0 2 .9 2 2 0 .55-.24 1.04-.6 1.4l.01.01-1 1-2.43 2.45c.33.09.67.15 1.02.15 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02a3.92 3.92 0 001.19-2.81z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
-  </a>
-  <div
-    className="sicp-figure"
-  >
-    <img
-      alt="id"
-      src="https://source-academy.github.io/sicp/sicp.png"
-      width="50%"
-    />
-    <h5
-      className="sicp-caption"
+        <svg
+          data-icon="link"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M4.99 11.99c.28 0 .53-.11.71-.29l6-6a1.003 1.003 0 00-1.42-1.42l-6 6a1.003 1.003 0 00.71 1.71zm3.85-2.02L6.4 12.41l-1 1-.01-.01c-.36.36-.85.6-1.4.6-1.1 0-2-.9-2-2 0-.55.24-1.04.6-1.4l-.01-.01 1-1 2.44-2.44c-.33-.1-.67-.16-1.03-.16-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.73.72-1.19 1.71-1.19 2.81 0 2.21 1.79 4 4 4 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02c.73-.72 1.19-1.71 1.19-2.81 0-.35-.06-.69-.15-1.02zm7.15-5.98c0-2.21-1.79-4-4-4-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.72.72-1.19 1.71-1.19 2.81 0 .36.06.69.15 1.02l2.44-2.44 1-1 .01.01c.36-.36.85-.6 1.4-.6 1.1 0 2 .9 2 2 0 .55-.24 1.04-.6 1.4l.01.01-1 1-2.43 2.45c.33.09.67.15 1.02.15 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02a3.92 3.92 0 001.19-2.81z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </a>
+    <div
+      class="sicp-figure"
     >
-      name
-      Mock Text
-    </h5>
+      <img
+        alt="id"
+        src="https://source-academy.github.io/sicp/sicp.png"
+        width="50%"
+      />
+      <h5
+        class="sicp-caption"
+      >
+        nameMock Text
+      </h5>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Parse figures FIGURE with image successful 1`] = `
-<div
-  className="sicp-anchor-link-container"
->
-  <a
-    className="sicp-anchor-link"
-    data-discover="true"
-    href="/id"
-    onClick={[Function]}
-    style={
-      {
-        "top": 36,
-      }
-    }
+<DocumentFragment>
+  <div
+    class="sicp-anchor-link-container"
   >
-    <span
-      aria-hidden={true}
-      className="bp5-icon bp5-icon-link"
+    <a
+      class="sicp-anchor-link"
+      data-discover="true"
+      href="/id"
+      style="top: 36px;"
     >
-      <svg
-        data-icon="link"
-        height={16}
-        role="img"
-        viewBox="0 0 16 16"
-        width={16}
+      <span
+        aria-hidden="true"
+        class="bp5-icon bp5-icon-link"
       >
-        <path
-          d="M4.99 11.99c.28 0 .53-.11.71-.29l6-6a1.003 1.003 0 00-1.42-1.42l-6 6a1.003 1.003 0 00.71 1.71zm3.85-2.02L6.4 12.41l-1 1-.01-.01c-.36.36-.85.6-1.4.6-1.1 0-2-.9-2-2 0-.55.24-1.04.6-1.4l-.01-.01 1-1 2.44-2.44c-.33-.1-.67-.16-1.03-.16-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.73.72-1.19 1.71-1.19 2.81 0 2.21 1.79 4 4 4 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02c.73-.72 1.19-1.71 1.19-2.81 0-.35-.06-.69-.15-1.02zm7.15-5.98c0-2.21-1.79-4-4-4-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.72.72-1.19 1.71-1.19 2.81 0 .36.06.69.15 1.02l2.44-2.44 1-1 .01.01c.36-.36.85-.6 1.4-.6 1.1 0 2 .9 2 2 0 .55-.24 1.04-.6 1.4l.01.01-1 1-2.43 2.45c.33.09.67.15 1.02.15 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02a3.92 3.92 0 001.19-2.81z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
-  </a>
-  <div
-    className="sicp-figure"
-  >
-    <img
-      alt="id"
-      src="https://source-academy.github.io/sicp/sicp.png"
-      width="100%"
-    />
-    <h5
-      className="sicp-caption"
+        <svg
+          data-icon="link"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M4.99 11.99c.28 0 .53-.11.71-.29l6-6a1.003 1.003 0 00-1.42-1.42l-6 6a1.003 1.003 0 00.71 1.71zm3.85-2.02L6.4 12.41l-1 1-.01-.01c-.36.36-.85.6-1.4.6-1.1 0-2-.9-2-2 0-.55.24-1.04.6-1.4l-.01-.01 1-1 2.44-2.44c-.33-.1-.67-.16-1.03-.16-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.73.72-1.19 1.71-1.19 2.81 0 2.21 1.79 4 4 4 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02c.73-.72 1.19-1.71 1.19-2.81 0-.35-.06-.69-.15-1.02zm7.15-5.98c0-2.21-1.79-4-4-4-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.72.72-1.19 1.71-1.19 2.81 0 .36.06.69.15 1.02l2.44-2.44 1-1 .01.01c.36-.36.85-.6 1.4-.6 1.1 0 2 .9 2 2 0 .55-.24 1.04-.6 1.4l.01.01-1 1-2.43 2.45c.33.09.67.15 1.02.15 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02a3.92 3.92 0 001.19-2.81z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </a>
+    <div
+      class="sicp-figure"
     >
-      name
-      Mock Text
-    </h5>
+      <img
+        alt="id"
+        src="https://source-academy.github.io/sicp/sicp.png"
+        width="100%"
+      />
+      <h5
+        class="sicp-caption"
+      >
+        nameMock Text
+      </h5>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Parse figures FIGURE with snippet successful 1`] = `
-<div
-  className="sicp-anchor-link-container"
->
-  <a
-    className="sicp-anchor-link"
-    data-discover="true"
-    href="/id"
-    onClick={[Function]}
-    style={
-      {
-        "top": 36,
-      }
-    }
+<DocumentFragment>
+  <div
+    class="sicp-anchor-link-container"
   >
-    <span
-      aria-hidden={true}
-      className="bp5-icon bp5-icon-link"
+    <a
+      class="sicp-anchor-link"
+      data-discover="true"
+      href="/id"
+      style="top: 36px;"
     >
-      <svg
-        data-icon="link"
-        height={16}
-        role="img"
-        viewBox="0 0 16 16"
-        width={16}
+      <span
+        aria-hidden="true"
+        class="bp5-icon bp5-icon-link"
       >
-        <path
-          d="M4.99 11.99c.28 0 .53-.11.71-.29l6-6a1.003 1.003 0 00-1.42-1.42l-6 6a1.003 1.003 0 00.71 1.71zm3.85-2.02L6.4 12.41l-1 1-.01-.01c-.36.36-.85.6-1.4.6-1.1 0-2-.9-2-2 0-.55.24-1.04.6-1.4l-.01-.01 1-1 2.44-2.44c-.33-.1-.67-.16-1.03-.16-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.73.72-1.19 1.71-1.19 2.81 0 2.21 1.79 4 4 4 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02c.73-.72 1.19-1.71 1.19-2.81 0-.35-.06-.69-.15-1.02zm7.15-5.98c0-2.21-1.79-4-4-4-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.72.72-1.19 1.71-1.19 2.81 0 .36.06.69.15 1.02l2.44-2.44 1-1 .01.01c.36-.36.85-.6 1.4-.6 1.1 0 2 .9 2 2 0 .55-.24 1.04-.6 1.4l.01.01-1 1-2.43 2.45c.33.09.67.15 1.02.15 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02a3.92 3.92 0 001.19-2.81z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
-  </a>
-  <div
-    className="sicp-figure"
-  >
-    <div>
-      Code Snippet
-    </div>
-    <h5
-      className="sicp-caption"
+        <svg
+          data-icon="link"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M4.99 11.99c.28 0 .53-.11.71-.29l6-6a1.003 1.003 0 00-1.42-1.42l-6 6a1.003 1.003 0 00.71 1.71zm3.85-2.02L6.4 12.41l-1 1-.01-.01c-.36.36-.85.6-1.4.6-1.1 0-2-.9-2-2 0-.55.24-1.04.6-1.4l-.01-.01 1-1 2.44-2.44c-.33-.1-.67-.16-1.03-.16-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.73.72-1.19 1.71-1.19 2.81 0 2.21 1.79 4 4 4 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02c.73-.72 1.19-1.71 1.19-2.81 0-.35-.06-.69-.15-1.02zm7.15-5.98c0-2.21-1.79-4-4-4-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.72.72-1.19 1.71-1.19 2.81 0 .36.06.69.15 1.02l2.44-2.44 1-1 .01.01c.36-.36.85-.6 1.4-.6 1.1 0 2 .9 2 2 0 .55-.24 1.04-.6 1.4l.01.01-1 1-2.43 2.45c.33.09.67.15 1.02.15 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02a3.92 3.92 0 001.19-2.81z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </a>
+    <div
+      class="sicp-figure"
     >
-      name
-      Mock Text
-    </h5>
+      <div>
+        Code Snippet
+      </div>
+      <h5
+        class="sicp-caption"
+      >
+        nameMock Text
+      </h5>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Parse figures FIGURE with table successful 1`] = `
-<div
-  className="sicp-anchor-link-container"
->
-  <a
-    className="sicp-anchor-link"
-    data-discover="true"
-    href="/id"
-    onClick={[Function]}
-    style={
-      {
-        "top": 36,
-      }
-    }
+<DocumentFragment>
+  <div
+    class="sicp-anchor-link-container"
   >
-    <span
-      aria-hidden={true}
-      className="bp5-icon bp5-icon-link"
+    <a
+      class="sicp-anchor-link"
+      data-discover="true"
+      href="/id"
+      style="top: 36px;"
     >
-      <svg
-        data-icon="link"
-        height={16}
-        role="img"
-        viewBox="0 0 16 16"
-        width={16}
+      <span
+        aria-hidden="true"
+        class="bp5-icon bp5-icon-link"
       >
-        <path
-          d="M4.99 11.99c.28 0 .53-.11.71-.29l6-6a1.003 1.003 0 00-1.42-1.42l-6 6a1.003 1.003 0 00.71 1.71zm3.85-2.02L6.4 12.41l-1 1-.01-.01c-.36.36-.85.6-1.4.6-1.1 0-2-.9-2-2 0-.55.24-1.04.6-1.4l-.01-.01 1-1 2.44-2.44c-.33-.1-.67-.16-1.03-.16-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.73.72-1.19 1.71-1.19 2.81 0 2.21 1.79 4 4 4 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02c.73-.72 1.19-1.71 1.19-2.81 0-.35-.06-.69-.15-1.02zm7.15-5.98c0-2.21-1.79-4-4-4-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.72.72-1.19 1.71-1.19 2.81 0 .36.06.69.15 1.02l2.44-2.44 1-1 .01.01c.36-.36.85-.6 1.4-.6 1.1 0 2 .9 2 2 0 .55-.24 1.04-.6 1.4l.01.01-1 1-2.43 2.45c.33.09.67.15 1.02.15 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02a3.92 3.92 0 001.19-2.81z"
-          fillRule="evenodd"
-        />
-      </svg>
-    </span>
-  </a>
-  <div
-    className="sicp-figure"
-  >
-    <table>
-      <tbody>
-        <tr>
-          <td>
-            Mock Text
-          </td>
-          <td>
-            Mock Text
-          </td>
-        </tr>
-        <tr>
-          <td>
-            Mock Text
-          </td>
-          <td>
-            Mock Text
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    <h5
-      className="sicp-caption"
+        <svg
+          data-icon="link"
+          height="16"
+          role="img"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            d="M4.99 11.99c.28 0 .53-.11.71-.29l6-6a1.003 1.003 0 00-1.42-1.42l-6 6a1.003 1.003 0 00.71 1.71zm3.85-2.02L6.4 12.41l-1 1-.01-.01c-.36.36-.85.6-1.4.6-1.1 0-2-.9-2-2 0-.55.24-1.04.6-1.4l-.01-.01 1-1 2.44-2.44c-.33-.1-.67-.16-1.03-.16-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.73.72-1.19 1.71-1.19 2.81 0 2.21 1.79 4 4 4 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02c.73-.72 1.19-1.71 1.19-2.81 0-.35-.06-.69-.15-1.02zm7.15-5.98c0-2.21-1.79-4-4-4-1.1 0-2.09.46-2.81 1.19l-.02-.02-1 1 .02.02c-.72.72-1.19 1.71-1.19 2.81 0 .36.06.69.15 1.02l2.44-2.44 1-1 .01.01c.36-.36.85-.6 1.4-.6 1.1 0 2 .9 2 2 0 .55-.24 1.04-.6 1.4l.01.01-1 1-2.43 2.45c.33.09.67.15 1.02.15 1.1 0 2.09-.46 2.81-1.19l.02.02 1-1-.02-.02a3.92 3.92 0 001.19-2.81z"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </a>
+    <div
+      class="sicp-figure"
     >
-      name
-      Mock Text
-    </h5>
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              Mock Text
+            </td>
+            <td>
+              Mock Text
+            </td>
+          </tr>
+          <tr>
+            <td>
+              Mock Text
+            </td>
+            <td>
+              Mock Text
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <h5
+        class="sicp-caption"
+      >
+        nameMock Text
+      </h5>
+    </div>
   </div>
-</div>
+</DocumentFragment>
 `;
 
 exports[`Parse footnote DISPLAYFOOTNOTE count is 1 successful 1`] = `
-[
-  <hr />,
+<DocumentFragment>
+  <hr />
   <div
-    className="sicp-footnote"
+    class="sicp-footnote"
   >
     <div />
     <a
@@ -421,237 +385,411 @@ exports[`Parse footnote DISPLAYFOOTNOTE count is 1 successful 1`] = `
       [1] 
     </a>
     Mock Text
-  </div>,
-]
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Parse footnote DISPLAYFOOTNOTE count is 2 successful 1`] = `
-<div
-  className="sicp-footnote"
->
-  <div />
-  <a
-    href=""
+<DocumentFragment>
+  <div
+    class="sicp-footnote"
   >
-    [2] 
-  </a>
-  Mock Text
-</div>
+    <div />
+    <a
+      href=""
+    >
+      [2] 
+    </a>
+    Mock Text
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Parse heading SUBHEADING  successful 1`] = `
-<div
-  className="sicp-anchor-link-container"
->
-  <h2
-    className="bp5-heading"
+<DocumentFragment>
+  <div
+    class="sicp-anchor-link-container"
   >
-    Mock Text
-  </h2>
-</div>
+    <h2
+      class="bp5-heading"
+    >
+      Mock Text
+    </h2>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Parse heading SUBSUBHEADING  successful 1`] = `
-<div
-  className="sicp-anchor-link-container"
->
-  <h4
-    className="bp5-heading"
+<DocumentFragment>
+  <div
+    class="sicp-anchor-link-container"
   >
-    <br />
-    Mock Text
-  </h4>
-</div>
+    <h4
+      class="bp5-heading"
+    >
+      <br />
+      Mock Text
+    </h4>
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Parse latex LATEX block successful 1`] = `
-<span
-  className="__Latex__"
-  dangerouslySetInnerHTML={
-    {
-      "__html": "<span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>t</mi><mi>e</mi><mi>s</mi><mi>t</mi></mrow><annotation encoding="application/x-tex">test</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6151em;"></span><span class="mord mathnormal">t</span><span class="mord mathnormal">es</span><span class="mord mathnormal">t</span></span></span></span></span>",
-    }
-  }
-/>
+<DocumentFragment>
+  <span
+    class="__Latex__"
+  >
+    <span
+      class="katex-display"
+    >
+      <span
+        class="katex"
+      >
+        <span
+          class="katex-mathml"
+        >
+          <math
+            display="block"
+            xmlns="http://www.w3.org/1998/Math/MathML"
+          >
+            <semantics>
+              <mrow>
+                <mi>
+                  t
+                </mi>
+                <mi>
+                  e
+                </mi>
+                <mi>
+                  s
+                </mi>
+                <mi>
+                  t
+                </mi>
+              </mrow>
+              <annotation
+                encoding="application/x-tex"
+              >
+                test
+              </annotation>
+            </semantics>
+          </math>
+        </span>
+        <span
+          aria-hidden="true"
+          class="katex-html"
+        >
+          <span
+            class="base"
+          >
+            <span
+              class="strut"
+              style="height:0.6151em;"
+            />
+            <span
+              class="mord mathnormal"
+            >
+              t
+            </span>
+            <span
+              class="mord mathnormal"
+            >
+              es
+            </span>
+            <span
+              class="mord mathnormal"
+            >
+              t
+            </span>
+          </span>
+        </span>
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
 `;
 
 exports[`Parse latex LATEX inline successful 1`] = `
-<span
-  className="__Latex__"
-  dangerouslySetInnerHTML={
-    {
-      "__html": "<span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>t</mi><mi>e</mi><mi>s</mi><mi>t</mi></mrow><annotation encoding="application/x-tex">test</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6151em;"></span><span class="mord mathnormal">t</span><span class="mord mathnormal">es</span><span class="mord mathnormal">t</span></span></span></span>",
-    }
-  }
-/>
+<DocumentFragment>
+  <span
+    class="__Latex__"
+  >
+    <span
+      class="katex"
+    >
+      <span
+        class="katex-mathml"
+      >
+        <math
+          xmlns="http://www.w3.org/1998/Math/MathML"
+        >
+          <semantics>
+            <mrow>
+              <mi>
+                t
+              </mi>
+              <mi>
+                e
+              </mi>
+              <mi>
+                s
+              </mi>
+              <mi>
+                t
+              </mi>
+            </mrow>
+            <annotation
+              encoding="application/x-tex"
+            >
+              test
+            </annotation>
+          </semantics>
+        </math>
+      </span>
+      <span
+        aria-hidden="true"
+        class="katex-html"
+      >
+        <span
+          class="base"
+        >
+          <span
+            class="strut"
+            style="height:0.6151em;"
+          />
+          <span
+            class="mord mathnormal"
+          >
+            t
+          </span>
+          <span
+            class="mord mathnormal"
+          >
+            es
+          </span>
+          <span
+            class="mord mathnormal"
+          >
+            t
+          </span>
+        </span>
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
 `;
 
 exports[`Parse links FOOTNOTE_REF  successful 1`] = `
-<sup>
+<DocumentFragment>
+  <sup>
+    <a
+      data-discover="true"
+      href="/bad-link"
+    >
+      link
+    </a>
+  </sup>
+</DocumentFragment>
+`;
+
+exports[`Parse links LINK  successful 1`] = `
+<DocumentFragment>
   <a
-    data-discover="true"
-    href="/bad-link"
-    onClick={[Function]}
+    href="bad-link"
   >
     link
   </a>
-</sup>
-`;
-
-exports[`Parse links LINK  successful 1`] = `
-<a
-  href="bad-link"
->
-  link
-</a>
+</DocumentFragment>
 `;
 
 exports[`Parse links REF  successful 1`] = `
-<a
-  data-discover="true"
-  href="/bad-link"
-  onClick={[Function]}
->
-  link
-</a>
+<DocumentFragment>
+  <a
+    data-discover="true"
+    href="/bad-link"
+  >
+    link
+  </a>
+</DocumentFragment>
 `;
 
 exports[`Parse list OL  successful 1`] = `
-<ol
-  className="bp5-list"
->
-  <li>
-    Mock Text
-  </li>
-</ol>
+<DocumentFragment>
+  <ol
+    class="bp5-list"
+  >
+    <li>
+      Mock Text
+    </li>
+  </ol>
+</DocumentFragment>
 `;
 
 exports[`Parse list UL  successful 1`] = `
-<ul
-  className="bp5-list"
->
-  <li>
-    Mock Text
-  </li>
-</ul>
+<DocumentFragment>
+  <ul
+    class="bp5-list"
+  >
+    <li>
+      Mock Text
+    </li>
+  </ul>
+</DocumentFragment>
 `;
 
-exports[`Parse object no tag 1`] = `"Mock Text"`;
+exports[`Parse object no tag 1`] = `
+<DocumentFragment>
+  Mock Text
+</DocumentFragment>
+`;
 
-exports[`Parse object successful 1`] = `"Mock Text"`;
+exports[`Parse object successful 1`] = `
+<DocumentFragment>
+  Mock Text
+</DocumentFragment>
+`;
 
 exports[`Parse reference REFERENCE  successful 1`] = `
-<div
-  className="sicp-reference"
->
-  Mock Text
-</div>
+<DocumentFragment>
+  <div
+    class="sicp-reference"
+  >
+    Mock Text
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Parse snippet SNIPPET no eval successful 1`] = `
-<pre
-  className="bp5-code-block"
->
-  const a = 1;
+<DocumentFragment>
+  <pre
+    class="bp5-code-block"
+  >
+    const a = 1;
 a+1;
-</pre>
+  </pre>
+</DocumentFragment>
 `;
 
 exports[`Parse snippet SNIPPET with latex successful 1`] = `
-<pre
-  className="bp5-code-block"
->
-  <span
-    className="__Latex__"
-    dangerouslySetInnerHTML={
-      {
-        "__html": "const a = 1;
-a+1;",
-      }
-    }
-  />
-</pre>
+<DocumentFragment>
+  <pre
+    class="bp5-code-block"
+  >
+    <span
+      class="__Latex__"
+    >
+      const a = 1;
+a+1;
+    </span>
+  </pre>
+</DocumentFragment>
 `;
 
 exports[`Parse snippet SNIPPET with prepend successful 1`] = `
-<div>
-  Code Snippet
-</div>
+<DocumentFragment>
+  <div>
+    Code Snippet
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Parse snippet SNIPPET without prepend successful 1`] = `
-<div>
-  Code Snippet
-</div>
+<DocumentFragment>
+  <div>
+    Code Snippet
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Parse snippet SNIPPET without prepend with output successful 1`] = `
-<div>
-  Code Snippet
-</div>
+<DocumentFragment>
+  <div>
+    Code Snippet
+  </div>
+</DocumentFragment>
 `;
 
 exports[`Parse styling B  successful 1`] = `
-<b>
-  Mock Text
-</b>
+<DocumentFragment>
+  <b>
+    Mock Text
+  </b>
+</DocumentFragment>
 `;
 
 exports[`Parse styling EM  successful 1`] = `
-<em>
-  Mock Text
-</em>
+<DocumentFragment>
+  <em>
+    Mock Text
+  </em>
+</DocumentFragment>
 `;
 
 exports[`Parse styling JAVASCRIPTINLINE  successful 1`] = `
-<code
-  className="bp5-code"
-/>
+<DocumentFragment>
+  <code
+    class="bp5-code"
+  />
+</DocumentFragment>
 `;
 
-exports[`Parse styling META  successful 1`] = `<em />`;
+exports[`Parse styling META  successful 1`] = `
+<DocumentFragment>
+  <em />
+</DocumentFragment>
+`;
 
 exports[`Parse styling TT  successful 1`] = `
-<code
-  className="bp5-code"
->
-  Mock Text
-</code>
+<DocumentFragment>
+  <code
+    class="bp5-code"
+  >
+    Mock Text
+  </code>
+</DocumentFragment>
 `;
 
-exports[`Parse symbol BR  successful 1`] = `<br />`;
+exports[`Parse symbol BR  successful 1`] = `
+<DocumentFragment>
+  <br />
+</DocumentFragment>
+`;
 
 exports[`Parse table TABLE  successful 1`] = `
-<table>
-  <tbody>
-    <tr>
-      <td>
-        Mock Text
-      </td>
-      <td>
-        Mock Text
-      </td>
-    </tr>
-    <tr>
-      <td>
-        Mock Text
-      </td>
-      <td>
-        Mock Text
-      </td>
-    </tr>
-  </tbody>
-</table>
+<DocumentFragment>
+  <table>
+    <tbody>
+      <tr>
+        <td>
+          Mock Text
+        </td>
+        <td>
+          Mock Text
+        </td>
+      </tr>
+      <tr>
+        <td>
+          Mock Text
+        </td>
+        <td>
+          Mock Text
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</DocumentFragment>
 `;
 
 exports[`Parse title TITLE  successful 1`] = `
-<div
-  className="sicp-anchor-link-container"
->
-  <h1
-    className="bp5-heading"
+<DocumentFragment>
+  <div
+    class="sicp-anchor-link-container"
   >
-    Title
-  </h1>
-</div>
+    <h1
+      class="bp5-heading"
+    >
+      Title
+    </h1>
+  </div>
+</DocumentFragment>
 `;

From c8235b70ddc0954ac74f08c0ad3c2bd334561cac Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 02:33:43 +0800
Subject: [PATCH 15/16] Update Repl tests

---
 src/commons/repl/__tests__/Repl.tsx           |  41 +-
 .../__tests__/__snapshots__/Repl.tsx.snap     | 389 +++++++++---------
 2 files changed, 211 insertions(+), 219 deletions(-)

diff --git a/src/commons/repl/__tests__/Repl.tsx b/src/commons/repl/__tests__/Repl.tsx
index da77d4c895..298e79c38b 100644
--- a/src/commons/repl/__tests__/Repl.tsx
+++ b/src/commons/repl/__tests__/Repl.tsx
@@ -1,6 +1,5 @@
 import { Chapter, Variant } from 'js-slang/dist/types';
 import { ExternalLibraryName } from 'src/commons/application/types/ExternalTypes';
-import { shallowRender } from 'src/commons/utils/TestUtils';
 
 import {
   CodeOutput,
@@ -34,7 +33,7 @@ const mockErrorOutput: ErrorOutput = {
   consoleLogs: []
 };
 
-test('Repl renders correctly', () => {
+test('Repl renders correctly', async () => {
   const props = {
     handleBrowseHistoryDown: () => {},
     handleBrowseHistoryUp: () => {},
@@ -49,56 +48,48 @@ test('Repl renders correctly', () => {
     replButtons: []
   };
   const app = <Repl {...props} />;
-  const tree = shallowRender(app);
-  expect(tree).toMatchSnapshot();
+  expect(app).toMatchSnapshot();
 });
 
-test('Code output renders correctly', () => {
+test('Code output renders correctly', async () => {
   const app = <Output {...{ output: mockCodeOutput }} />;
-  const tree = shallowRender(app);
-  expect(tree).toMatchSnapshot();
+  expect(app).toMatchSnapshot();
 });
 
-test('Running output renders correctly', () => {
+test('Running output renders correctly', async () => {
   const app = <Output {...{ output: mockRunningOutput }} />;
-  const tree = shallowRender(app);
-  expect(tree).toMatchSnapshot();
+  expect(app).toMatchSnapshot();
 });
 
-test('Result output (no consoleLogs) renders correctly', () => {
+test('Result output (no consoleLogs) renders correctly', async () => {
   const app = <Output {...{ output: mockResultOutput }} />;
-  const tree = shallowRender(app);
-  expect(tree).toMatchSnapshot();
+  expect(app).toMatchSnapshot();
 });
 
-test('Result output (with consoleLogs) renders correctly', () => {
+test('Result output (with consoleLogs) renders correctly', async () => {
   const props = {
     ...mockResultOutput,
     consoleLogs: mockRunningOutput.consoleLogs
   };
   const app = <Output {...{ output: props }} />;
-  const tree = shallowRender(app);
-  expect(tree).toMatchSnapshot();
+  expect(app).toMatchSnapshot();
 });
 
-test('Error output (no consoleLogs) renders correctly', () => {
+test('Error output (no consoleLogs) renders correctly', async () => {
   const app = <Output {...{ output: mockErrorOutput }} />;
-  const tree = shallowRender(app);
-  expect(tree).toMatchSnapshot();
+  expect(app).toMatchSnapshot();
 });
 
-test('Error output (with consoleLogs) renders correctly', () => {
+test('Error output (with consoleLogs) renders correctly', async () => {
   const props = {
     ...mockErrorOutput,
     consoleLogs: mockRunningOutput.consoleLogs
   };
   const app = <Output {...{ output: props }} />;
-  const tree = shallowRender(app);
-  expect(tree).toMatchSnapshot();
+  expect(app).toMatchSnapshot();
 });
 
-test('Empty output renders an empty card', () => {
+test('Empty output renders an empty card', async () => {
   const app = <Output {...{ output: {} as InterpreterOutput }} />;
-  const tree = shallowRender(app);
-  expect(tree).toMatchSnapshot();
+  expect(app).toMatchSnapshot();
 });
diff --git a/src/commons/repl/__tests__/__snapshots__/Repl.tsx.snap b/src/commons/repl/__tests__/__snapshots__/Repl.tsx.snap
index 7cfdeab24a..e23204dbe7 100644
--- a/src/commons/repl/__tests__/__snapshots__/Repl.tsx.snap
+++ b/src/commons/repl/__tests__/__snapshots__/Repl.tsx.snap
@@ -1,210 +1,202 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Code output renders correctly 1`] = `
-<Blueprint5.Card>
-  <ForwardRef
-    className="code-output"
-  >
-    display('');
-  </ForwardRef>
-</Blueprint5.Card>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": null,
+  "props": {
+    "output": {
+      "type": "code",
+      "value": "display('');",
+    },
+  },
+  "type": [Function],
+}
 `;
 
 exports[`Empty output renders an empty card 1`] = `
-<Blueprint5.Card>
-  ''
-</Blueprint5.Card>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": null,
+  "props": {
+    "output": {},
+  },
+  "type": [Function],
+}
 `;
 
 exports[`Error output (no consoleLogs) renders correctly 1`] = `
-<Blueprint5.Card>
-  <ForwardRef
-    className="error-output"
-  >
-    Expected , got .
-  </ForwardRef>
-</Blueprint5.Card>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": null,
+  "props": {
+    "output": {
+      "consoleLogs": [],
+      "errors": [
+        TypeError {
+          "chapter": 4,
+          "expected": "",
+          "got": "",
+          "location": {
+            "end": {
+              "column": -1,
+              "line": -1,
+            },
+            "start": {
+              "column": -1,
+              "line": -1,
+            },
+          },
+          "severity": "Error",
+          "side": "",
+          "type": "Runtime",
+        },
+      ],
+      "type": "errors",
+    },
+  },
+  "type": [Function],
+}
 `;
 
 exports[`Error output (with consoleLogs) renders correctly 1`] = `
-<Blueprint5.Card>
-  <ForwardRef
-    className="log-output"
-  >
-    a
-bb
-cccccccccccccccccccccccccccccccc
-d
-  </ForwardRef>
-  <br />
-  <ForwardRef
-    className="error-output"
-  >
-    Expected , got .
-  </ForwardRef>
-</Blueprint5.Card>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": null,
+  "props": {
+    "output": {
+      "consoleLogs": [
+        "a",
+        "bb",
+        "cccccccccccccccccccccccccccccccc",
+        "d",
+      ],
+      "errors": [
+        TypeError {
+          "chapter": 4,
+          "expected": "",
+          "got": "",
+          "location": {
+            "end": {
+              "column": -1,
+              "line": -1,
+            },
+            "start": {
+              "column": -1,
+              "line": -1,
+            },
+          },
+          "severity": "Error",
+          "side": "",
+          "type": "Runtime",
+        },
+      ],
+      "type": "errors",
+    },
+  },
+  "type": [Function],
+}
 `;
 
 exports[`Repl renders correctly 1`] = `
-<div
-  className="Repl"
-  style={
-    {
-      "display": undefined,
-    }
-  }
->
-  <div
-    className="repl-output-parent"
-  >
-    <Output
-      isHtml={false}
-      output={
-        {
-          "consoleLogs": [],
-          "type": "result",
-          "value": 42,
-        }
-      }
-      usingSubst={false}
-    />
-    <Output
-      isHtml={false}
-      output={
-        {
-          "type": "code",
-          "value": "display('');",
-        }
-      }
-      usingSubst={false}
-    />
-    <Output
-      isHtml={false}
-      output={
-        {
-          "consoleLogs": [],
-          "errors": [
-            TypeError {
-              "chapter": 4,
-              "expected": "",
-              "got": "",
-              "location": {
-                "end": {
-                  "column": -1,
-                  "line": -1,
-                },
-                "start": {
-                  "column": -1,
-                  "line": -1,
-                },
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": null,
+  "props": {
+    "externalLibrary": "NONE",
+    "handleBrowseHistoryDown": [Function],
+    "handleBrowseHistoryUp": [Function],
+    "handleReplEval": [Function],
+    "handleReplOutputClear": [Function],
+    "handleReplValueChange": [Function],
+    "output": [
+      {
+        "consoleLogs": [],
+        "type": "result",
+        "value": 42,
+      },
+      {
+        "type": "code",
+        "value": "display('');",
+      },
+      {
+        "consoleLogs": [],
+        "errors": [
+          TypeError {
+            "chapter": 4,
+            "expected": "",
+            "got": "",
+            "location": {
+              "end": {
+                "column": -1,
+                "line": -1,
+              },
+              "start": {
+                "column": -1,
+                "line": -1,
               },
-              "severity": "Error",
-              "side": "",
-              "type": "Runtime",
-            },
-          ],
-          "type": "errors",
-        }
-      }
-      usingSubst={false}
-    />
-    <Output
-      isHtml={false}
-      output={
-        {
-          "consoleLogs": [
-            "a",
-            "bb",
-            "cccccccccccccccccccccccccccccccc",
-            "d",
-          ],
-          "type": "running",
-        }
-      }
-      usingSubst={false}
-    />
-    <Blueprint5.Card
-      className="repl-input-parent row"
-    >
-      <ReplInput
-        externalLibrary="NONE"
-        handleBrowseHistoryDown={[Function]}
-        handleBrowseHistoryUp={[Function]}
-        handleReplEval={[Function]}
-        handleReplOutputClear={[Function]}
-        handleReplValueChange={[Function]}
-        output={
-          [
-            {
-              "consoleLogs": [],
-              "type": "result",
-              "value": 42,
-            },
-            {
-              "type": "code",
-              "value": "display('');",
-            },
-            {
-              "consoleLogs": [],
-              "errors": [
-                TypeError {
-                  "chapter": 4,
-                  "expected": "",
-                  "got": "",
-                  "location": {
-                    "end": {
-                      "column": -1,
-                      "line": -1,
-                    },
-                    "start": {
-                      "column": -1,
-                      "line": -1,
-                    },
-                  },
-                  "severity": "Error",
-                  "side": "",
-                  "type": "Runtime",
-                },
-              ],
-              "type": "errors",
-            },
-            {
-              "consoleLogs": [
-                "a",
-                "bb",
-                "cccccccccccccccccccccccccccccccc",
-                "d",
-              ],
-              "type": "running",
             },
-          ]
-        }
-        replButtons={[]}
-        replValue=""
-        sourceChapter={1}
-        sourceVariant="default"
-      />
-    </Blueprint5.Card>
-  </div>
-</div>
+            "severity": "Error",
+            "side": "",
+            "type": "Runtime",
+          },
+        ],
+        "type": "errors",
+      },
+      {
+        "consoleLogs": [
+          "a",
+          "bb",
+          "cccccccccccccccccccccccccccccccc",
+          "d",
+        ],
+        "type": "running",
+      },
+    ],
+    "replButtons": [],
+    "replValue": "",
+    "sourceChapter": 1,
+    "sourceVariant": "default",
+  },
+  "type": [Function],
+}
 `;
 
 exports[`Result output (no consoleLogs) renders correctly 1`] = `
-<ResultOutputDisplay
-  output={
-    {
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": null,
+  "props": {
+    "output": {
       "consoleLogs": [],
       "type": "result",
       "value": 42,
-    }
-  }
-/>
+    },
+  },
+  "type": [Function],
+}
 `;
 
 exports[`Result output (with consoleLogs) renders correctly 1`] = `
-<ResultOutputDisplay
-  output={
-    {
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": null,
+  "props": {
+    "output": {
       "consoleLogs": [
         "a",
         "bb",
@@ -213,20 +205,29 @@ exports[`Result output (with consoleLogs) renders correctly 1`] = `
       ],
       "type": "result",
       "value": 42,
-    }
-  }
-/>
+    },
+  },
+  "type": [Function],
+}
 `;
 
 exports[`Running output renders correctly 1`] = `
-<Blueprint5.Card>
-  <ForwardRef
-    className="log-output"
-  >
-    a
-bb
-cccccccccccccccccccccccccccccccc
-d
-  </ForwardRef>
-</Blueprint5.Card>
+{
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": {},
+  "key": null,
+  "props": {
+    "output": {
+      "consoleLogs": [
+        "a",
+        "bb",
+        "cccccccccccccccccccccccccccccccc",
+        "d",
+      ],
+      "type": "running",
+    },
+  },
+  "type": [Function],
+}
 `;

From 04a6f4201ca213c10c268c448033390ce98fcf44 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Tue, 15 Jul 2025 02:34:47 +0800
Subject: [PATCH 16/16] Update editor tests

---
 src/commons/editor/__tests__/Editor.tsx       |  14 +-
 .../__tests__/__snapshots__/Editor.tsx.snap   | 121 +++++++++++++++---
 2 files changed, 115 insertions(+), 20 deletions(-)

diff --git a/src/commons/editor/__tests__/Editor.tsx b/src/commons/editor/__tests__/Editor.tsx
index a3c04a84f0..d241aeff3a 100644
--- a/src/commons/editor/__tests__/Editor.tsx
+++ b/src/commons/editor/__tests__/Editor.tsx
@@ -1,9 +1,11 @@
-import { shallowRender } from 'src/commons/utils/TestUtils';
+import { Provider } from 'react-redux';
+import { renderTree } from 'src/commons/utils/TestUtils';
+import { createStore } from 'src/pages/createStore';
 
 import Editor, { EditorProps } from '../Editor';
 import { Position } from '../EditorTypes';
 
-test('Editor renders correctly', () => {
+test('Editor renders correctly', async () => {
   const props: EditorProps = {
     editorTabIndex: 0,
     breakpoints: [],
@@ -20,7 +22,11 @@ test('Editor renders correctly', () => {
     handleUpdateHasUnsavedChanges: hasUnsavedChanges => {},
     handlePromptAutocomplete: (row: number, col: number, callback: any) => {}
   };
-  const Element: React.FC = () => <Editor {...props} />;
-  const tree = shallowRender(<Element />);
+  const Element: React.FC = () => (
+    <Provider store={createStore()}>
+      <Editor {...props} />
+    </Provider>
+  );
+  const tree = await renderTree(<Element />);
   expect(tree).toMatchSnapshot();
 });
diff --git a/src/commons/editor/__tests__/__snapshots__/Editor.tsx.snap b/src/commons/editor/__tests__/__snapshots__/Editor.tsx.snap
index 7303f74f8e..d0c63d76ab 100644
--- a/src/commons/editor/__tests__/__snapshots__/Editor.tsx.snap
+++ b/src/commons/editor/__tests__/__snapshots__/Editor.tsx.snap
@@ -1,20 +1,109 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Editor renders correctly 1`] = `
-<Editor
-  breakpoints={[]}
-  editorSessionId=""
-  editorTabIndex={0}
-  editorValue=""
-  handleDeclarationNavigate={[Function]}
-  handleEditorEval={[Function]}
-  handleEditorUpdateBreakpoints={[Function]}
-  handleEditorValueChange={[Function]}
-  handlePromptAutocomplete={[Function]}
-  handleSetSharedbConnected={[Function]}
-  handleUpdateHasUnsavedChanges={[Function]}
-  highlightedLines={[]}
-  isEditorAutorun={false}
-  sessionDetails={null}
-/>
+<DocumentFragment>
+  <div
+    class="Editor bp5-card bp5-elevation-0"
+  >
+    <div
+      class="row editor-react-ace"
+      data-testid="Editor"
+    >
+      <div
+        class=" ace_editor ace_hidpi ace-source ace_dark react-ace"
+        id="ace-editor"
+        style="width: 100%; height: 100%; font-size: 17px; font-family: 'Inconsolata', 'Consolas', monospace;"
+      >
+        <textarea
+          aria-autocomplete="both"
+          aria-haspopup="false"
+          autocapitalize="off"
+          autocorrect="off"
+          class="ace_text-input"
+          role="textbox"
+          spellcheck="false"
+          style="opacity: 0; font-size: 1px;"
+          wrap="off"
+        />
+        <div
+          aria-hidden="true"
+          class="ace_gutter"
+        >
+          <div
+            class="ace_layer ace_gutter-layer ace_folding-enabled"
+            style="height: 1000000px;"
+          />
+        </div>
+        <div
+          class="ace_scroller"
+          style="line-height: 0px;"
+        >
+          <div
+            class="ace_content"
+          >
+            <div
+              class="ace_layer ace_print-margin-layer"
+            >
+              <div
+                class="ace_print-margin"
+                style="left: 4px; visibility: visible;"
+              />
+            </div>
+            <div
+              class="ace_layer ace_marker-layer"
+            />
+            <div
+              class="ace_layer ace_text-layer"
+              style="height: 1000000px; margin: 0px 4px;"
+            />
+            <div
+              class="ace_layer ace_marker-layer"
+            />
+            <div
+              class="ace_layer ace_cursor-layer ace_hidden-cursors"
+            >
+              <div
+                class="ace_cursor"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="ace_scrollbar ace_scrollbar-v"
+          style="display: none; width: 20px;"
+        >
+          <div
+            class="ace_scrollbar-inner"
+            style="width: 20px;"
+          >
+             
+          </div>
+        </div>
+        <div
+          class="ace_scrollbar ace_scrollbar-h"
+          style="display: none; height: 20px;"
+        >
+          <div
+            class="ace_scrollbar-inner"
+            style="height: 20px;"
+          >
+             
+          </div>
+        </div>
+        <div
+          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+        >
+          <div
+            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+          />
+          <div
+            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+          >
+            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
 `;