[jest] @emotion/babel-preset-css-prop

[Dosant]

Summary

Partially address #216459

This PR adds @emotion/babel-preset-css-prop to jest config to improve jest and emotion integration. There are some tradeoffs: this is a better setup for emotion + testing library, but there are some seemingly regressions for enzyme. We think these are right tradeoffs to make, since we optimize for emotion+testing library.

Main upsides are 😄

🟢 Fixes snapshots with css prop

You have tried to stringify object returned from \css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).` is replaced with proper emotion css classname.

🟢 We will be able to use jest style matchers for emotion toHaveStyleRule

https://emotion.sh/docs/@emotion/jest#tohavestylerule

they can be used locally now, but we plan to follow up with global extend

Considerations 🫤

🟡 jsx doesn't work inside jest.mock function

Example:

jest.mock('./components/alert_header_title', () => ({
    > 27 |   AlertHeaderTitle: jest.fn().mockReturnValue(<div></div>), 
         |                                                                           ^
      28 | }));

Fails with an error. can't read jsx of undefined.

This is because babel compiles this into:

import { jsx as ___EmotionJSX } from '@emotion/react'

jest.mock('./components/alert_header_title', () => ({
    > 27 |   AlertHeaderTitle: jest.fn().mockReturnValue(___EmotionJSX.jsx(….)), 
         |                                                                                   ^
      28 | }));

And, apparently, due to how jest imports work, __EmotionJSX is not yet in the scope.

The applied workaround is to rewrite to:

jest.mock('./components/alert_header_title', () => ({
  AlertHeaderTitle: jest.fn(() => <div></div>), 
     }));

🟡 euiTheme needs to be available when euiTheme is accessed inside css function

Example:

DashboardGrid removes panel when removed from container
    TypeError: Cannot read properties of undefined (reading 'size')
      42 |     margin: '-2px',
      43 |     position: 'absolute',
    > 44 |     width: euiTheme.size.l,

The fix was to wrap failing tests with <EuiProvider/>

Drawbacks 😢

Mostly related to Enzyme

🔴 Enzyme shallow snapshot no longer include css prop

Since css prop is compiled away there are bunch of snapshots that looks like a regression:

Example:

This is unfortunate. We've tried @emotion/jest/enzyme-serializer but it didn't work (likely because enzyme ecosystem no longer supported?)
If it is important that the snapshot captures css, we recommend to use mount or rtl

🔴 Asserting against css prop with shallow render also doesn't work

Possible solution is to use

import { matchers } from '@emotion/jest';
expect.extend(matchers);

(We plan to add these matches globally in a follow up)

and

 expect(button).toHaveStyleRule('background-color', '#FFFFFF');

🔴 Some shallow Enzyme tests find() breaks because of code transformations of emotion

Example:

const component = shallow(
      <MetricVisValue />
)

component.find('button') // fails because instead of <button/> there is <EmotionInternalCss/> element now 

Solutions:

• Use full mount or react testing library
• Or target by data-test-subj

[dplumlee]

Rule management changes lgtm

[adcoelho]

response-ops OK

[vitaliidm]

detection engine area LGTM

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 42ef8d9

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
enterpriseSearch	1.3MB	1.3MB	+194.0B
expressionLegacyMetricVis	6.3KB	6.3KB	+39.0B
monitoring	633.8KB	633.9KB	+108.0B
total			+341.0B

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
@kbn/ecs-data-quality-dashboard	11	8	-3
securitySolution	579	575	-4
total			-7

Total ESLint disabled count

id	before	after	diff
@kbn/ecs-data-quality-dashboard	11	8	-3
securitySolution	662	658	-4
total			-7

History

• 💔 Build #292514 failed 9c78868
• 💔 Build #290845 failed b8aba22
• 💚 Build #290600 succeeded 8253a52
• 💔 Build #290500 failed a2aafe7
• 💔 Build #290358 failed 30451dc

[kibanamachine]

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/14445653423

[kibanamachine]

💔 All backports failed

Status	Branch	Result
❌	8.x	Backport failed because of merge conflicts You might need to backport the following PRs to 8.x: - NavigationItemOpenPanel: remove handling of landing page ("four squares" design) (#210893) - [Security Solution] EUI Refresh Followup Pt. 1 (#205990)

Manual backport

To create the backport manually run:

node scripts/backport --pr 216489

Questions ?

Please refer to the Backport tool documentation

[Dosant]

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

[kibanamachine]

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.