Summary

closes #6813
closes #7322

Changes

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

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.

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