resolves websocket errors in tests

src/components/TaskAnalysisTable/TaskAnalysisTable.jsx

@@ -107,6 +107,13 @@
 
   debouncedUpdateTasks = _debounce(this.updateTasks, 100);
 
+  componentWillUnmount() {
+    // Cancel any pending debounced calls
+    if (this.debouncedUpdateTasks) {
+      this.debouncedUpdateTasks.cancel();
+    }
+  }
+
   updateTasks(tableState) {
     const sortCriteria = {
       sortBy: tableState.sorted[0].id,
@@ -128,7 +135,9 @@
 
     // Use pick instead of cloneDeep, as cloning the entire tableState seems to cause an error
     // when any column with a "makeInvertable" header is present.
-    this.setState({ lastTableState: _pick(tableState, ["sorted", "filtered", "page"]) });
+    this.setState({
+      lastTableState: _pick(tableState, ["sorted", "filtered", "page"]),
+    });
   }
 
   configureColumns() {
@@ -228,7 +237,10 @@
     }
 
     if (this.props.criteria?.filters) {
-      defaultFiltered = _map(this.props.criteria.filters, (value, key) => ({ id: key, value }));
+      defaultFiltered = _map(this.props.criteria.filters, (value, key) => ({
+        id: key,
+        value,
+      }));
     }
 
     const manager = AsManager(this.props.user);
@@ -725,7 +737,11 @@
         {_map(row._original.additionalReviewers, (reviewer, index) => {
           return (
             <Fragment key={reviewer.username + "-" + index}>
-              <span style={{ color: AsColoredHashable(reviewer.username).hashColor }}>
+              <span
+                style={{
+                  color: AsColoredHashable(reviewer.username).hashColor,
+                }}
+              >
                 {reviewer.username}
               </span>
               {index + 1 !== row._original.additionalReviewers?.length ? ", " : ""}

src/services/Editor/Editor.test.js

@@ -23,7 +23,7 @@ let northEastCorner = null;
 let centerPoint = null;
 let mapBounds = null;
 
-beforeEach(() => {
+beforeAll(() => {
   global.WebSocket = class MockWebSocket {
     constructor() {
       this.onopen = null;
@@ -35,7 +35,13 @@ beforeEach(() => {
     send() {}
     close() {}
   };
+});
+
+afterAll(() => {
+  delete global.WebSocket;
+});
 
+beforeEach(() => {
   dispatch = vi.fn();
 
   basicFeature = {
@@ -134,10 +140,6 @@ beforeEach(() => {
   };
 });
 
-afterEach(() => {
-  delete global.WebSocket;
-});
-
 describe("osmObjectParams", () => {
   beforeEach(() => {
     pointFeature.properties.osmid = "123";

src/services/Server/WebSocketClient.js

@@ -7,6 +7,7 @@
     this.subscriptionHandlers = new Map();
     this.serverSubscriptions = new Map();
     this.queuedMessages = [];
+    this.isCleanedUp = false;
 
     this.connect();
   }
@@ -88,19 +89,45 @@
    * @private
    */
   open() {
+    if (this.isCleanedUp) {
+      return;
+    }
+
     this.reconnectionHandle = null;
     if (this.websocket) {
       this.websocket.close();
     }
 
-    this.websocket = new WebSocket(window.env.REACT_APP_MAP_ROULETTE_SERVER_WEBSOCKET_URL);
-    this.websocket.onopen = (e) => this.handleOpen(e);
-    this.websocket.onmessage = (e) => this.handleMessage(e);
-    this.websocket.onclose = (e) => this.handleClose(e);
+    // Check if we're in a test environment and use a mock WebSocket if needed
+    const WebSocketClass =
+      typeof WebSocket !== "undefined"
+        ? WebSocket
+        : class MockWebSocket {
+            constructor() {
+              this.OPEN = 1;
+              this.readyState = this.OPEN;
+            }
+            close() {}
+            send() {}
+          };
+
+    // Use a default URL if window.env is not available (test environment)
+    const wsUrl =
+      (typeof window !== "undefined" && window.env?.REACT_APP_MAP_ROULETTE_SERVER_WEBSOCKET_URL) ||
+      "ws://localhost:9000/ws";
 
-    if (!this.pingHandle) {
-      // Ping the server every 45 seconds to avoid an idle timeout
-      this.pingHandle = setInterval(() => this.sendPing(), 45000);
+    try {
+      this.websocket = new WebSocketClass(wsUrl);
+      this.websocket.onopen = (e) => !this.isCleanedUp && this.handleOpen(e);
+      this.websocket.onmessage = (e) => !this.isCleanedUp && this.handleMessage(e);
+      this.websocket.onclose = (e) => !this.isCleanedUp && this.handleClose(e);
+
+      if (!this.pingHandle && !this.isCleanedUp) {
+        // Ping the server every 45 seconds to avoid an idle timeout
+        this.pingHandle = setInterval(() => this.sendPing(), 45000);
+      }
+    } catch (error) {
+      console.warn("WebSocket initialization failed:", error);
     }
   }
 
@@ -153,12 +180,54 @@
     this.sendMessage(pingMessage, true);
   }
 
+  /**
+   * Cleanup websocket connection and intervals
+   */
+  cleanup() {
+    this.isCleanedUp = true;
+
+    if (this.websocket) {
+      try {
+        this.websocket.onopen = null;
+        this.websocket.onmessage = null;
+        this.websocket.onclose = null;
+        this.websocket.close();
+      } catch (error) {
+        console.warn("WebSocket cleanup error:", error);
+      }
+      this.websocket = null;
+    }
+
+    if (this.pingHandle) {
+      clearInterval(this.pingHandle);
+      this.pingHandle = null;
+    }
+
+    if (this.reconnectionHandle) {
+      clearTimeout(this.reconnectionHandle);
+      this.reconnectionHandle = null;
+    }
+
+    this.reconnectionAttempts = 0;
+    this.queuedMessages = [];
+  }
+
   /**
    * Handles websocket close events, attempting to reconnect
    *
    * @private
    */
-  handleClose() {
+  handleClose(e) {
+    if (this.isCleanedUp) {
+      return;
+    }
+
+    // Clear ping interval on close
+    if (this.pingHandle) {
+      clearInterval(this.pingHandle);
+      this.pingHandle = null;
+    }
+
     this.connect();
   }