Update fetch-mock-jest to @fetch-mock/jest

package.json

@@ -117,6 +117,7 @@
     "@babel/preset-env": "^7.27.2",
     "@babel/preset-flow": "^7.27.1",
     "@babel/preset-react": "^7.27.1",
+    "@fetch-mock/jest": "^0.2.15",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -146,7 +147,6 @@
     "eslint-plugin-testing-library": "^7.2.1",
     "espree": "^10.3.0",
     "fake-indexeddb": "^6.0.1",
-    "fetch-mock-jest": "^1.5.1",
     "file-loader": "^6.2.0",
     "flow-bin": "^0.96.0",
     "glob": "^11.0.2",
@@ -159,7 +159,6 @@
     "local-web-server": "^5.4.0",
     "lockfile-lint": "^4.14.1",
     "mkdirp": "^3.0.1",
-    "node-fetch": "^2.6.11",
     "npm-run-all2": "^8.0.4",
     "open": "^10.1.2",
     "postcss": "^8.5.4",
@@ -188,7 +187,7 @@
       "jsx"
     ],
     "transformIgnorePatterns": [
-      "/node_modules/(?!(query-string|decode-uri-component|split-on-first|filter-obj)/)"
+      "/node_modules/(?!(query-string|decode-uri-component|split-on-first|filter-obj|@fetch-mock/jest|fetch-mock)/)"
     ],
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|ftl)$": "<rootDir>/src/test/fixtures/mocks/file-mock.js",
@@ -205,7 +204,7 @@
       "escapeString": true,
       "printBasicPrototype": true
     },
