[Chore] upgrade Jest to v29 (#7821)

package.json

@@ -29,7 +29,8 @@
     "react": "^18",
     "@types/react": "^18",
     "react-focus-lock": "2.9.5",
-    "@babel/core": "^7.21.8"
+    "@babel/core": "^7.21.8",
+    "jsdom": "24.1.0"
   },
   "packageManager": "[email protected]"
 }

packages/eui/package.json

@@ -134,7 +134,7 @@
     "@types/chroma-js": "^2.4.0",
     "@types/classnames": "^2.3.1",
     "@types/enzyme": "^3.10.5",
-    "@types/jest": "^24.0.6",
+    "@types/jest": "^29.5.12",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-is": "^17.0.3",
@@ -150,7 +150,7 @@
     "assert": "^2.0.0",
     "autoprefixer": "^9.8.6",
     "axe-core": "^4.9.0",
-    "babel-jest": "^24.1.0",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-inline-react-svg": "^2.0.2",
@@ -179,7 +179,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-jest": "^28.5.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-local": "^1.0.0",
     "eslint-plugin-mocha": "^10.1.0",
@@ -196,8 +196,9 @@
     "html-format": "^1.0.1",
     "html-webpack-plugin": "^5.5.0",
     "inquirer": "^9.1.4",
-    "jest": "^24.1.0",
-    "jest-cli": "^24.1.0",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "loki": "^0.35.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",

packages/eui/scripts/jest/config.js

@@ -1,5 +1,5 @@
-const getCacheDirectory =
-  require('jest-config/build/getCacheDirectory').default;
+const jestConfig = require('jest-config');
+const getCacheDirectory = () => jestConfig.defaults.cacheDirectory;
 
 // Set REACT_VERSION env variable to latest if empty or invalid
 if (!['16', '17', '18'].includes(process.env.REACT_VERSION)) {
@@ -32,6 +32,7 @@ const config = {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
       '<rootDir>/scripts/jest/mocks/file_mock.js',
     '\\.(css|less|scss)$': '<rootDir>/scripts/jest/mocks/style_mock.js',
+    '^uuid$': require.resolve('uuid'),
   },
   setupFiles: [
     '<rootDir>/scripts/jest/setup/enzyme.js',
@@ -45,6 +46,7 @@ const config = {
   coverageDirectory: '<rootDir>/reports/jest-coverage',
   coverageReporters: ['json', 'html'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  testEnvironment: 'jsdom',
   testMatch: ['**/*.test.js', '**/*.test.ts', '**/*.test.tsx'],
   transform: {
     '^.+\\.(js|tsx?)$': 'babel-jest',

packages/eui/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`EuiAspectRatio renders 1`] = `
   data-test-subj="test subject string"
   height="315"
   src="https://www.youtube.com/embed/yJarWSLRM24"
-  style="block-size: auto; inline-size: 100%;"
+  style="aspect-ratio: 9 / 4; block-size: auto; inline-size: 100%;"
   title="Elastic is a search company"
   width="560"
 />

packages/eui/src/components/aspect_ratio/aspect_ratio.test.tsx

@@ -33,15 +33,16 @@ describe('EuiAspectRatio', () => {
 
   it('merges all styles', () => {
     const { getByTestSubject } = render(
-      <EuiAspectRatio height={4} width={9} style={{ color: 'bronze' }}>
+      <EuiAspectRatio height={4} width={9} style={{ color: 'sienna' }}>
         <div data-test-subj="child" style={{ backgroundColor: 'salmon' }} />
       </EuiAspectRatio>
     );
 
     expect(getByTestSubject('child')).toHaveStyle({
-      color: 'bronze',
-      'background-color': 'salmon',
-      'inline-size': '100%', // jsdom doesn't know how to interpret `aspect-ratio` CSS, so we just check for something it does know how to render
+      color: 'rgb(160, 82, 45)',
+      'background-color': 'rgb(250, 128, 114)',
+      'aspect-ratio': '9 / 4',
+      'inline-size': '100%',
     });
   });
 

packages/eui/src/components/badge/__snapshots__/badge.test.tsx.snap

@@ -178,6 +178,7 @@ exports[`EuiBadge props color accent is rendered 1`] = `
 exports[`EuiBadge props color accepts hex 1`] = `
 <span
   class="euiBadge emotion-euiBadge"
+  style="--euiBadgeBackgroundColor: #333; --euiBadgeTextColor: #FFF;"
   title="Content"
 >
   <span
@@ -195,6 +196,7 @@ exports[`EuiBadge props color accepts hex 1`] = `
 exports[`EuiBadge props color accepts rgba 1`] = `
 <span
   class="euiBadge emotion-euiBadge"
+  style="--euiBadgeBackgroundColor: rgba(255,255,255,1); --euiBadgeTextColor: #000;"
   title="Content"
 >
   <span

packages/eui/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap

@@ -34,7 +34,7 @@ exports[`EuiBottomBar is rendered 1`] = `
 
 exports[`EuiBottomBar props affordForDisplacement can be false 1`] = `
 <body
-  style="padding-bottom: 0px;"
+  style=""
 >
   <div />
   <div
@@ -306,7 +306,7 @@ exports[`EuiBottomBar props position props are altered 1`] = `
 
 exports[`EuiBottomBar props position static is rendered 1`] = `
 <body
-  style="padding-bottom: 0px;"
+  style=""
 >
   <div>
     <section
@@ -332,7 +332,7 @@ exports[`EuiBottomBar props position static is rendered 1`] = `
 
 exports[`EuiBottomBar props position sticky is rendered 1`] = `
 <body
-  style="padding-bottom: 0px;"
+  style=""
 >
   <div>
     <section
@@ -389,7 +389,7 @@ exports[`EuiBottomBar props style is customized 1`] = `
 
 exports[`EuiBottomBar props usePortal can be false 1`] = `
 <body
-  style="padding-bottom: 0px;"
+  style=""
 >
   <div>
     <section