Custom test environment of happy-dom + ws (#28369)

The jsdom WebSocket implementation seems less reliable than the (less accurate imitation of the browser WebSocket implementation) ws library. Use a custom test environment that is happy-dom + ws for these tests.

GitOrigin-RevId: 4579d0a45d7be4ab2e15c8abd17c32a1cca4a5bf

Author: thomasballinger

.eslintrc.cjs

@@ -75,5 +75,12 @@ module.exports = {
     // vitest (manually enabled until we can upgrade eslint)
     "vitest/no-focused-tests": ["error", { fixable: false }],
   },
-  ignorePatterns: ["node_modules", "dist", "*.js", "tmpDist*", "tmpPackage*"],
+  ignorePatterns: [
+    "node_modules",
+    "dist",
+    "*.js",
+    "tmpDist*",
+    "tmpPackage*",
+    "custom-vitest-enviroment.ts",
+  ],
 };

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unpublished
+
+- Drop support for Node.js v16, and with it drop the dependency on node-fetch.
+  This removes the 'punycode' deprecation warning printed when running the CLI
+  in more recent versions of Node.js.
+
 ## 1.13.2
 
 - Fix `npx convex import` regression in 1.13.1

custom-vitest-enviroment.ts

@@ -0,0 +1,44 @@
+import type { Environment } from "vitest";
+import { builtinEnvironments, populateGlobal } from "vitest/environments";
+
+import ws from "ws";
+const nodeWebSocket = ws as unknown as typeof WebSocket;
+
+const happy = builtinEnvironments["happy-dom"];
+
+export default <Environment>{
+  name: "happy-dom-plus-ws",
+  transformMode: happy.transformMode,
+  // optional - only if you support "experimental-vm" pool
+  async setupVM(options) {
+    const { getVmContext: happyGetVmContext, teardown: happyTeardown } =
+      await happy.setupVM!(options);
+    return {
+      getVmContext() {
+        const context = happyGetVmContext();
+        return context;
+      },
+      teardown() {
+        return happyTeardown();
+        // called after all tests with this env have been run
+      },
+    };
+  },
+  async setup(global, options) {
+    const { teardown: happyTeardown } = await happy.setup(global, options);
+    //populateGlobal(global, original, {});
+    // Add the websocket here!
+    global.myNewGlobalVariable = 8;
+    global.WebSocket = nodeWebSocket;
+
+    // custom setup
+    return {
+      teardown(global) {
+        const ret = happyTeardown(global);
+        delete global.myNewGlobalVariable;
+        return ret;
+        // called after all tests with this env have been run
+      },
+    };
+  },
+};

src/browser/sync/client.test.ts

@@ -1,13 +1,13 @@
 /**
- * @vitest-environment jsdom
+ * @vitest-environment custom-vitest-enviroment.ts
  */
 
 import { test, expect } from "vitest";
 
 import { BaseConvexClient } from "./client.js";
 import { anyApi } from "../../server/api.js";
 
