lighthouse 9.5.0-dev.20220628 → 9.5.0-dev.20220629

package/lighthouse-cli/test/smokehouse/report-assert-test.js

@@ -6,8 +6,8 @@
 
 /* eslint-disable no-control-regex */
 
+import {readJson} from '../../../lighthouse-core/test/test-utils.js';
 import {findDifferences, getAssertionReport} from './report-assert.js';
-import {readJson} from '../../../root.js';
 
 describe('findDiffersences', () => {
   const testCases = {

package/lighthouse-core/audits/byte-efficiency/uses-responsive-images.js

@@ -33,6 +33,9 @@ const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
 const IGNORE_THRESHOLD_IN_BYTES = 4096;
 
+// Ignore up to 12KB of waste if an effort was made with breakpoints.
+const IGNORE_THRESHOLD_IN_BYTES_BREAKPOINTS_PRESENT = 12288;
+
 class UsesResponsiveImages extends ByteEfficiencyAudit {
   /**
    * @return {LH.Audit.Meta}
@@ -112,6 +115,18 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
     };
   }
 
+
+  /**
+   * @param {LH.Artifacts.ImageElement} image
+   * @return {number};
+   */
+  static determineAllowableWaste(image) {
+    if (image.srcset || image.isPicture) {
+      return IGNORE_THRESHOLD_IN_BYTES_BREAKPOINTS_PRESENT;
+    }
+    return IGNORE_THRESHOLD_IN_BYTES;
+  }
+
   /**
    * @param {LH.Artifacts} artifacts
    * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
@@ -126,6 +141,8 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
     const ViewportDimensions = artifacts.ViewportDimensions;
     /** @type {Map<string, LH.Audit.ByteEfficiencyItem>} */
     const resultsMap = new Map();
+    /** @type {Array<string>} */
+    const passedImageList = [];
     for (const image of images) {
       // Give SVG a free pass because creating a "responsive" SVG is of questionable value.
       // Ignore CSS images because it's difficult to determine what is a spritesheet,
@@ -147,15 +164,23 @@ class UsesResponsiveImages extends ByteEfficiencyAudit {
         );
       if (!processed) continue;
 
-      // Don't warn about an image that was later used appropriately
+      // Verify the image wastes more than the minimum.
+      const exceedsAllowableWaste = processed.wastedBytes > this.determineAllowableWaste(image);
+
       const existing = resultsMap.get(processed.url);
-      if (!existing || existing.wastedBytes > processed.wastedBytes) {
-        resultsMap.set(processed.url, processed);
+      // Don't warn about an image that was later used appropriately, or wastes a trivial amount of data.
+      if (exceedsAllowableWaste && !passedImageList.includes(processed.url)) {
+        if ((!existing || existing.wastedBytes > processed.wastedBytes)) {
+          resultsMap.set(processed.url, processed);
+        }
+      } else {
+        // Ensure this url passes for future tests.
+        resultsMap.delete(processed.url);
+        passedImageList.push(processed.url);
       }
     }
 
-    const items = Array.from(resultsMap.values())
-        .filter(item => item.wastedBytes > IGNORE_THRESHOLD_IN_BYTES);
+    const items = Array.from(resultsMap.values());
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [

package/lighthouse-core/config/config-plugin.js

@@ -23,6 +23,24 @@ function isObjectOfUnknownProperties(val) {
   return typeof val === 'object' && val !== null && !Array.isArray(val);
 }
 
+/**
+ * @param {unknown} str
+ * @return {str is LH.Gatherer.GatherMode}
+ */
+function objectIsGatherMode(str) {
+  if (typeof str !== 'string') return false;
+  return str === 'navigation' || str === 'timespan' || str === 'snapshot';
+}
+
+/**
+ * @param {unknown} arr
+ * @return {arr is Array<LH.Gatherer.GatherMode>}
+ */
+function isArrayOfGatherModes(arr) {
+  if (!Array.isArray(arr)) return false;
+  return arr.every(objectIsGatherMode);
+}
+
 /**
  * Asserts that obj has no own properties, throwing a nice error message if it does.
  * Plugin and object name are included for nicer logging.
@@ -124,6 +142,7 @@ class ConfigPlugin {
       description,
       manualDescription,
       auditRefs: auditRefsJson,
+      supportedModes,
       ...invalidRest
     } = categoryJson;
 
@@ -138,6 +157,12 @@ class ConfigPlugin {
     if (!i18n.isStringOrIcuMessage(manualDescription) && manualDescription !== undefined) {
       throw new Error(`${pluginName} has an invalid category manualDescription.`);
     }
+    if (!isArrayOfGatherModes(supportedModes) && supportedModes !== undefined) {
+      throw new Error(
+        `${pluginName} supportedModes must be an array, ` +
+        `valid array values are "navigation", "timespan", and "snapshot".`
+      );
+    }
     const auditRefs = ConfigPlugin._parseAuditRefsList(auditRefsJson, pluginName);
 
     return {
@@ -145,6 +170,7 @@ class ConfigPlugin {
       auditRefs,
       description: description,
       manualDescription: manualDescription,
+      supportedModes,
     };
   }
 

package/lighthouse-core/fraggle-rock/gather/navigation-runner.js

@@ -178,6 +178,7 @@ async function _computeNavigationResult(
       url: mainDocumentUrl,
       loadFailureMode: navigationContext.navigation.loadFailureMode,
       networkRecords: debugData.records,
+      warnings,
     })
     : navigationError;
 

package/lighthouse-core/gather/gather-runner.js

@@ -604,6 +604,7 @@ class GatherRunner {
       url: passContext.url,
       loadFailureMode: passConfig.loadFailureMode,
       networkRecords: loadData.networkRecords,
+      warnings: passContext.LighthouseRunWarnings,
     });
     if (pageLoadError) {
       const localizedMessage = format.getFormatted(pageLoadError.friendlyMessage,

package/lighthouse-core/gather/gatherers/main-document-content.js

@@ -21,7 +21,6 @@ class MainDocumentContent extends FRGatherer {
   };
 
   /**
-   *
    * @param {LH.Gatherer.FRTransitionalContext} context
    * @param {LH.Artifacts['DevtoolsLog']} devtoolsLog
    * @return {Promise<LH.Artifacts['MainDocumentContent']>}
@@ -34,7 +33,6 @@ class MainDocumentContent extends FRGatherer {
   }
 
   /**
-   *
    * @param {LH.Gatherer.FRTransitionalContext<'DevtoolsLog'>} context
    * @return {Promise<LH.Artifacts['MainDocumentContent']>}
    */

package/lighthouse-core/lib/lh-env.js

@@ -8,7 +8,7 @@
 const process = require('process');
 
 module.exports = {
-  // NODE_ENV is set to test by jest and by smokehouse CLI runner
+  // NODE_ENV is set to test by mocha-setup.js and the smokehouse CLI runner
   // CI as a catchall for everything we do in GitHub Actions
   isUnderTest: !!process.env.CI || process.env.NODE_ENV === 'test',
 };

package/lighthouse-core/lib/navigation-error.js

@@ -8,6 +8,22 @@
 const LHError = require('./lh-error.js');
 const NetworkAnalyzer = require('./dependency-graph/simulator/network-analyzer.js');
 const NetworkRequest = require('./network-request.js');
+const i18n = require('./i18n/i18n.js');
+
+const UIStrings = {
+  /**
+   * Warning shown in report when the page under test is an XHTML document, which Lighthouse does not directly support
+   * so we display a warning.
+   */
+  warningXhtml:
+    'The page MIME type is XHTML: Lighthouse does not explicitly support this document type',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+// MIME types are case-insensitive but Chrome normalizes MIME types to be lowercase.
+const HTML_MIME_TYPE = 'text/html';
+const XHTML_MIME_TYPE = 'application/xhtml+xml';
 
 /**
  * Returns an error if the original network request failed or wasn't found.
@@ -76,16 +92,15 @@ function getInterstitialError(mainRecord, networkRecords) {
  * @return {LH.LighthouseError|undefined}
  */
 function getNonHtmlError(finalRecord) {
-  // MIME types are case-insenstive but Chrome normalizes MIME types to be lowercase.
-  const HTML_MIME_TYPE = 'text/html';
-
   // If we never requested a document, there's no doctype error, let other cases handle it.
   if (!finalRecord) return undefined;
 
   // mimeType is determined by the browser, we assume Chrome is determining mimeType correctly,
   // independently of 'Content-Type' response headers, and always sending mimeType if well-formed.
-  if (HTML_MIME_TYPE !== finalRecord.mimeType) {
-    return new LHError(LHError.errors.NOT_HTML, {mimeType: finalRecord.mimeType});
+  if (finalRecord.mimeType !== HTML_MIME_TYPE && finalRecord.mimeType !== XHTML_MIME_TYPE) {
+    return new LHError(LHError.errors.NOT_HTML, {
+      mimeType: finalRecord.mimeType,
+    });
   }
 
   return undefined;
@@ -95,7 +110,7 @@ function getNonHtmlError(finalRecord) {
  * Returns an error if the page load should be considered failed, e.g. from a
  * main document request failure, a security issue, etc.
  * @param {LH.LighthouseError|undefined} navigationError
- * @param {{url: string, loadFailureMode: LH.Gatherer.PassContext['passConfig']['loadFailureMode'], networkRecords: Array<LH.Artifacts.NetworkRequest>}} context
+ * @param {{url: string, loadFailureMode: LH.Gatherer.PassContext['passConfig']['loadFailureMode'], networkRecords: Array<LH.Artifacts.NetworkRequest>, warnings: Array<string | LH.IcuMessage>}} context
  * @return {LH.LighthouseError|undefined}
  */
 function getPageLoadError(navigationError, context) {
@@ -120,6 +135,10 @@ function getPageLoadError(navigationError, context) {
     finalRecord = NetworkAnalyzer.resolveRedirects(mainRecord);
   }
 
+  if (finalRecord?.mimeType === XHTML_MIME_TYPE) {
+    context.warnings.push(str_(UIStrings.warningXhtml));
+  }
+
   const networkError = getNetworkError(mainRecord);
   const interstitialError = getInterstitialError(mainRecord, networkRecords);
   const nonHtmlError = getNonHtmlError(finalRecord);
@@ -145,10 +164,10 @@ function getPageLoadError(navigationError, context) {
   return navigationError;
 }
 
-
 module.exports = {
   getNetworkError,
   getInterstitialError,
   getPageLoadError,
   getNonHtmlError,
+  UIStrings,
 };

package/lighthouse-core/util-commonjs.js

@@ -572,15 +572,16 @@ class Util {
  */
 Util.reportJson = null;
 
+let svgSuffix = 0;
 /**
  * An always-increasing counter for making unique SVG ID suffixes.
  */
-Util.getUniqueSuffix = (() => {
-  let svgSuffix = 0;
-  return function() {
-    return svgSuffix++;
-  };
-})();
+Util.getUniqueSuffix = () => {
+  return svgSuffix++;
+};
+Util.resetUniqueSuffix = () => {
+  svgSuffix = 0;
+};
 
 /**
  * Report-renderer-specific strings.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.5.0-dev.20220628",
+  "version": "9.5.0-dev.20220629",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -35,24 +35,24 @@
     "smoke": "node lighthouse-cli/test/smokehouse/frontends/smokehouse-bin.js",
     "debug": "node --inspect-brk ./lighthouse-cli/index.js",
     "start": "yarn build-report --standalone && node ./lighthouse-cli/index.js",
-    "jest": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js",
+    "mocha": "node lighthouse-core/test/scripts/run-mocha-tests.js",
     "test": "yarn diff:sample-json && yarn lint --quiet && yarn unit && yarn type-check",
     "test-bundle": "yarn smoke --runner bundle --retries=2",
-    "test-clients": "yarn jest \"$PWD/clients/\" && yarn jest --testMatch=\"**/clients/test/**/*-test-pptr.js\"",
-    "test-viewer": "yarn unit-viewer && yarn jest --testMatch=\"**/viewer/**/*-test-pptr.js\"",
-    "test-treemap": "yarn unit-treemap && yarn jest --testMatch=\"**/treemap/**/*-test-pptr.js\"",
+    "test-clients": "yarn mocha --testMatch clients/**/*-test.js && yarn mocha --testMatch clients/**/*-test-pptr.js",
+    "test-viewer": "yarn unit-viewer && yarn mocha --testMatch viewer/**/*-test-pptr.js --timeout 35000",
+    "test-treemap": "yarn unit-treemap && yarn mocha --testMatch treemap/**/*-test-pptr.js --timeout 35000",
     "test-lantern": "bash lighthouse-core/scripts/test-lantern.sh",
     "test-legacy-javascript": "bash lighthouse-core/scripts/test-legacy-javascript.sh",
     "test-docs": "yarn --cwd docs/recipes/ test",
     "test-proto": "yarn compile-proto && yarn build-proto-roundtrip",
-    "unit-core": "yarn jest \"lighthouse-core\"",
-    "unit-cli": "yarn jest \"lighthouse-cli/\"",
-    "unit-report": "yarn jest \"report/\"",
-    "unit-treemap": "yarn jest \"treemap/.*-test.js\"",
-    "unit-viewer": "yarn jest \"viewer/.*-test.js\"",
-    "unit-flow": "yarn jest \"flow-report/.*-test.[tj]s[x]?\"",
-    "unit": "yarn jest",
-    "unit:ci": "NODE_OPTIONS=--max-old-space-size=8192 npm run jest --ci .",
+    "unit-core": "yarn mocha lighthouse-core",
+    "unit-cli": "yarn mocha --testMatch lighthouse-cli/**/*-test.js",
+    "unit-report": "yarn mocha --testMatch report/**/*-test.js",
+    "unit-treemap": "yarn mocha --testMatch treemap/**/*-test.js",
+    "unit-viewer": "yarn mocha --testMatch viewer/**/*-test.js",
+    "unit-flow": "bash flow-report/test/run-flow-report-tests.sh",
+    "unit": "yarn unit-flow && yarn mocha",
+    "unit:ci": "NODE_OPTIONS=--max-old-space-size=8192 npm run unit --forbid-only",
     "core-unit": "yarn unit-core",
     "cli-unit": "yarn unit-cli",
     "viewer-unit": "yarn unit-viewer",
@@ -96,6 +96,8 @@
   },
   "devDependencies": {
     "@build-tracker/cli": "^1.0.0-beta.15",
+    "@esbuild-kit/esm-loader": "^2.1.1",
+    "@jest/fake-timers": "^28.1.0",
     "@rollup/plugin-alias": "^3.1.2",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-dynamic-import-vars": "^1.1.1",
@@ -103,7 +105,7 @@
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-typescript": "^8.2.5",
     "@stadtlandnetz/rollup-plugin-postprocess": "^1.1.0",
-    "@testing-library/preact": "^2.0.1",
+    "@testing-library/preact": "^3.1.1",
     "@testing-library/preact-hooks": "^1.1.0",
     "@types/archiver": "^2.1.2",
     "@types/chrome": "^0.0.154",
@@ -113,10 +115,10 @@
     "@types/estree": "^0.0.50",
     "@types/gh-pages": "^2.0.0",
     "@types/google.analytics": "0.0.39",
-    "@types/jest": "^27.0.3",
     "@types/jpeg-js": "^0.3.7",
     "@types/jsdom": "^16.2.13",
     "@types/lodash": "^4.14.178",
+    "@types/mocha": "^9.0.0",
     "@types/node": "*",
     "@types/pako": "^1.0.1",
     "@types/resize-observer-browser": "^0.1.1",
@@ -130,7 +132,7 @@
     "acorn": "^8.5.0",
     "angular": "^1.7.4",
     "archiver": "^3.0.0",
-    "c8": "^7.4.0",
+    "c8": "^7.11.3",
     "chalk": "^2.4.1",
     "chrome-devtools-frontend": "1.0.1012379",
     "concurrently": "^6.4.0",
@@ -146,22 +148,25 @@
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-local-rules": "1.1.0",
     "event-target-shim": "^6.0.2",
+    "expect": "^28.1.0",
     "firebase": "^9.0.2",
     "gh-pages": "^2.0.1",
     "glob": "^7.1.3",
     "idb-keyval": "2.2.0",
     "intl-messageformat-parser": "^1.8.1",
-    "jest": "27.1.1",
+    "jest-mock": "^27.3.0",
+    "jest-snapshot": "^28.1.0",
     "jsdom": "^12.2.0",
     "jsonld": "^5.2.0",
     "jsonlint-mod": "^1.7.6",
     "lighthouse-plugin-publisher-ads": "^1.5.4",
     "magic-string": "^0.25.7",
     "mime-types": "^2.1.30",
+    "mocha": "^10.0.0",
     "node-fetch": "^2.6.1",
     "npm-run-posix-or-windows": "^2.0.2",
     "pako": "^2.0.3",
-    "preact": "^10.5.14",
+    "preact": "^10.7.2",
     "pretty-json-stringify": "^0.0.2",
     "puppeteer": "13.7.0",
     "resolve": "^1.20.0",
@@ -173,7 +178,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "tabulator-tables": "^4.9.3",
     "terser": "^5.3.8",
-    "ts-jest": "^27.0.4",
+    "testdouble": "^3.16.5",
     "typed-query-selector": "^2.6.1",
     "typescript": "^4.7.3",
     "wait-for-expect": "^3.0.2",

package/report/renderer/util.js

@@ -568,15 +568,16 @@ class Util {
  */
 Util.reportJson = null;
 
+let svgSuffix = 0;
 /**
  * An always-increasing counter for making unique SVG ID suffixes.
  */
-Util.getUniqueSuffix = (() => {
-  let svgSuffix = 0;
-  return function() {
-    return svgSuffix++;
-  };
-})();
+Util.getUniqueSuffix = () => {
+  return svgSuffix++;
+};
+Util.resetUniqueSuffix = () => {
+  svgSuffix = 0;
+};
 
 /**
  * Report-renderer-specific strings.

package/report/test/.eslintrc.cjs

@@ -6,6 +6,9 @@
 
 module.exports = {
   env: {
-    jest: true,
+    mocha: true,
+  },
+  globals: {
+    expect: true,
   },
 };

package/report/test/clients/bundle-test.js

@@ -7,7 +7,7 @@
 import fs from 'fs';
 
 import jsdom from 'jsdom';
-import {jest} from '@jest/globals';
+import jestMock from 'jest-mock';
 
 import * as lighthouseRenderer from '../../clients/bundle.js';
 import {LH_ROOT} from '../../../root.js';
@@ -17,8 +17,8 @@ const sampleResultsStr =
 
 describe('lighthouseRenderer bundle', () => {
   let document;
-  beforeAll(() => {
-    global.console.warn = jest.fn();
+  before(() => {
+    global.console.warn = jestMock.fn();
 
     const {window} = new jsdom.JSDOM();
     document = window.document;
@@ -38,7 +38,7 @@ describe('lighthouseRenderer bundle', () => {
     };
   });
 
-  afterAll(() => {
+  after(() => {
     global.window = global.self = undefined;
     global.HTMLInputElement = undefined;
   });

package/report/test/generator/report-generator-test.js

@@ -13,7 +13,9 @@ const fs = require('fs');
 const csvValidator = require('csv-validator');
 
 const ReportGenerator = require('../../generator/report-generator.js');
-const sampleResults = require('../../../lighthouse-core/test/results/sample_v2.json');
+const {readJson} = require('../../../root.js');
+
+const sampleResults = readJson('lighthouse-core/test/results/sample_v2.json');
 
 describe('ReportGenerator', () => {
   describe('#replaceStrings', () => {

package/report/test/renderer/category-renderer-test.js

@@ -13,7 +13,7 @@ import {I18n} from '../../renderer/i18n.js';
 import {DOM} from '../../renderer/dom.js';
 import {DetailsRenderer} from '../../renderer/details-renderer.js';
 import {CategoryRenderer} from '../../renderer/category-renderer.js';
-import {readJson} from '../../../root.js';
+import {readJson} from '../../../lighthouse-core/test/test-utils.js';
 
 const sampleResultsOrig = readJson('../../../lighthouse-core/test/results/sample_v2.json', import.meta);
 
@@ -21,7 +21,7 @@ describe('CategoryRenderer', () => {
   let renderer;
   let sampleResults;
 
-  beforeAll(() => {
+  before(() => {
     Util.i18n = new I18n('en', {...Util.UIStrings});
 
     const {document} = new jsdom.JSDOM().window;
@@ -32,7 +32,7 @@ describe('CategoryRenderer', () => {
     sampleResults = Util.prepareReportResult(sampleResultsOrig);
   });
 
-  afterAll(() => {
+  after(() => {
     Util.i18n = undefined;
   });
 

package/report/test/renderer/components-test.js

@@ -7,7 +7,6 @@
 import fs from 'fs';
 
 import jsdom from 'jsdom';
-import expect from 'expect';
 
 import {DOM} from '../../renderer/dom.js';
 import {LH_ROOT} from '../../../root.js';
@@ -82,41 +81,44 @@ async function assertDOMTreeMatches(tmplEl) {
   }
 }
 
-const originalCreateElement = DOM.prototype.createElement;
-const originalCreateElementNS = DOM.prototype.createElementNS;
-beforeAll(() => {
-  /**
-   * @param {string} classNames
-   */
-  function checkPrefix(classNames) {
-    if (!classNames) return;
-
-    for (const className of classNames.split(' ')) {
-      if (!className.startsWith('lh-')) {
-        throw new Error(`expected classname to start with lh-, got: ${className}`);
+describe('Components', () => {
+  const originalCreateElement = DOM.prototype.createElement;
+  const originalCreateElementNS = DOM.prototype.createElementNS;
+
+  before(() => {
+    /**
+     * @param {string} classNames
+     */
+    function checkPrefix(classNames) {
+      if (!classNames) return;
+
+      for (const className of classNames.split(' ')) {
+        if (!className.startsWith('lh-')) {
+          throw new Error(`expected classname to start with lh-, got: ${className}`);
+        }
       }
     }
-  }
-
-  DOM.prototype.createElement = function(...args) {
-    const classNames = args[1];
-    checkPrefix(classNames);
-    return originalCreateElement.call(this, ...args);
-  };
-  DOM.prototype.createElementNS = function(...args) {
-    const classNames = args[2];
-    checkPrefix(classNames);
-    return originalCreateElementNS.call(this, ...args);
-  };
-});
 
-afterAll(() => {
-  DOM.prototype.createElement = originalCreateElement;
-  DOM.prototype.createElementNS = originalCreateElementNS;
-});
+    DOM.prototype.createElement = function(...args) {
+      const classNames = args[1];
+      checkPrefix(classNames);
+      return originalCreateElement.call(this, ...args);
+    };
+    DOM.prototype.createElementNS = function(...args) {
+      const classNames = args[2];
+      checkPrefix(classNames);
+      return originalCreateElementNS.call(this, ...args);
+    };
+  });
 
-for (const tmpEl of tmplEls) {
-  it(`${tmpEl.id} component matches HTML source`, async () => {
-    await assertDOMTreeMatches(tmpEl);
+  after(() => {
+    DOM.prototype.createElement = originalCreateElement;
+    DOM.prototype.createElementNS = originalCreateElementNS;
   });
-}
+
+  for (const tmpEl of tmplEls) {
+    it(`${tmpEl.id} component matches HTML source`, async () => {
+      await assertDOMTreeMatches(tmpEl);
+    });
+  }
+});

package/report/test/renderer/crc-details-renderer-test.js

@@ -72,7 +72,7 @@ describe('DetailsRenderer', () => {
   let dom;
   let detailsRenderer;
 
-  beforeAll(() => {
+  before(() => {
     Util.i18n = new I18n('en', {...Util.UIStrings});
 
     const {document} = new jsdom.JSDOM().window;
@@ -80,7 +80,7 @@ describe('DetailsRenderer', () => {
     detailsRenderer = new DetailsRenderer(dom);
   });
 
-  afterAll(() => {
+  after(() => {
     Util.i18n = undefined;
   });
 

package/report/test/renderer/details-renderer-test.js

@@ -22,12 +22,12 @@ describe('DetailsRenderer', () => {
     renderer = new DetailsRenderer(dom, options);
   }
 
-  beforeAll(() => {
+  before(() => {
     Util.i18n = new I18n('en', {...Util.UIStrings});
     createRenderer();
   });
 
-  afterAll(() => {
+  after(() => {
     Util.i18n = undefined;
   });
 

package/report/test/renderer/dom-test.js

@@ -6,7 +6,7 @@
 
 import {strict as assert} from 'assert';
 
-import {jest} from '@jest/globals';
+import jestMock from 'jest-mock';
 import jsdom from 'jsdom';
 
 import {DOM} from '../../renderer/dom.js';
@@ -19,20 +19,20 @@ describe('DOM', () => {
   let window;
   let nativeCreateObjectURL;
 
-  beforeAll(() => {
+  before(() => {
     Util.i18n = new I18n('en', {...Util.UIStrings});
     window = new jsdom.JSDOM().window;
 
     // The Node version of URL.createObjectURL isn't compatible with the jsdom blob type,
     // so we stub it.
     nativeCreateObjectURL = URL.createObjectURL;
-    URL.createObjectURL = jest.fn(_ => `https://fake-origin/blahblah-blobid`);
+    URL.createObjectURL = jestMock.fn(_ => `https://fake-origin/blahblah-blobid`);
 
     dom = new DOM(window.document);
     dom.setLighthouseChannel('someChannel');
   });
 
-  afterAll(() => {
+  after(() => {
     Util.i18n = undefined;
     URL.createObjectURL = nativeCreateObjectURL;
   });