[Chore] upgrade Jest to v29

[mgadewoll]

Summary

closes #6813
closes #7322

Note

This PR upgrades jest and all related dependencies (including jsdom) to their latest versions. With that EUI will be using jest version ^29.7.0 and jsdom version 24.1.0 now.

Changes

Note

The upgrade resulted in 226 failed unit tests and 84 failed snapshot tests

Dependencies

1. 📦 Updated main jest testing dependencies

• jest - ^29.7.0
• jest-cli - ^29.7.0
• @types/jest - ^29.5.12
• babel-jest: ^29.7.0
• eslint-plugin-jest: ^28.5.0

🔗 See the change here

2. 📦 added jest-environment-jsdom dependency

Since version 28 jest does not include the environment by default anymore. We're adding it manually now.

• jest-environment-jsdom - ^29.7.0

🔗 See the change here

It's enabled in the jest config (packages/eui/scripts/jest/config.js) via testEnvironment option:

testEnvironment: 'jsdom'

🔗 See the change here

Setup

1. 🧪 update getCacheDirectory import

We can't import from the file directly anymore from the jest-config package subdirectory as it's not covered by the exports option defined in its package.json file. We can import the config and use the defined cacheDirectory default option instead (jest-config).

// old
const getCacheDirectory =
  require('jest-config/build/getCacheDirectory').default;

// new
const jestConfig = require('jest-config');
const getCacheDirectory = () => jestConfig.defaults.cacheDirectory;

🔗 See the change here

2. 🧪 add modulenameMapper option for uuid as it causes syntax erros due to using es6 syntax

moduleNameMapper: {
    '^uuid$': require.resolve('uuid'),
}

🔗 See the change here

3. 📦 fix jsdom version to a newer version than used by jest-environment-jsdom

With the update there were tests failing on color value changes and some of these showed that hsl() inputs are a) no longer output as is and b) not output correctly. (hsl values would show up as rgb(0, 0, 0)

ℹ️ It's expected that jsdom converts color values to rgb values and it uses cssstyle for that. There was a fix for the wrongly converted hsl values from version 4.0.0 (changelog) which is available from jsdom version 23.1.0 (changelog).
The latest jest-environment-jsdom version 29.7.0 however still uses jsdom version 20.0.0 and the most recent alpha version 30.0.0-alpha.1 only uses 22.0.0 (changelog)

💡 Instead we can use resolutions to enforce jsdom version 24.0.0 for now which includes the hsl conversion fix and did not seem to affect any other tests.

"resolutions": {
    "jsdom": "24.1.0"
}

🔗 See change here

Important

After this upgrade all color values are output as converted rgb for testing (unit and snapshot) which means we need to assert color checks using rgb values.

Broken tests

1. 🎨 Updates to test and snapshots as general side effects due to changes in the versions

There were a few generic reasons tests needed updating, which are:

• color value conversion changes (mentioned in point 5 above)
  • this caused some snapshot updates as well as updates to test assertions (changes 1, 2, 3, 4, 5, 6)
• newly supported css features (e.g. aspect-ratio, cal(), css properties) (changes 1, 2, 3)
• js syntax changes
  • lots of snapshot updates are only related to using shorthand syntax (Object {} vs {} or Array [] vs [])

2. 💥 Further updates due to broken test functionality

There were some tests that broke in functionality and the main point of friction was handling focus in enzyme tests.
As we're migrating to RTL (testing-library/react) this was a good opportunity to update failing tests to use RTL which generally also fixed the issues.

Note

This PR only updates the min. required parts of tests to RTL to ensure tests are passing
This is to keep within the scope of the tasks. For some larger tests (I'm looking at you, EuiDataGrid) this still means that many updates to the code were done as there where many usages of updated functionality.

QA

• passing pipeline should give us confidence that the upgrade works
• review value changes in snapshots and test assertions if nothing's off or unexpected

[tkajtoch]

I'm in the process of reviewing this PR!

[tkajtoch]

Is this only related to jest v29?

[mgadewoll]

It did show up in the migration but I can't fully answer this, as I did not convert this to RTL with jest v24 but did the migration to jest v29 and conversion to RTL at the same time 😅
It might be a difference in how/when RTL and Enzyme render/mount things to the DOM also? 🤷‍♀️

[tkajtoch]

The changes look and work great! Thank you for putting effort into converting more tests to RTL 😄

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7821/
• Storybook: https://eui.elastic.co/pr_7821/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 3e6cb09

History

• 💚 Build #2208 succeeded 1c3c9e7
• 💚 Build #2179 succeeded 9ee49dd
• 💚 Build #2155 succeeded d2d12cc
• 💚 Build #2143 succeeded 8868bb3
• 💚 Build #2141 succeeded 74f17da
• 💚 Build #2135 succeeded c898270