Update jest monorepo to v28 (major) (#11787)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Bob Silverberg <bob.silverberg@gmail.com>

jest.config.js

@@ -33,7 +33,7 @@ module.exports = {
   // This will initialize the jsdom document with a URL which is necessary
   // for History push state to work.
   // See https://github.com/ReactTraining/react-router/issues/5030
-  testURL: 'http://localhost/',
+  testEnvironmentOptions: { url: 'http://localhost/' },
   transform: {
     '^.+\\.js$': 'babel-jest',
     // This transforms images to be a module that exports the filename.

package.json

@@ -290,8 +290,8 @@
     "husky": "^8.0.0",
     "intl": "^1.2.5",
     "intl-locales-supported": "^1.0.0",
-    "jest": "^27.5.1",
-    "jest-environment-jsdom": "^27.5.1",
+    "jest": "^28.0.0",
+    "jest-environment-jsdom": "^28.0.0",
     "jest-extended": "^3.0.0",
     "jest-watch-typeahead": "^2.0.0",
     "lint-staged": "^13.0.0",

tests/fileTransformer.js

@@ -4,6 +4,8 @@ const path = require('path');
 
 module.exports = {
   process(src, filename) {
-    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+    return {
+      code: `module.exports = ${JSON.stringify(path.basename(filename))};`,
+    };
   },
 };

tests/setup.js

@@ -1,4 +1,5 @@
 import { setImmediate } from 'timers';
+import { TextEncoder } from 'util';
 
 import { configure } from '@testing-library/react';
 import sinon from 'sinon';
@@ -10,6 +11,8 @@ import '@testing-library/jest-dom/extend-expect';
 
 import 'amo/polyfill';
 
+global.TextEncoder = TextEncoder;
+
 if (process.env.TEST_DEBUG !== 'FULL') {
   configure({
     getElementError: (message) => {

tests/unit/amo/middleware/test_requestId.js

@@ -1,3 +1,6 @@
+/**
+ * @jest-environment node
+ */
 import MockExpressRequest from 'mock-express-request';
 import MockExpressResponse from 'mock-express-response';
 

tests/unit/amo/middleware/test_responseTime.js

@@ -1,7 +1,10 @@
+/**
+ * @jest-environment node
+ */
 import EventEmitter from 'events';
 
 import { responseTime } from 'amo/middleware/responseTime';
-import { getFakeConfig, getFakeLogger } from 'tests/unit/helpers';
+import { getFakeConfig, getFakeLogger } from 'tests/unit/helpers_node';
 import { ServerTestHelper } from 'tests/unit/amo/server/test_base';
 
 describe(__filename, () => {

tests/unit/amo/server/test_base.js

@@ -1,3 +1,6 @@
+/**
+ * @jest-environment node
+ */
 /* eslint-disable react/no-multi-comp, max-classes-per-file */
 import { all, fork } from 'redux-saga/effects';
 import { connectRouter, routerMiddleware } from 'connected-react-router';
@@ -29,7 +32,7 @@ import {
   getFakeConfig,
   getFakeLogger,
   userAuthSessionId,
-} from 'tests/unit/helpers';
+} from 'tests/unit/helpers_node';
 
 function createStoreAndSagas({
   history = createHistory({ req: { url: '' } }),

tests/unit/helpers.js

@@ -6,7 +6,6 @@ import {
   onLocationChanged as defaultOnLocationChanged,
 } from 'connected-react-router';
 import PropTypes from 'prop-types';
-import config from 'config';
 import invariant from 'invariant';
 import Jed from 'jed';
 import UAParser from 'ua-parser-js';
@@ -73,6 +72,13 @@ import { EXPERIMENT_COOKIE_NAME } from 'amo/withExperiment';
 import prodConfig from 'config/default';
 import testConfig from 'config/test';
 
+import {
+  createUserAccountResponse as createUserAccountResponseNode,
+  getFakeConfig as getFakeConfigNode,
+  getFakeLogger as getFakeLoggerNode,
+  userAuthSessionId as userAuthSessionIdNode,
+} from './helpers_node';
+
 export const DEFAULT_LANG_IN_TESTS = prodConfig.defaultLang;
 export const sampleUserAgent =
   'Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1';
@@ -485,63 +491,9 @@ export function dispatchClientMetadataWithSagas({
   return dispatchClientMetadata({ store, ...otherArgs });
 }
 
-/*
- * Return a sample sessionId value that we use as the auth token.
- */
-export function userAuthSessionId() {
-  return '123456';
-}
+export const userAuthSessionId = userAuthSessionIdNode;
 
-export function createUserAccountResponse({
-  id = 123456,
-  biography = 'I love making add-ons!',
-  username = 'user-1234',
-  created = '2017-08-15T12:01:13Z',
-  /* eslint-disable camelcase */
-  average_addon_rating = 4.3,
-  display_name = null,
-  fxa_edit_email_url = 'https://example.org/settings',
-  is_addon_developer = false,
-  is_artist = false,
-  num_addons_listed = 1,
-  picture_url = `https://addons.mozilla.org/static/img/zamboni/anon_user.png`,
-  picture_type = '',
-  homepage = null,
-  permissions = [],
-  occupation = null,
-  location = null,
-  site_status = {
-    read_only: false,
-    notice: null,
-  },
-  /* eslint-enable camelcase */
-  ...otherFields
-} = {}) {
-  return {
-    average_addon_rating,
-    biography,
-    created,
-    display_name,
-    fxa_edit_email_url,
-    homepage,
-    id,
-    is_addon_developer,
-    is_artist,
-    location,
-    // This is the API behavior.
-    // eslint-disable-next-line camelcase
-    name: display_name || username,
-    num_addons_listed,
-    occupation,
-    picture_type,
-    picture_url,
-    url: null,
-    username,
-    permissions,
-    site_status,
-    ...otherFields,
-  };
-}
+export const createUserAccountResponse = createUserAccountResponseNode;
 
 export function createFakeErrorHandler({
   capturedError = null,
@@ -1056,29 +1008,7 @@ export function createFakeUserAbuseReport({
   };
 }
 
-// Returns a real-ish config object with custom parameters.
-//
-// Example:
-//
-// const fakeConfig = getFakeConfig({ isDevelopment: true });
-// if (fakeConfig.get('isDevelopment')) {
-//   ...
-// }
-export const getFakeConfig = (
-  params = {},
-  { allowUnknownKeys = false } = {},
-) => {
-  for (const key of Object.keys(params)) {
-    if (!config.has(key) && !allowUnknownKeys) {
-      // This will help alert us when a test accidentally relies
-      // on an invalid config key.
-      throw new Error(
-        `Cannot set a fake value for "${key}"; this key is invalid`,
-      );
-    }
-  }
-  return Object.assign(config.util.cloneDeep(config), params);
-};
+export const getFakeConfig = getFakeConfigNode;
 
 export const getMockConfig = (overrides = {}) => {
   return { ...prodConfig, ...testConfig, ...overrides };
@@ -1299,15 +1229,7 @@ export async function matchingSagaAction(
   return foundAction;
 }
 
-export const getFakeLogger = (params = {}) => {
-  return {
-    debug: sinon.stub(),
-    error: sinon.stub(),
-    info: sinon.stub(),
-    warn: sinon.stub(),
-    ...params,
-  };
-};
+export const getFakeLogger = getFakeLoggerNode;
 
 export const getFakeLoggerWithJest = (params = {}) => {
   return {

tests/unit/helpers_node.js

@@ -0,0 +1,93 @@
+import config from 'config';
+
+export function createUserAccountResponse({
+  id = 123456,
+  biography = 'I love making add-ons!',
+  username = 'user-1234',
+  created = '2017-08-15T12:01:13Z',
+  /* eslint-disable camelcase */
+  average_addon_rating = 4.3,
+  display_name = null,
+  fxa_edit_email_url = 'https://example.org/settings',
+  is_addon_developer = false,
+  is_artist = false,
+  num_addons_listed = 1,
+  picture_url = `https://addons.mozilla.org/static/img/zamboni/anon_user.png`,
+  picture_type = '',
+  homepage = null,
+  permissions = [],
+  occupation = null,
+  location = null,
+  site_status = {
+    read_only: false,
+    notice: null,
+  },
+  /* eslint-enable camelcase */
+  ...otherFields
+} = {}) {
+  return {
+    average_addon_rating,
+    biography,
+    created,
+    display_name,
+    fxa_edit_email_url,
+    homepage,
+    id,
+    is_addon_developer,
+    is_artist,
+    location,
+    // This is the API behavior.
+    // eslint-disable-next-line camelcase
+    name: display_name || username,
+    num_addons_listed,
+    occupation,
+    picture_type,
+    picture_url,
+    url: null,
+    username,
+    permissions,
+    site_status,
+    ...otherFields,
+  };
+}
+
+// Returns a real-ish config object with custom parameters.
+//
+// Example:
+//
+// const fakeConfig = getFakeConfig({ isDevelopment: true });
+// if (fakeConfig.get('isDevelopment')) {
+//   ...
+// }
+export const getFakeConfig = (
+  params = {},
+  { allowUnknownKeys = false } = {},
+) => {
+  for (const key of Object.keys(params)) {
+    if (!config.has(key) && !allowUnknownKeys) {
+      // This will help alert us when a test accidentally relies
+      // on an invalid config key.
+      throw new Error(
+        `Cannot set a fake value for "${key}"; this key is invalid`,
+      );
+    }
+  }
+  return Object.assign(config.util.cloneDeep(config), params);
+};
+
+export const getFakeLogger = (params = {}) => {
+  return {
+    debug: sinon.stub(),
+    error: sinon.stub(),
+    info: sinon.stub(),
+    warn: sinon.stub(),
+    ...params,
+  };
+};
+
+/*
+ * Return a sample sessionId value that we use as the auth token.
+ */
+export function userAuthSessionId() {
+  return '123456';
+}