[8.19] Apply @emotion/jest matchers globally (elastic#218114) (elastic#219284)

# Backport

This will backport the following commits from `main` to `8.19`:
- [Apply `@emotion/jest` matchers globally
(elastic#218114)](elastic#218114)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Anton
Dosov","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-04-25T16:24:16Z","message":"Apply
`@emotion/jest` matchers globally (elastic#218114)\n\n## Summary\n\nclose
https://github.com/elastic/kibana/issues/216459\nfollow-up to
https://github.com/elastic/kibana/pull/216489\n\nSince we're migrating
to Emotion from SCSS/styled-components, this PR\nglobally aligns the
Jest setup by adding '@emotion/jest' matchers.\n\nHowever, the matchers
conflict with the styled-components Jest matchers,\nso I had to disable
them globally and reapply them in the tests where\nthey were used
(either the matchers or styled components snapshot\nserializer) .
Tracking issue to clean this
up\nhttps://github.com/elastic/issues/219037 when migrated to
Emotion","sha":"a5502b076348eea13b1ef32c5c9ebc96574bcbc3","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:SharedUX","backport:version","v9.1.0","v8.19.0"],"title":"Apply
`@emotion/jest` matchers
globally","number":218114,"url":"https://github.com/elastic/kibana/pull/218114","mergeCommit":{"message":"Apply
`@emotion/jest` matchers globally (elastic#218114)\n\n## Summary\n\nclose
https://github.com/elastic/kibana/issues/216459\nfollow-up to
https://github.com/elastic/kibana/pull/216489\n\nSince we're migrating
to Emotion from SCSS/styled-components, this PR\nglobally aligns the
Jest setup by adding '@emotion/jest' matchers.\n\nHowever, the matchers
conflict with the styled-components Jest matchers,\nso I had to disable
them globally and reapply them in the tests where\nthey were used
(either the matchers or styled components snapshot\nserializer) .
Tracking issue to clean this
up\nhttps://github.com/elastic/issues/219037 when migrated to
Emotion","sha":"a5502b076348eea13b1ef32c5c9ebc96574bcbc3"}},"sourceBranch":"main","suggestedTargetBranches":["8.19"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/218114","number":218114,"mergeCommit":{"message":"Apply
`@emotion/jest` matchers globally (elastic#218114)\n\n## Summary\n\nclose
https://github.com/elastic/kibana/issues/216459\nfollow-up to
https://github.com/elastic/kibana/pull/216489\n\nSince we're migrating
to Emotion from SCSS/styled-components, this PR\nglobally aligns the
Jest setup by adding '@emotion/jest' matchers.\n\nHowever, the matchers
conflict with the styled-components Jest matchers,\nso I had to disable
them globally and reapply them in the tests where\nthey were used
(either the matchers or styled components snapshot\nserializer) .
Tracking issue to clean this
up\nhttps://github.com/elastic/issues/219037 when migrated to
Emotion","sha":"a5502b076348eea13b1ef32c5c9ebc96574bcbc3"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: Anton Dosov <[email protected]>

Author: kibanamachine

src/core/packages/chrome/browser-internal/src/ui/header/__snapshots__/collapsible_nav.test.tsx.snap

@@ -7,9 +7,13 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { createSerializer } from '@emotion/jest';
+import { createSerializer, matchers } from '@emotion/jest';
 import { replaceEmotionPrefix } from '@elastic/eui/lib/test';
 
+// Add the custom matchers provided by '@emotion/jest'
+// eslint-disable-next-line no-undef
+expect.extend(matchers);
+
 module.exports = createSerializer({
   classNameReplacer: replaceEmotionPrefix,
   includeStyles: false,

src/core/packages/chrome/browser-internal/src/ui/header/__snapshots__/screen_reader_a11y.test.tsx.snap

@@ -11,8 +11,6 @@
   Global import, so we don't need to remember to import the lib in each file
   https://www.npmjs.com/package/jest-styled-components#global-installation
 */
-
-import 'jest-styled-components';
 import '@testing-library/jest-dom';
 
 // uses subpath exports

src/platform/packages/shared/kbn-test/src/jest/setup/emotion.js

@@ -10,9 +10,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { HoverVisibilityContainer } from './hover_visibility_container';
-import { matchers } from '@emotion/jest';
-
-expect.extend(matchers);
 
 describe('HoverVisibilityContainer', () => {
   const targetClass1 = 'Component1';

src/platform/packages/shared/kbn-test/src/jest/setup/setup_test.js

@@ -9,8 +9,6 @@
 
 import React from 'react';
 import { mountWithIntl } from '@kbn/test-jest-helpers';
-import { matchers } from '@emotion/jest';
-expect.extend(matchers);
 
 import { ToolbarPopover } from './popover';
 

src/platform/packages/shared/response-ops/alerts-table/components/hover_visibility_container.test.tsx

@@ -1,23 +1,9 @@
 {
   "extends": "../../../../../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "target/types",
-    "types": [
-      "jest",
-      "node",
-      "react",
-      "@kbn/ambient-ui-types"
-    ]
+    "outDir": "target/types"
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-  ],
-  "kbn_references": [
-    "@kbn/i18n",
-    "@kbn/test-jest-helpers",
-  ],
-  "exclude": [
-    "target/**/*",
-  ]
+  "include": ["**/*.ts", "**/*.tsx"],
+  "kbn_references": ["@kbn/i18n", "@kbn/test-jest-helpers"],
+  "exclude": ["target/**/*"]
 }

src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx

@@ -26,13 +26,10 @@ import { shallow } from 'enzyme';
 import { render } from '@testing-library/react';
 import { IInterpreterRenderHandlers } from '@kbn/expressions-plugin/common';
 import { coreMock } from '@kbn/core/public/mocks';
-import { matchers } from '@emotion/jest';
 import { FormattedColumns, TableVisConfig, TableVisData } from '../types';
 import TableVisualizationComponent from './table_visualization';
 import { useUiState } from '../utils';
 
-expect.extend(matchers);
-
 describe('TableVisualizationComponent', () => {
   const coreStartMock = coreMock.createStart();
   const handlers = {

src/platform/packages/shared/shared-ux/button_toolbar/tsconfig.json

@@ -8,6 +8,7 @@
  */
 
 import React from 'react';
+import 'jest-styled-components';
 import { mount } from 'enzyme';
 import type { CellProps } from './table_cell';
 import { TableCell } from './table_cell';