lighthouse 9.5.0-dev.20220626 → 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/audits/network-requests.js

@@ -8,6 +8,7 @@
 const Audit = require('./audit.js');
 const URL = require('../lib/url-shim.js');
 const NetworkRecords = require('../computed/network-records.js');
+const MainResource = require('../computed/main-resource.js');
 
 class NetworkRequests extends Audit {
   /**
@@ -19,7 +20,7 @@ class NetworkRequests extends Audit {
       scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
       title: 'Network Requests',
       description: 'Lists the network requests that were made during page load.',
-      requiredArtifacts: ['devtoolsLogs'],
+      requiredArtifacts: ['devtoolsLogs', 'URL', 'GatherContext'],
     };
   }
 
@@ -28,75 +29,91 @@ class NetworkRequests extends Audit {
    * @param {LH.Audit.Context} context
    * @return {Promise<LH.Audit.Product>}
    */
-  static audit(artifacts, context) {
+  static async audit(artifacts, context) {
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
-    return NetworkRecords.request(devtoolsLog, context).then(records => {
-      const earliestStartTime = records.reduce(
-        (min, record) => Math.min(min, record.startTime),
-        Infinity
-      );
+    const records = await NetworkRecords.request(devtoolsLog, context);
+    const earliestStartTime = records.reduce(
+      (min, record) => Math.min(min, record.startTime),
+      Infinity
+    );
 
-      /** @param {number} time */
-      const timeToMs = time => time < earliestStartTime || !Number.isFinite(time) ?
-        undefined : (time - earliestStartTime) * 1000;
+    // Optional mainFrameId check because the main resource is only available for
+    // navigations. TODO: https://github.com/GoogleChrome/lighthouse/issues/14157
+    // for the general solution to this.
+    /** @type {string|undefined} */
+    let mainFrameId;
+    if (artifacts.GatherContext.gatherMode === 'navigation') {
+      const mainResource = await MainResource.request({devtoolsLog, URL: artifacts.URL}, context);
+      mainFrameId = mainResource.frameId;
+    }
 
-      const results = records.map(record => {
-        const endTimeDeltaMs = record.lrStatistics?.endTimeDeltaMs;
-        const TCPMs = record.lrStatistics?.TCPMs;
-        const requestMs = record.lrStatistics?.requestMs;
-        const responseMs = record.lrStatistics?.responseMs;
+    /** @param {number} time */
+    const timeToMs = time => time < earliestStartTime || !Number.isFinite(time) ?
+      undefined : (time - earliestStartTime) * 1000;
 
-        return {
-          url: URL.elideDataURI(record.url),
-          protocol: record.protocol,
-          startTime: timeToMs(record.startTime),
-          endTime: timeToMs(record.endTime),
-          finished: record.finished,
-          transferSize: record.transferSize,
-          resourceSize: record.resourceSize,
-          statusCode: record.statusCode,
-          mimeType: record.mimeType,
-          resourceType: record.resourceType,
-          lrEndTimeDeltaMs: endTimeDeltaMs, // Only exists on Lightrider runs
-          lrTCPMs: TCPMs, // Only exists on Lightrider runs
-          lrRequestMs: requestMs, // Only exists on Lightrider runs
-          lrResponseMs: responseMs, // Only exists on Lightrider runs
-        };
-      });
-
-      // NOTE(i18n): this audit is only for debug info in the LHR and does not appear in the report.
-      /** @type {LH.Audit.Details.Table['headings']} */
-      const headings = [
-        {key: 'url', itemType: 'url', text: 'URL'},
-        {key: 'protocol', itemType: 'text', text: 'Protocol'},
-        {key: 'startTime', itemType: 'ms', granularity: 1, text: 'Start Time'},
-        {key: 'endTime', itemType: 'ms', granularity: 1, text: 'End Time'},
-        {
-          key: 'transferSize',
-          itemType: 'bytes',
-          displayUnit: 'kb',
-          granularity: 1,
-          text: 'Transfer Size',
-        },
-        {
-          key: 'resourceSize',
-          itemType: 'bytes',
-          displayUnit: 'kb',
-          granularity: 1,
-          text: 'Resource Size',
-        },
-        {key: 'statusCode', itemType: 'text', text: 'Status Code'},
-        {key: 'mimeType', itemType: 'text', text: 'MIME Type'},
-        {key: 'resourceType', itemType: 'text', text: 'Resource Type'},
-      ];
-
-      const tableDetails = Audit.makeTableDetails(headings, results);
+    const results = records.map(record => {
+      const endTimeDeltaMs = record.lrStatistics?.endTimeDeltaMs;
+      const TCPMs = record.lrStatistics?.TCPMs;
+      const requestMs = record.lrStatistics?.requestMs;
+      const responseMs = record.lrStatistics?.responseMs;
+      // Default these to undefined so omitted from JSON in the negative case.
+      const isLinkPreload = record.isLinkPreload || undefined;
+      const experimentalFromMainFrame = mainFrameId ?
+        ((record.frameId === mainFrameId) || undefined) :
+        undefined;
 
       return {
-        score: 1,
-        details: tableDetails,
+        url: URL.elideDataURI(record.url),
+        protocol: record.protocol,
+        startTime: timeToMs(record.startTime),
+        endTime: timeToMs(record.endTime),
+        finished: record.finished,
+        transferSize: record.transferSize,
+        resourceSize: record.resourceSize,
+        statusCode: record.statusCode,
+        mimeType: record.mimeType,
+        resourceType: record.resourceType,
+        isLinkPreload,
+        experimentalFromMainFrame,
+        lrEndTimeDeltaMs: endTimeDeltaMs, // Only exists on Lightrider runs
+        lrTCPMs: TCPMs, // Only exists on Lightrider runs
+        lrRequestMs: requestMs, // Only exists on Lightrider runs
+        lrResponseMs: responseMs, // Only exists on Lightrider runs
       };
     });
+
+    // NOTE(i18n): this audit is only for debug info in the LHR and does not appear in the report.
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'url', itemType: 'url', text: 'URL'},
+      {key: 'protocol', itemType: 'text', text: 'Protocol'},
+      {key: 'startTime', itemType: 'ms', granularity: 1, text: 'Start Time'},
+      {key: 'endTime', itemType: 'ms', granularity: 1, text: 'End Time'},
+      {
+        key: 'transferSize',
+        itemType: 'bytes',
+        displayUnit: 'kb',
+        granularity: 1,
+        text: 'Transfer Size',
+      },
+      {
+        key: 'resourceSize',
+        itemType: 'bytes',
+        displayUnit: 'kb',
+        granularity: 1,
+        text: 'Resource Size',
+      },
+      {key: 'statusCode', itemType: 'text', text: 'Status Code'},
+      {key: 'mimeType', itemType: 'text', text: 'MIME Type'},
+      {key: 'resourceType', itemType: 'text', text: 'Resource Type'},
+    ];
+
+    const tableDetails = Audit.makeTableDetails(headings, results);
+
+    return {
+      score: 1,
+      details: tableDetails,
+    };
   }
 }
 

package/lighthouse-core/audits/preload-lcp-image.js

@@ -23,6 +23,10 @@ const UIStrings = {
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
 
+/**
+ * @typedef {Array<{url: string, initiatorType: string}>} InitiatorPath
+ */
+
 class PreloadLCPImageAudit extends Audit {
   /**
    * @return {LH.Audit.Meta}
@@ -86,22 +90,33 @@ class PreloadLCPImageAudit extends Audit {
    * @param {LH.Gatherer.Simulation.GraphNode} graph
    * @param {LH.Artifacts.TraceElement|undefined} lcpElement
    * @param {Array<LH.Artifacts.ImageElement>} imageElements
-   * @return {LH.Gatherer.Simulation.GraphNetworkNode|undefined}
+   * @return {{lcpNodeToPreload?: LH.Gatherer.Simulation.GraphNetworkNode, initiatorPath?: InitiatorPath}}
    */
   static getLCPNodeToPreload(mainResource, graph, lcpElement, imageElements) {
-    if (!lcpElement) return undefined;
+    if (!lcpElement) return {};
 
     const lcpImageElement = imageElements.find(elem => {
       return elem.node.devtoolsNodePath === lcpElement.node.devtoolsNodePath;
     });
 
-    if (!lcpImageElement) return undefined;
+    if (!lcpImageElement) return {};
     const lcpUrl = lcpImageElement.src;
     const {lcpNode, path} = PreloadLCPImageAudit.findLCPNode(graph, lcpUrl);
-    if (!lcpNode || !path) return undefined;
+    if (!lcpNode || !path) return {};
+
     // eslint-disable-next-line max-len
     const shouldPreload = PreloadLCPImageAudit.shouldPreloadRequest(lcpNode.record, mainResource, path);
-    return shouldPreload ? lcpNode : undefined;
+    const lcpNodeToPreload = shouldPreload ? lcpNode : undefined;
+
+    const initiatorPath = [
+      {url: lcpNode.record.url, initiatorType: lcpNode.initiatorType},
+      ...path.map(n => ({url: n.record.url, initiatorType: n.initiatorType})),
+    ];
+
+    return {
+      lcpNodeToPreload,
+      initiatorPath,
+    };
   }
 
   /**
@@ -215,10 +230,10 @@ class PreloadLCPImageAudit extends Audit {
 
     const graph = lanternLCP.pessimisticGraph;
     // eslint-disable-next-line max-len
-    const lcpNode = PreloadLCPImageAudit.getLCPNodeToPreload(mainResource, graph, lcpElement, artifacts.ImageElements);
+    const {lcpNodeToPreload, initiatorPath} = PreloadLCPImageAudit.getLCPNodeToPreload(mainResource, graph, lcpElement, artifacts.ImageElements);
 
     const {results, wastedMs} =
-      PreloadLCPImageAudit.computeWasteWithGraph(lcpElement, lcpNode, graph, simulator);
+      PreloadLCPImageAudit.computeWasteWithGraph(lcpElement, lcpNodeToPreload, graph, simulator);
 
     /** @type {LH.Audit.Details.Opportunity['headings']} */
     const headings = [
@@ -228,6 +243,17 @@ class PreloadLCPImageAudit extends Audit {
     ];
     const details = Audit.makeOpportunityDetails(headings, results, wastedMs);
 
+    // If LCP element was an image and had valid network records (regardless of
+    // if it should be preloaded), it will be found first in the `initiatorPath`.
+    // Otherwise path and length will be undefined.
+    if (initiatorPath) {
+      details.debugData = {
+        type: 'debugdata',
+        initiatorPath,
+        pathLength: initiatorPath.length,
+      };
+    }
+
     return {
       score: UnusedBytes.scoreForWastedMs(wastedMs),
       numericValue: wastedMs,

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/dependency-graph/network-node.js

@@ -44,7 +44,7 @@ class NetworkNode extends BaseNode {
   }
 
   /**
-   * @return {?string}
+   * @return {string}
    */
   get initiatorType() {
     return this._record.initiator && this._record.initiator.type;

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.20220626",
+  "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",