chore: migrate monorepo to jest 28 (#26958)

* chore: migrate monorepo to jest 28

* feat(test-utilities): move private test/ helpers from utilities package to make test pass with jest 28

* generate changefiles

* chore: bump/dedupe babel family of packages

change/@fluentui-cra-template-f10eef6a-1b73-419f-a2e7-7dc197717334.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "chore: bump jest types for template",
+  "packageName": "@fluentui/cra-template",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-keyboard-key-a7ab483a-ff5b-4418-9cd0-d6923f27c65a.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update tsconfig lib as jest now requires at least ES2015",
+  "packageName": "@fluentui/keyboard-key",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-merge-styles-5c607e3a-caee-4034-99f2-8d9fe11d9a2d.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update tsconfig lib as jest now requires at least ES2015",
+  "packageName": "@fluentui/merge-styles",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-utilities-f5fcc3b0-a98b-493a-b86e-209cbc67e9b9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: export omit function",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-set-version-ec97f740-d9b3-4e52-b6c9-410f973a2a97.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: update tsconfig lib as jest now requires at least ES2015",
+  "packageName": "@fluentui/set-version",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

change/@fluentui-test-utilities-0c2788af-c2c0-4461-8283-7d48f3dbd467.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: move private test/ helpers from utilities package to make test pass with jest 28",
+  "packageName": "@fluentui/test-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-utilities-e25fe181-f57b-4d5f-b94d-d5de3c035b5e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: remove private test/ helpers used within monorepo tests",
+  "packageName": "@fluentui/utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -66,23 +66,23 @@
     "@actions/core": "1.9.1",
     "@actions/github": "5.0.3",
     "@azure/data-tables": "13.0.0",
-    "@babel/core": "7.18.9",
-    "@babel/generator": "7.18.9",
-    "@babel/parser": "7.18.9",
+    "@babel/core": "7.21.0",
+    "@babel/generator": "7.21.1",
+    "@babel/parser": "7.21.1",
     "@babel/plugin-proposal-class-properties": "7.18.6",
-    "@babel/plugin-proposal-decorators": "7.18.9",
+    "@babel/plugin-proposal-decorators": "7.21.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "7.18.9",
+    "@babel/plugin-proposal-optional-chaining": "7.21.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-object-rest-spread": "7.8.3",
-    "@babel/plugin-transform-runtime": "7.18.9",
-    "@babel/preset-env": "7.18.9",
+    "@babel/plugin-transform-runtime": "7.21.0",
+    "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
-    "@babel/register": "7.18.9",
-    "@babel/standalone": "7.18.9",
-    "@babel/traverse": "7.18.9",
-    "@babel/types": "7.20.7",
+    "@babel/register": "7.21.0",
+    "@babel/standalone": "7.21.1",
+    "@babel/traverse": "7.21.2",
+    "@babel/types": "7.21.2",
     "@cactuslab/usepubsub": "^1.0.2",
     "@ctrl/tinycolor": "3.3.4",
     "@cypress/react": "5.12.4",
@@ -94,7 +94,7 @@
     "@griffel/react": "^1.5.2",
     "@griffel/webpack-extraction-plugin": "0.3.3",
     "@griffel/webpack-loader": "2.1.8",
-    "@jest/reporters": "27.5.1",
+    "@jest/reporters": "28.1.3",
     "@mdx-js/loader": "1.6.22",
     "@microsoft/api-extractor": "7.18.1",
     "@microsoft/eslint-plugin-sdl": "0.1.9",
@@ -127,7 +127,7 @@
     "@swc/core": "1.3.30",
     "@swc/helpers": "0.4.14",
     "@testing-library/dom": "8.11.3",
-    "@testing-library/jest-dom": "5.16.1",
+    "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
@@ -153,7 +153,7 @@
     "@types/gulp-remember": "0.0.31",
     "@types/gulp-sourcemaps": "0.0.35",
     "@types/gulp-util": "3.0.36",
-    "@types/jest": "27.5.2",
+    "@types/jest": "28.1.8",
     "@types/jest-axe": "3.5.5",
     "@types/jju": "1.4.1",
     "@types/json-schema": "^7.0.8",
@@ -190,7 +190,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "ajv": "8.4.0",
     "autoprefixer": "10.2.1",
-    "babel-jest": "27.5.1",
+    "babel-jest": "28.1.3",
     "babel-loader": "8.2.2",
     "babel-plugin-annotate-pure-calls": "0.4.0",
     "babel-plugin-annotate-pure-imports": "1.0.0-1",
@@ -254,13 +254,13 @@
     "html-webpack-plugin": "5.1.0",
     "ignore-not-found-export-webpack-plugin": "1.0.2",
     "imports-loader": "1.2.0",
-    "jest": "27.5.1",
+    "jest": "28.1.3",
     "jest-axe": "6.0.1",
-    "jest-cli": "27.5.1",
-    "jest-environment-jsdom": "27.5.1",
-    "jest-environment-node-single-context": "27.3.0",
-    "jest-snapshot": "27.5.1",
-    "jest-watch-typeahead": "0.6.5",
+    "jest-cli": "28.1.3",
+    "jest-environment-jsdom": "28.1.3",
+    "jest-environment-node-single-context": "28.1.0",
+    "jest-snapshot": "28.1.3",
+    "jest-watch-typeahead": "1.1.0",
     "jju": "1.4.0",
     "json-schema": "0.4.0",
     "json-stable-stringify-without-jsonify": "1.0.1",
@@ -331,7 +331,7 @@
     "terser-webpack-plugin": "5.3.1",
     "through2": "4.0.2",
     "tmp": "0.2.1",
-    "ts-jest": "27.1.5",
+    "ts-jest": "28.0.8",
     "ts-loader": "9.3.1",
     "ts-node": "10.9.1",
     "tsconfig-paths": "4.1.0",

packages/bundle-size/src/utils/prepareFixture.test.js

@@ -48,7 +48,7 @@ export default { foo: 'bar' }
 `);
 
     await expect(prepareFixture(fixturePath)).rejects.toMatchInlineSnapshot(
-      `[Error: unknown: Validation failed for a schema in a component: data must have required property 'name']`,
+      `[Error: unknown file: Validation failed for a schema in a component: data must have required property 'name']`,
     );
   });
 

packages/cra-template/template.json

@@ -8,7 +8,7 @@
       "@types/node": "^14.0.0",
       "@types/react": "^17.0.0",
       "@types/react-dom": "^17.0.0",
-      "@types/jest": "^27.5.2",
+      "@types/jest": "^28.1.8",
       "react": "^17.0.0",
       "react-dom": "^17.0.0",
       "typescript": "^4.1.2",

packages/keyboard-key/tsconfig.json

@@ -4,6 +4,7 @@
     "outDir": "dist",
     "target": "es5",
     "module": "commonjs",
+    "lib": ["ES5", "ES2015.Collection", "DOM"],
     "jsx": "react",
     "declaration": true,
     "sourceMap": true,
@@ -15,7 +16,6 @@
     "noImplicitAny": true,
     "moduleResolution": "node",
     "preserveConstEnums": true,
-    "lib": ["es5", "dom"],
     "types": ["jest"],
     "isolatedModules": true
   },

packages/merge-styles/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "es5",
     "outDir": "lib",
     "module": "commonjs",
-    "lib": ["es5", "dom"],
+    "lib": ["ES5", "ES2015.Collection", "dom"],
     "jsx": "react",
     "declaration": true,
     "sourceMap": true,

packages/react-components/react-persona/src/components/Persona/Persona.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { isConformant } from '../../testing/isConformant';
-import { omit } from '@fluentui/react-utilities/src/utils/omit';
+import { omit } from '@fluentui/react-utilities';
 import { Persona } from './Persona';
 import { personaClassNames } from './usePersonaStyles';
 import { render, screen } from '@testing-library/react';

packages/react-components/react-utilities/etc/react-utilities.api.md

@@ -102,6 +102,9 @@ export function mergeCallbacks<Args extends unknown[]>(callback1: ((...args: Arg
 // @public (undocumented)
 export type NativeTouchOrMouseEvent = MouseEvent | TouchEvent;
 
+// @public
+export function omit<TObj extends Record<string, any>, Exclusions extends (keyof TObj)[]>(obj: TObj, exclusions: Exclusions): Omit<TObj, Exclusions[number]>;
+
 // @public (undocumented)
 export type ReactTouchOrMouseEvent = React_2.MouseEvent | React_2.TouchEvent;
 

packages/react-components/react-utilities/src/index.ts

@@ -42,6 +42,7 @@ export {
   mergeCallbacks,
   isHTMLElement,
   isInteractiveHTMLElement,
+  omit,
 } from './utils/index';
 
 export { applyTriggerPropsToChildren, getTriggerChild, isFluentTrigger } from './trigger/index';

packages/react/src/components/Fabric/Fabric.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable deprecation/deprecation */
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 //import { Customizer } from '@fluentui/utilities';
 import { Fabric } from './Fabric';
 //import { Checkbox } from '@fluentui/react/lib/Checkbox';

packages/react/src/components/Image/Image.test.tsx

@@ -1,6 +1,6 @@
 import { mount } from 'enzyme';
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { Image } from './Image';
 import { ImageBase } from './Image.base';
 import { ImageFit, ImageCoverStyle } from './Image.types';

packages/react/src/components/Link/Link.test.tsx

@@ -1,7 +1,7 @@
 import { mount } from 'enzyme';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/server';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { Customizer } from '@fluentui/utilities';
 import { createTheme } from '@fluentui/style-utilities';
 import { isConformant } from '../../common/isConformant';

packages/react/src/components/OverflowSet/OverflowSet.test.tsx

@@ -1,7 +1,7 @@
 import { shallow } from 'enzyme';
 import { ReactWrapper, mount } from 'enzyme';
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import * as ReactTestUtils from 'react-dom/test-utils';
 import { CommandBarButton } from '../../Button';
 import { KeytipLayer, KeytipLayerBase } from '../../KeytipLayer';

packages/react/src/components/Persona/Persona.deprecated.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { setRTL, setWarningCallback } from '@fluentui/utilities';
 import { Persona } from './Persona';
 import { mount } from 'enzyme';

packages/react/src/components/Persona/Persona.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { TestImages } from '@fluentui/example-data';
 import { Icon } from '../../Icon';
 import { setRTL } from '../../Utilities';

packages/react/src/components/Persona/PersonaCoin/PersonaCoin.deprecated.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { setWarningCallback, setRTL } from '../../../Utilities';
 import { PersonaCoin } from './PersonaCoin';
 

packages/react/src/components/Persona/PersonaCoin/PersonaCoin.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { setRTL } from '../../../Utilities';
 import { PersonaCoin } from './PersonaCoin';
 import { wrapPersona } from '../test-utils';

packages/react/src/components/Persona/PersonaPresence/PersonaPresence.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { setRTL } from '../../../Utilities';
 import * as PersonaTypes from '../Persona.types';
 import { PersonaPresence } from './PersonaPresence';

packages/react/src/components/Pivot/Pivot.deprecated.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { setWarningCallback, resetIds } from '@fluentui/utilities';
 
 import { Pivot, PivotItem } from './index';

packages/react/src/components/SearchBox/SearchBox.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { mount, ReactWrapper } from 'enzyme';
 import { SearchBox } from './SearchBox';
 import { KeyCodes, resetIds } from '../../Utilities';

packages/react/src/components/SpinButton/SpinButton.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactTestUtils from 'react-dom/test-utils';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { ReactWrapper, mount } from 'enzyme';
 
 import { SpinButton } from './SpinButton';

packages/react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { mount } from 'enzyme';
 import { SwatchColorPicker } from './SwatchColorPicker';
 import { resetIds } from '@fluentui/utilities';

packages/react/src/components/TimePicker/TimePicker.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TimePicker } from './TimePicker';
 // import { ITimeRange } from './TimePicker.types';
-// import { create } from '@fluentui/utilities/lib/test';
+// import { create } from '@fluentui/test-utilities';
 import { mount } from 'enzyme';
 import type { IComboBox } from '../ComboBox/ComboBox.types';
 import { KeyCodes } from '../../Utilities';

packages/react/src/components/Toggle/Toggle.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
-import { create } from '@fluentui/utilities/lib/test';
+import { create } from '@fluentui/test-utilities';
 import { resetIds } from '@fluentui/utilities';
 import { Toggle } from './Toggle';
 import { isConformant } from '../../common/isConformant';

packages/set-version/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "es5",
     "outDir": "lib",
     "module": "commonjs",
-    "lib": ["es5", "dom"],
+    "lib": ["ES5", "ES2015.Collection", "dom"],
     "declaration": true,
     "sourceMap": true,
     "importHelpers": true,

packages/test-utilities/package.json

@@ -28,5 +28,11 @@
     "enzyme": "^3.0.0",
     "react": ">=16.8.0 <19.0.0",
     "react-test-renderer": ">=16.3.0 <18.0.0"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib-commonjs/index.d.ts",
+      "require": "./lib-commonjs/index.js"
+    }
   }
 }

packages/test-utilities/src/index.ts

@@ -2,3 +2,4 @@ export { createTestContainer } from './createTestContainer';
 export { getCSSRules } from './getCSSRules';
 export { safeCreate } from './safeCreate';
 export { safeMount } from './safeMount';
+export { create } from './reactTestRenderer';