fix: allow mocking of fetch proxy (#552)

* fix: allow proxied fetch to be mocked in beforeAll

* test: confirm that beforeEach mocking works

Author: ojeytonwilliams

packages/dom-evaluator/src/dom-test-evaluator.ts

@@ -58,7 +58,9 @@ const removeTestScripts = () => {
 document.addEventListener("submit", (e) => {
   e.preventDefault();
 });
-const originalFetch = globalThis.fetch;
+
+// @ts-expect-error The proxy doesn't fully implement the fetch API
+globalThis.fetch = createFetchProxy(parent);
 
 export class DOMTestEvaluator implements TestEvaluator {
   #runTest?: TestEvaluator["runTest"];
@@ -136,8 +138,6 @@ export class DOMTestEvaluator implements TestEvaluator {
 
     this.#runTest = async function (rawTest: string): Promise<Fail | Pass> {
       this.#proxyConsole.on();
-      // @ts-expect-error The proxy doesn't fully implement the fetch API
-      globalThis.fetch = createFetchProxy(parent);
 
       try {
         const testWithBefore = `${opts.hooks?.beforeEach ?? ""};
@@ -168,8 +168,6 @@ ${rawTest}`;
           // eslint-disable-next-line no-unsafe-finally
           return this.#createErrorResponse(afterEachErr as TestError);
         }
-
-        globalThis.fetch = originalFetch;
       }
     };
 

packages/javascript-evaluator/src/javascript-test-evaluator.ts

@@ -19,8 +19,6 @@ import { createAsyncIife } from "../../shared/src/async-iife";
 import { ProxyConsole } from "../../shared/src/proxy-console";
 import { createFetchProxy } from "../../shared/src/proxy-fetch";
 
-const originalFetch = globalThis.fetch;
-
 const READY_MESSAGE: ReadyEvent["data"] = { type: "ready" };
 declare global {
   var assert: typeof chaiAssert;
@@ -58,13 +56,14 @@ export class JavascriptTestEvaluator implements TestEvaluator {
   }
 
   init(opts: InitWorkerOptions) {
+    // @ts-expect-error The proxy doesn't fully implement the fetch API
+    globalThis.fetch = createFetchProxy(globalThis);
+
     eval(opts.hooks?.beforeAll ?? "");
 
     this.#runTest = async (rawTest) => {
       this.#proxyConsole.on();
 
-      // @ts-expect-error The proxy doesn't fully implement the fetch API
-      globalThis.fetch = createFetchProxy(globalThis);
       const test = createAsyncIife(rawTest);
       // This can be reassigned by the eval inside the try block, so it should be declared as a let
       // eslint-disable-next-line prefer-const
@@ -110,8 +109,6 @@ ${test};`);
           // eslint-disable-next-line no-unsafe-finally
           return this.#createErrorResponse(afterEachErr as TestError);
         }
-
-        globalThis.fetch = originalFetch;
       }
     };
   }

packages/python-evaluator/src/python-test-evaluator.ts

@@ -33,7 +33,6 @@ type EvaluatedTeststring = {
   test: () => Promise<unknown>;
 };
 
-const originalFetch = globalThis.fetch;
 const READY_MESSAGE: ReadyEvent["data"] = { type: "ready" };
 
 function isProxy(raw: unknown): raw is PyProxy {
@@ -71,6 +70,8 @@ class PythonTestEvaluator implements TestEvaluator {
 
   async init(opts: InitWorkerOptions) {
     const pyodide = await this.#setupPyodide();
+    // @ts-expect-error The proxy doesn't fully implement the fetch API
+    globalThis.fetch = createFetchProxy(globalThis);
     eval(opts.hooks?.beforeAll ?? "");
 
     this.#runTest = async (rawTestString): Promise<Pass | Fail> => {
@@ -117,9 +118,6 @@ def __fake_input(arg=None):
 input = __fake_input
 `);
 
-      // @ts-expect-error The proxy doesn't fully implement the fetch API
-      globalThis.fetch = createFetchProxy(globalThis);
-
       try {
         const testString = `${opts.hooks?.beforeEach ?? ""};
 ${rawTestString}`;
@@ -200,7 +198,6 @@ ${rawTestString}`;
         }
 
         __userGlobals.destroy();
-        globalThis.fetch = originalFetch;
       }
     };
   }

packages/tests/integration-tests/index.test.ts

@@ -592,6 +592,76 @@ new Promise((resolve) => {
       });
     });
 
+    it("should be possible to mock fetch in tests", async () => {
+      const beforeAll = `
+globalThis.originalFetch = globalThis.fetch;
+globalThis.fetch = () => Promise.resolve( { json: () => Promise.resolve({ message: 'Mocked fetch!' }) } );
+    `;
+
+      const afterAll = `
+globalThis.fetch = originalFetch;
+    `;
+
+      const result = await page.evaluate(
+        async (type, beforeAll, afterAll) => {
+          const runner = await window.FCCTestRunner.createTestRunner({
+            type,
+            hooks: {
+              beforeAll,
+              afterAll,
+            },
+          });
+          return runner.runAllTests([
+            `
+const response = await fetch('https://any.url');
+const data = await response.json();
+assert.deepEqual(data, { message: 'Mocked fetch!' });
+`,
+          ]);
+        },
+        type,
+        beforeAll,
+        afterAll,
+      );
+
+      expect(result).toEqual([{ pass: true }]);
+    });
+
+    it("should be possible to mock fetch in the beforeEach hook", async () => {
+      const beforeEach = `
+globalThis.originalFetch = globalThis.fetch;
+globalThis.fetch = () => Promise.resolve( { json: () => Promise.resolve({ message: 'Mocked fetch in beforeEach!' }) } );
+    `;
+
+      const afterEach = `
+globalThis.fetch = originalFetch;
+    `;
+
+      const result = await page.evaluate(
+        async (type, beforeEach, afterEach) => {
+          const runner = await window.FCCTestRunner.createTestRunner({
+            type,
+            hooks: {
+              beforeEach,
+              afterEach,
+            },
+          });
+          return runner.runAllTests([
+            `
+const response = await fetch('https://any.url');
+const data = await response.json();
+assert.deepEqual(data, { message: 'Mocked fetch in beforeEach!' });
+`,
+          ]);
+        },
+        type,
+        beforeEach,
+        afterEach,
+      );
+
+      expect(result).toEqual([{ pass: true }]);
+    });
+
     it("should make fetch requests from the browsing context of the test runner", async () => {
       const result = await page.evaluate(async (type) => {
         // Create spy