-    "testEnvironment": "jsdom",
+    "testEnvironment": "./src/test/custom-environment",
     "verbose": false
   },
   "husky": {

src/actions/receive-profile.js

@@ -1030,8 +1030,14 @@ async function _extractZipFromResponse(
   reportError: (...data: Array<any>) => void
 ): Promise<JSZip> {
   const buffer = await response.arrayBuffer();
+  // Workaround for https://github.com/Stuk/jszip/issues/941
+  // When running this code in tests, `buffer` doesn't inherits from _this_
+  // realm's ArrayBuffer object, and this breaks JSZip which doesn't account for
+  // this case. We workaround the issue by wrapping the buffer in an Uint8Array
+  // that comes from this realm.
+  const typedBuffer = new Uint8Array(buffer);
   try {
-    const zip = await JSZip.loadAsync(buffer);
+    const zip = await JSZip.loadAsync(typedBuffer);
     // Catch the error if unable to load the zip.
     return zip;
   } catch (error) {

src/profile-logic/mozilla-symbolication-api.js

@@ -95,7 +95,13 @@ type APIResultV5 = {
 // Make sure that the JSON blob we receive from the API conforms to our flow
 // type definition.
 function _ensureIsAPIResultV5(result: MixedObject): APIResultV5 {
-  if (!(result instanceof Object) || !('results' in result)) {
+  // It's possible (especially when running tests with Jest) that the parameter
+  // inherits from a `Object` global from another realm. By using toString
+  // this issue is solved wherever the parameter comes from.
+  const isObject = (subject) =>
+    Object.prototype.toString.call(subject) === '[object Object]';
+
+  if (!isObject(result) || !('results' in result)) {
     throw new Error('Expected an object with property `results`');
   }
   const results = result.results;
@@ -104,7 +110,7 @@ function _ensureIsAPIResultV5(result: MixedObject): APIResultV5 {
   }
   for (const jobResult of results) {
     if (
-      !(jobResult instanceof Object) ||
+      !isObject(jobResult) ||
       !('found_modules' in jobResult) ||
       !('stacks' in jobResult)
     ) {
@@ -113,7 +119,7 @@ function _ensureIsAPIResultV5(result: MixedObject): APIResultV5 {
       );
     }
     const found_modules = jobResult.found_modules;
-    if (!(found_modules instanceof Object)) {
+    if (!isObject(found_modules)) {
       throw new Error('Expected `found_modules` to be an object');
     }
     const stacks = jobResult.stacks;
@@ -125,7 +131,7 @@ function _ensureIsAPIResultV5(result: MixedObject): APIResultV5 {
         throw new Error('Expected `stack` to be an array');
       }
       for (const frameInfo of stack) {
-        if (!(frameInfo instanceof Object)) {
+        if (!isObject(frameInfo)) {
           throw new Error('Expected `frameInfo` to be an object');
         }
         if (
@@ -165,7 +171,7 @@ function _ensureIsAPIResultV5(result: MixedObject): APIResultV5 {
             throw new Error('Expected `inlines` to be an array');
           }
           for (const inlineFrame of inlines) {
-            if (!(inlineFrame instanceof Object)) {
+            if (!isObject(inlineFrame)) {
               throw new Error('Expected `inlineFrame` to be an object');
             }
           }

src/test/components/AppLocalizationProvider.test.js

@@ -37,11 +37,11 @@ describe('AppLocalizationProvider', () => {
     jest.spyOn(window.navigator, 'languages', 'get').mockReturnValue(languages);
 
     const translatedText = (language) => `This is ${language} Text`;
-    const fetchUrlRe = /^\/locales\/(?<language>[^/]+)\/app.ftl$/;
-    window.fetch
+    const fetchUrlRe = /\/locales\/(?<language>[^/]+)\/app.ftl$/;
+    window.fetchMock
       .catch(404) // catchall
-      .get(fetchUrlRe, (fetchUrl) => {
-        const matchUrlResult = fetchUrlRe.exec(fetchUrl);
+      .get(fetchUrlRe, ({ url }) => {
+        const matchUrlResult = fetchUrlRe.exec(url);
         if (matchUrlResult) {
           // $FlowExpectError Our Flow doesn't know about named groups.
           const { language } = matchUrlResult.groups;
@@ -188,15 +188,15 @@ describe('AppLocalizationProvider', () => {
 
     expect(await screen.findByText(translatedText('de'))).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'de');
-    expect(window.fetch).toHaveBeenCalledWith('/locales/de/app.ftl', {
+    expect(window.fetch).toHaveFetched('/locales/de/app.ftl', {
       credentials: 'include',
       mode: 'no-cors',
     });
-    expect(window.fetch).toHaveBeenCalledWith('/locales/en-US/app.ftl', {
+    expect(window.fetch).toHaveFetched('/locales/en-US/app.ftl', {
       credentials: 'include',
       mode: 'no-cors',
     });
-    expect(window.fetch).toHaveBeenCalledTimes(2);
+    expect(window.fetch).toHaveFetchedTimes(2);
   });
 
   it('falls back properly on en-US if the primary locale lacks a string', async () => {
@@ -220,14 +220,14 @@ describe('AppLocalizationProvider', () => {
       await screen.findByText(translatedText('en-US'))
     ).toBeInTheDocument();
     expect(document.documentElement).toHaveAttribute('lang', 'de');
-    expect(window.fetch).toHaveBeenCalledWith('/locales/de/app.ftl', {
+    expect(window.fetch).toHaveFetched('/locales/de/app.ftl', {
       credentials: 'include',
       mode: 'no-cors',
     });
-    expect(window.fetch).toHaveBeenCalledWith('/locales/en-US/app.ftl', {
+    expect(window.fetch).toHaveFetched('/locales/en-US/app.ftl', {
       credentials: 'include',
       mode: 'no-cors',
     });
-    expect(window.fetch).toHaveBeenCalledTimes(2);
+    expect(window.fetch).toHaveFetchedTimes(2);
   });
 });

src/test/components/BottomBox.test.js

@@ -50,7 +50,7 @@ describe('BottomBox', () => {
 
     const revision = '997f00815e6bc28806b75448c8829f0259d2cb28';
     const filepath = 'widget/cocoa/nsAppShell.mm';
-    window.fetch
+    window.fetchMock
       .post('http://127.0.0.1:8000/source/v1', 500)
       .get(
         `https://hg.mozilla.org/mozilla-central/raw-file/${revision}/${filepath}`,

src/test/components/FooterLinks.test.js

@@ -15,26 +15,22 @@ import { render, screen, fireEvent } from '@testing-library/react';
 beforeEach(() => {
   // Implement the fetch operation for local language files, so that we can test
   // switching languages.
-  const fetchUrlRe = /^\/locales\/(?<language>[^/]+)\/app.ftl$/;
-  window.fetch
+  const fetchUrlRe = /\/locales\/(?<language>[^/]+)\/app.ftl$/;
+  window.fetchMock
     .catch(404) // catchall
-    .get(
-      fetchUrlRe,
-      (fetchUrl) => {
-        const matchUrlResult = fetchUrlRe.exec(fetchUrl);
-        if (matchUrlResult) {
-          // $FlowExpectError Our Flow doesn't know about named groups.
-          const { language } = matchUrlResult.groups;
-          const path = `locales/${language}/app.ftl`;
-          if (fs.existsSync(path)) {
-            return fs.readFileSync(path);
-          }
+    .get(fetchUrlRe, ({ url }) => {
+      const matchUrlResult = fetchUrlRe.exec(url);
+      if (matchUrlResult) {
+        // $FlowExpectError Our Flow doesn't know about named groups.
+        const { language } = matchUrlResult.groups;
+        const path = `locales/${language}/app.ftl`;
+        if (fs.existsSync(path)) {
+          return fs.readFileSync(path);
         }
+      }
 
-        return 404;
-      },
-      { sendAsJson: false }
-    );
+      return 404;
+    });
 });
 
 afterEach(function () {

src/test/components/ListOfPublishedProfiles.test.js

@@ -285,20 +285,20 @@ describe('ListOfPublishedProfiles', () => {
       endpointUrl: string,
       jwtToken: string,
     }) {
-      window.fetch
+      window.fetchMock
         .catch(404) // Catchall
-        .mock(endpointUrl, (urlString, options) => {
+        .route(endpointUrl, ({ options }) => {
           const { method, headers } = options;
-          if (method !== 'DELETE') {
+          if (method !== 'delete') {
             return new Response(null, {
               status: 405,
               statusText: 'Method not allowed',
             });
           }
 
           if (
-            headers['Content-Type'] !== 'application/json' ||
-            headers.Accept !==
+            headers['content-type'] !== 'application/json' ||
+            headers.accept !==
               'application/vnd.firefox-profiler+json;version=1.0'
           ) {
             return new Response(null, {
@@ -307,7 +307,7 @@ describe('ListOfPublishedProfiles', () => {
             });
           }
 
-          if (headers.Authorization !== `Bearer ${jwtToken}`) {
+          if (headers.authorization !== `Bearer ${jwtToken}`) {
             return new Response(null, {
               status: 401,
               statusText: 'Forbidden',

src/test/components/Root-history.test.js

@@ -188,7 +188,7 @@ describe('Root with history', function () {
 });
 
 function mockFetchProfileAtUrl(url: string, profile: Profile): void {
-  window.fetch
+  window.fetchMock
     .catch(404) // catchall
     .get(url, profile);
 }

src/test/components/UrlManager.test.js

@@ -146,7 +146,7 @@ describe('UrlManager', function () {
   });
 
   it(`sets the data source to public and doesn't change the URL when there's a fetch error`, async function () {
-    window.fetch.getAny({ throws: new Error('Simulated network error') });
+    window.fetchMock.get('*', { throws: new Error('Simulated network error') });
     const urlPath = '/public/FAKE_HASH/marker-chart';
     const { getState, createUrlManager, waitUntilUrlSetupPhase } =
       setup(urlPath);
@@ -163,7 +163,7 @@ describe('UrlManager', function () {
   });
 
   it(`sets the data source to public and doesn't change the URL when there's a URL upgrading error`, async function () {
-    window.fetch.getAny(getSerializableProfile());
+    window.fetchMock.get('*', getSerializableProfile());
 
     const urlPath = '/public/FAKE_HASH/calltree';
     const searchString = '?v=' + (CURRENT_URL_VERSION + 1);
@@ -185,7 +185,7 @@ describe('UrlManager', function () {
   });
 
   it(`fetches profile and sets the phase to done when everything works`, async function () {
-    window.fetch.getAny(getSerializableProfile());
+    window.fetchMock.get('*', getSerializableProfile());
 
     const urlPath = '/public/FAKE_HASH/';
     const expectedResultingPath = urlPath + 'calltree/';
@@ -206,7 +206,7 @@ describe('UrlManager', function () {
   });
 
   it('allows navigating back and forward when changing view options', async () => {
-    window.fetch.getAny(getSerializableProfile());
+    window.fetchMock.get('*', getSerializableProfile());
 
     const urlPath = '/public/FAKE_HASH/calltree/';
     const searchString = 'v=' + CURRENT_URL_VERSION;

src/test/custom-environment.js

@@ -0,0 +1,44 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+// @flow
+//
+import { TestEnvironment } from 'jest-environment-jsdom';
+import { TextDecoder, TextEncoder } from 'util';
+
+// This class registers various globals coming from node in test environments.
+export default class CustomTestEnvironment extends TestEnvironment {
+  async setup() {
+    await super.setup();
+
+    // Register TextDecoder and TextEncoder with the global scope.
+    // These are now available globally in nodejs, but not when running with jsdom
+    // in jest apparently.
+    // Still let's double check that they're from the global scope as expected, so
+    // that this can be removed once it's implemented.
+    if ('TextDecoder' in this.global) {
+      throw new Error(
+        'TextDecoder is already present in the global scope, please update custom-environment.js.'
+      );
+    }
+
+    this.global.TextDecoder = TextDecoder;
+    this.global.TextEncoder = TextEncoder;
+
+    // Register Request and friends with the global scope.
+    // These are now available globally in nodejs, but not when running with jsdom
+    // in jest apparently.
+    // Still let's double check that they're from the global scope as expected, so
+    // that this can be removed once it's implemented.
+    if ('Request' in this.global) {
+      throw new Error(
+        'Request is already present in the global scope, please update custom-environment.js.'
+      );
+    }
+
+    this.global.fetch = fetch;
+    this.global.Request = Request;
+    this.global.Response = Response;
+    this.global.ReadableStream = ReadableStream;
+  }
+}

src/test/integration/symbolicator-cli/symbolicator-cli.test.js

@@ -33,7 +33,7 @@ describe('symbolicator-cli tool', function () {
       'src/test/integration/symbolicator-cli/symbol-server-response.json'
     );
 
-    window.fetch.post(
+    window.fetchMock.post(
       'http://symbol.server/symbolicate/v5',
       new Response(symbolsJson)
     );

src/test/setup.js

@@ -7,9 +7,7 @@
 import '@testing-library/jest-dom';
 
 // This installs jest matchers as a side effect as well.
-import fetchMock from 'fetch-mock-jest';
-import { Headers, Request, Response } from 'node-fetch';
-import { TextDecoder, TextEncoder } from 'util';
+import fetchMock from '@fetch-mock/jest';
 import crypto from 'crypto';
 
 jest.mock('../utils/worker-factory');
@@ -22,28 +20,8 @@ if (process.env.TZ !== 'UTC') {
   throw new Error('Jest must be run from `yarn test`');
 }
 
-// Register TextDecoder and TextEncoder with the global scope.
-// These are now available globally in nodejs, but not when running with jsdom
-// in jest apparently.
-// Still let's double check that they're from the global scope as expected, so
-// that this can be removed once it's implemented.
-if ('TextDecoder' in global) {
-  throw new Error(
-    'TextDecoder is already present in the global scope, please update setup.js.'
-  );
-}
-
-global.TextDecoder = TextDecoder;
-global.TextEncoder = TextEncoder;
-
-beforeEach(function () {
-  // Install fetch and fetch-related objects globally.
-  // Using the sandbox ensures that parallel tests run properly.
-  global.fetch = fetchMock.sandbox();
-  global.Headers = Headers;
-  global.Request = Request;
-  global.Response = Response;
-});
+fetchMock.mockGlobal();
+global.fetchMock = fetchMock;
 
 afterEach(function () {
   // This `__shutdownWorkers` function only exists in the mocked test environment,