Skip to content

Comments

[8.x] [jest] @emotion/babel-preset-css-prop (#216489)#218121

Merged
Dosant merged 9 commits intoelastic:8.xfrom
Dosant:backport/8.x/pr-216489
Apr 15, 2025
Merged

[8.x] [jest] @emotion/babel-preset-css-prop (#216489)#218121
Dosant merged 9 commits intoelastic:8.xfrom
Dosant:backport/8.x/pr-216489

Conversation

@Dosant
Copy link
Contributor

@Dosant Dosant commented Apr 14, 2025

Backport

This will backport the following commits from main to 8.x:

Questions ?

Please refer to the Backport tool documentation

@Dosant
[jest] @emotion/babel-preset-css-prop (elastic#216489)
0a7f1bb 
## Summary

Partially address elastic#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.

![Screenshot 2025-04-04 at 14 57
52](https://github.com/user-attachments/assets/f4a746d6-2451-4703-ab39-57be7171b10b)

#### 🟢 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:

![Screenshot 2025-04-04 at 15 50
16](https://github.com/user-attachments/assets/61c1d027-1e8a-48e6-a242-1fa53f8ec9b7)

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

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Karen Grigoryan <karen.grigoryan@elastic.co>
(cherry picked from commit ef0322d)

# Conflicts:
#	src/core/packages/chrome/browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap
#	src/core/packages/overlays/browser-internal/src/banners/banners_list.test.tsx
#	src/core/packages/overlays/browser-internal/src/flyout/__snapshots__/flyout_service.test.tsx.snap
#	src/platform/packages/private/kbn-reporting/public/share/share_context_menu/__snapshots__/screen_capture_panel_content.test.tsx.snap
#	src/platform/packages/shared/kbn-unified-data-table/src/components/compare_documents/hooks/__snapshots__/use_comparison_css.test.ts.snap
#	src/platform/packages/shared/shared-ux/avatar/solution/src/__snapshots__/solution_avatar.test.tsx.snap
#	src/platform/packages/shared/shared-ux/button_toolbar/src/popover/popover.test.tsx
#	src/platform/packages/shared/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap
#	src/platform/packages/shared/shared-ux/page/solution_nav/src/__snapshots__/solution_nav.test.tsx.snap
#	src/platform/plugins/private/input_control_vis/public/components/vis/__snapshots__/input_control_vis.test.tsx.snap
#	src/platform/plugins/private/vis_type_markdown/public/__snapshots__/markdown_options.test.tsx.snap
#	src/platform/plugins/shared/discover/public/application/main/discover_main_app.test.tsx
#	src/platform/plugins/shared/home/public/application/components/manage_data/__snapshots__/manage_data.test.tsx.snap
#	src/platform/plugins/shared/home/public/application/components/solutions_section/__snapshots__/solution_panel.test.tsx.snap
#	src/platform/plugins/shared/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
#	src/platform/plugins/shared/kibana_react/public/page_template/solution_nav/__snapshots__/solution_nav_avatar.test.tsx.snap
#	src/platform/plugins/shared/navigation/public/top_nav_menu/__snapshots__/top_nav_menu.test.tsx.snap
#	src/platform/plugins/shared/navigation/public/top_nav_menu/top_nav_menu.test.tsx
#	x-pack/platform/plugins/private/canvas/shareable_runtime/components/__snapshots__/app.test.tsx.snap
#	x-pack/platform/plugins/private/graph/public/components/graph_visualization/__snapshots__/graph_visualization.test.tsx.snap
#	x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap
#	x-pack/platform/plugins/private/monitoring/public/components/elasticsearch/ccr/__snapshots__/ccr.test.js.snap
#	x-pack/platform/plugins/private/monitoring/public/components/elasticsearch/nodes/__snapshots__/cells.test.js.snap
#	x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/collapsible_statement.test.js.snap
#	x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/detail_drawer.test.js.snap
#	x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/metric.test.js.snap
#	x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/plugin_statement.test.js.snap
#	x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/queue.test.js.snap
#	x-pack/platform/plugins/private/monitoring/public/components/logstash/pipeline_viewer/views/__snapshots__/statement.test.js.snap
#	x-pack/platform/plugins/private/monitoring/public/components/sparkline/__snapshots__/index.test.js.snap
#	x-pack/platform/plugins/private/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap
#	x-pack/platform/plugins/shared/spaces/public/nav_control/components/__snapshots__/manage_spaces_button.test.tsx.snap
#	x-pack/platform/plugins/shared/spaces/public/space_selector/__snapshots__/space_selector.test.tsx.snap
#	x-pack/solutions/observability/plugins/apm/public/components/shared/charts/timeline/__snapshots__/timeline.test.tsx.snap
#	x-pack/solutions/observability/plugins/apm/public/components/shared/charts/timeline/marker/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/observability/plugins/apm/public/components/shared/sticky_properties/__snapshots__/sticky_properties.test.tsx.snap
#	x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.test.tsx
#	x-pack/solutions/observability/plugins/infra/public/components/asset_details/tabs/processes/__snapshots__/processes_table.test.tsx.snap
#	x-pack/solutions/observability/plugins/observability_shared/public/components/field_value_suggestions/field_value_selection.test.tsx
#	x-pack/solutions/observability/plugins/slo/public/utils/test_helper.tsx
#	x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/visitor_breakdown_map/__snapshots__/embedded_map.test.tsx.snap
#	x-pack/solutions/observability/plugins/ux/public/components/app/rum_dashboard/visitor_breakdown_map/__snapshots__/map_tooltip.test.tsx.snap
#	x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/__snapshots__/entry_content.test.tsx.snap
#	x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/meta/details_info/__snapshots__/details_info.test.tsx.snap
#	x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/generate_linked_rules_menu_item/__snapshots__/generate_linked_rules_menu_item.test.tsx.snap
#	x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap
#	x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/list_header/menu_items/__snapshots__/menu_items.test.tsx.snap
#	x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/text_with_edit/__snapshots__/text_with_edit.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/explore/network/components/arrows/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
#	x-pack/solutions/security/plugins/session_view/public/components/detail_panel_copy/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/session_view/public/components/process_tree_alert/__snapshots__/index.test.tsx.snap
@Dosant Dosant requested a review from kibanamachine as a code owner April 14, 2025 14:11
@Dosant Dosant added the backport This PR is a backport of another PR label Apr 14, 2025
@Dosant Dosant enabled auto-merge (squash) April 14, 2025 14:11
@botelastic botelastic bot added the Feature:ExpressionLanguage Interpreter expression language (aka canvas pipeline) label Apr 14, 2025
@Dosant Dosant mentioned this pull request Apr 14, 2025
Merged
@botelastic botelastic bot added the Team:actionable-obs Formerly "obs-ux-management", responsible for SLO, o11y alerting, significant events, & synthetics. label Apr 15, 2025
@elasticmachine
Copy link
Contributor

elasticmachine commented Apr 15, 2025

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

@Dosant Dosant merged commit 214787f into elastic:8.x Apr 15, 2025
8 checks passed
@elasticmachine
Copy link
Contributor

elasticmachine commented Apr 15, 2025

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] Jest Tests #6 / SolutionFilter when the owner is a single solution renders options correctly

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 2.5MB 2.5MB +194.0B
expressionLegacyMetricVis 6.3KB 6.3KB +39.0B
monitoring 659.3KB 659.4KB +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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tsullivan tsullivan tsullivan approved these changes

@kibanamachine kibanamachine Awaiting requested review from kibanamachine

Assignees

No one assigned

Labels

backport This PR is a backport of another PR Feature:ExpressionLanguage Interpreter expression language (aka canvas pipeline) Team:actionable-obs Formerly "obs-ux-management", responsible for SLO, o11y alerting, significant events, & synthetics.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@Dosant @elasticmachine @tsullivan