-test.skip("localQueryResult reflects optimistic results", async () => {
+test("localQueryResult reflects optimistic results", async () => {
   const client = new BaseConvexClient("http://127.0.0.1:8000", () => {
     // ignore updates.
   });
@@ -27,7 +27,7 @@ test.skip("localQueryResult reflects optimistic results", async () => {
   expect(client.localQueryResult("myUdf", {})).toBe(true);
 });
 
-test.skip("Client warns when old clientConfig format is used", async () => {
+test("Client warns when old clientConfig format is used", async () => {
   expect(() => {
     new BaseConvexClient(
       { address: "http://127.0.0.1:8000" } as any,

src/browser/sync/protocol.test.ts

@@ -1,13 +1,13 @@
 /**
- * @vitest-environment jsdom
+ * @vitest-environment custom-vitest-enviroment.ts
  */
 
 import { test, expect } from "vitest";
 
 import { Long } from "../long.js";
 import { longToU64, u64ToLong } from "./protocol.js";
 
-test.skip("Long serialization", async () => {
+test("Long serialization", async () => {
   expect(Long.fromNumber(89234097497)).toEqual(
     u64ToLong(longToU64(Long.fromNumber(89234097497))),
   );

src/nextjs/nextjs.test.tsx

@@ -1,5 +1,5 @@
 /**
- * @vitest-environment jsdom
+ * @vitest-environment custom-vitest-enviroment.ts
  */
 import { vi, expect, test, describe, beforeEach, afterEach } from "vitest";
 
@@ -13,15 +13,15 @@ import { preloadQuery, preloadedQueryResult } from "./index.js";
 
 const address = "https://127.0.0.1:3001";
 
-describe.skip("env setup", () => {
+describe("env setup", () => {
   test("requires NEXT_PUBLIC_CONVEX_URL", async () => {
     await expect(preloadQuery(anyApi.myQuery.default)).rejects.toThrow(
       "Environment variable NEXT_PUBLIC_CONVEX_URL is not set.",
     );
   });
 });
 
-describe.skip("preloadQuery and usePreloadedQuery", () => {
+describe("preloadQuery and usePreloadedQuery", () => {
   beforeEach(() => {
     global.process.env.NEXT_PUBLIC_CONVEX_URL = address;
     global.fetch = vi.fn().mockResolvedValue({

src/react-auth0/ConvexProviderWithAuth0.test.tsx

@@ -1,12 +1,12 @@
 /**
- * @vitest-environment jsdom
+ * @vitest-environment custom-vitest-enviroment.ts
  */
 import { test } from "vitest";
 import React from "react";
 import { ConvexProviderWithAuth0 } from "./ConvexProviderWithAuth0.js";
 import { ConvexReactClient } from "../react/index.js";
 
-test.skip("Helpers are valid children", () => {
+test("Helpers are valid children", () => {
   const convex = new ConvexReactClient("https://localhost:3001");
 
   const _ = (

src/react-clerk/ConvexProviderWithClerk.test.tsx

@@ -1,13 +1,13 @@
 /**
- * @vitest-environment jsdom
+ * @vitest-environment custom-vitest-enviroment.ts
  */
 import { test } from "vitest";
 import React from "react";
 import { ConvexProviderWithClerk } from "./ConvexProviderWithClerk.js";
 import { ConvexReactClient } from "../react/index.js";
 import { useAuth } from "@clerk/clerk-react";
 
-test.skip("Helpers are valid children", () => {
+test("Helpers are valid children", () => {
   const convex = new ConvexReactClient("https://localhost:3001");
 
   const _ = (

src/react/ConvexAuthState.test.tsx

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment custom-vitest-enviroment.ts
  */
 import { expect, vi, test } from "vitest";
 import { act, render, screen } from "@testing-library/react";

src/react/auth_helpers.test.tsx

@@ -1,11 +1,11 @@
 /**
- * @vitest-environment jsdom
+ * @vitest-environment custom-vitest-enviroment.ts
  */
 import { test } from "vitest";
 import React from "react";
 import { Authenticated, AuthLoading, Unauthenticated } from "./auth_helpers.js";
 
-test.skip("Helpers are valid children", () => {
+test("Helpers are valid children", () => {
   const _element = (
     <div>
       <Authenticated>Yay</Authenticated>
@@ -15,7 +15,7 @@ test.skip("Helpers are valid children", () => {
   );
 });
 
-test.skip("Helpers can take many children", () => {
+test("Helpers can take many children", () => {
   const _element = (
     <div>
       <Authenticated>

src/react/auth_websocket.test.tsx

@@ -1,5 +1,5 @@
 /**
- * @vitest-environment jsdom
+ * @vitest-environment custom-vitest-enviroment.ts
  */
 import { expect, vi, test, describe } from "vitest";
 import jwtEncode from "jwt-encode";
@@ -17,7 +17,7 @@ const testReactClient = (address: string) =>
   });
 
 // On Linux these can retry forever due to EADDRINUSE so run then sequentially.
-describe.skip.sequential("auth websocket tests", () => {
+describe.sequential("auth websocket tests", () => {
   // This is the path usually taken on page load after a user logged in,
   // with a constant token provider.
   test("Authenticate via valid static token", async () => {

src/react/client.test.tsx

@@ -10,8 +10,6 @@ import React from "react";
 import { renderHook } from "@testing-library/react";
 import { anyApi, makeFunctionReference } from "../server/api.js";
 
-console.log("!!!!!!!!!!!", ws.WebSocket);
-
 const address = "https://127.0.0.1:3001";
 
 const testConvexReactClient = () =>

src/react/use_paginated_query.test.tsx

@@ -1,5 +1,5 @@
 /**
- * @vitest-environment jsdom
+ * @vitest-environment custom-vitest-enviroment.ts
  */
 /* eslint-disable @typescript-eslint/ban-types */
 import { expect, vi, test, describe, beforeEach } from "vitest";
@@ -49,7 +49,7 @@ class ErrorBoundary extends React.Component<Props> {
   }
 }
 
-test.skip.each([
+test.each([
   {
     options: undefined,
     expectedError:
@@ -396,7 +396,7 @@ describe.skip("usePaginatedQuery pages", () => {
   });
 });
 
-describe.skip("PaginatedQueryArgs", () => {
+describe("PaginatedQueryArgs", () => {
   test("basic", () => {
     type MyQueryFunction = FunctionReference<
       "query",
@@ -410,7 +410,7 @@ describe.skip("PaginatedQueryArgs", () => {
   });
 });
 
-describe.skip("PaginatedQueryItem", () => {
+describe("PaginatedQueryItem", () => {
   test("interface return type", () => {
     interface ReturnType {
       property: string;

src/react/use_queries.test.ts

@@ -1,5 +1,5 @@
 /**
- * @jest-environment jsdom
+ * @vitest-environment custom-vitest-enviroment.ts
  */
 
 import { RequestForQueries, useQueriesHelper } from "./use_queries.js";

vitest.config.js

@@ -7,5 +7,6 @@ export default defineConfig({
     },
     isolate: true,
     watch: false,
+    //environment: "node", // "node" is the default
   },
 });