Install React Testing Library and export several RTL test helpers #6091

cee-chen · 2022-07-28T20:38:29Z

Summary

Meta issue: #5596

Our first baby steps into the eventual conversion of Enzyme tests into RTL. This PR was born more out of the need to figure out why the heck Kibana's RTL tests are flipping their lids over some of our recent changes to EuiPopover/EuiPortal.

This PR:

Adds React Testing Library dev dependencies pinned at the same versions that Kibana uses
Adds a few basic EuiPopover RTL tests to get used to RTL's API/syntax and confirm that EuiPopover testing works in RTL
Adds new RTL ByDataTestSubj utilities for targeting EUI's data-test-subj attributes. These can be accessed by importing custom RTL render and screen utils from @elastic/eui/lib/test/rtl.
Adds new React Testing Library EuiPopover helpers, waitForEuiPopoverOpen and waitForEuiPopoverClose

Checklist

Changelog
Tested against Create React App without@testing-library/react installed
Tested against Kibana with @testing-library/react installed

cee-chen · 2022-07-28T20:42:30Z

src/components/popover/popover.rtl.test.tsx

@@ -0,0 +1,105 @@
+/*


RTL tests should just be .test.tsx but since I'm not migrating 100% of EuiPopover's tests currently I just did rtl.test.tsx. End goal everything should be just .test.tsx once we're out of Enzyme.

cee-chen · 2022-07-28T21:08:40Z

@chandlerprall Does this technically close #5597?

cee-chen · 2022-07-28T21:10:10Z

The good news is that RTL works great with base EuiPopover

The bad news is that I then have no idea why Kibana is throwing so many pointer events errors :/

src/components/popover/popover.rtl.test.tsx

cee-chen · 2022-07-28T21:17:42Z

src/components/popover/popover.rtl.test.tsx

+      // NOTE: Using baseElement instead of container is required for components that use portals
+      expect(baseElement).toMatchSnapshot();


Just want everyone to share the pain I had of figuring this out in a 3 year old github thread when google wasn't returning any relevant results 💀

kibanamachine · 2022-07-28T21:28:43Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6091/

chandlerprall · 2022-07-28T21:45:55Z

Does this technically close #5597?

it does! 🎉

src/test/rtl_custom_render.ts

kibanamachine · 2022-07-29T00:46:10Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6091/

chandlerprall · 2022-07-29T19:38:05Z

By commenting out blocks, I found the mocks fail when rtl_custom_render.ts imports from ../components.

Fix

scripts/jest/setup/config.json

  "setupFiles": [
    "<rootDir>/scripts/jest/setup/enzyme.js",
    "<rootDir>/scripts/jest/setup/throw_on_console_error.js",
+    "<rootDir>/scripts/jest/setup/mocks.js"
  ],
  "setupFilesAfterEnv": [
-    "<rootDir>/scripts/jest/setup/mocks.js",
    "<rootDir>/scripts/jest/setup/polyfills.js",
    "<rootDir>/scripts/jest/setup/unmount_enzyme.js"
  ],

Why

Jest loads the snapshot serializers before setupFilesAfterEnv, and scripts/jest/setup/emotion.js imports from src/test kicking off the import chain: src/test -> rtl_custom_render -> ../components thus pre-requiring the entirety of EUI's components before the mock code loads. During execution, the pre-warmed file cache is apparently preferred to going to the defined mocks.

We should probably also move unmount_enzyme.js to setupFiles as it does a mock. polyfills.js should probably stay in setupFilesAfterEnv

kibanamachine · 2022-07-29T20:08:40Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6091/

cee-chen · 2022-07-30T00:24:54Z

By commenting out blocks, I found the mocks fail when rtl_custom_render.ts imports from ../components.

Whoa, thank you for the debugging!! I thought I tried that but Jest took so long when I moved that file to setupFiles that I thought it was broken 😅

Out of curiosity, would it also work to import EuiProvider from src/components/provider/provider directly instead of src/components?

EDIT: Looks like it doesn't, womp womp.

cee-chen · 2022-08-01T15:58:19Z

We should probably also move unmount_enzyme.js to setupFiles as it does a mock. polyfills.js should probably stay in setupFilesAfterEnv

Unfortunately if I move unmount_enzyme to setupFiles I get the following error:

ReferenceError: afterAll is not defined

Moving mocks.js worked GREAT though, thank you so much for figuring that out! 🙇

kibanamachine · 2022-08-01T16:45:24Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6091/

…test/` - Since RTL is a devDependency not a peerDependency, we can't assume consumers will have the library installed, and need to make reaching for it optional

kibanamachine · 2022-08-01T18:20:10Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6091/

kibanamachine · 2022-08-01T19:15:30Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6091/

+ helps with quick type checking as well

cee-chen

I'm definitely not in love with the manual .d.ts files workaround, but I guess it works 🙈 I think this is ready for Kibana prime time @thompsongl @chandlerprall!

scripts/jest/config.json

kibanamachine · 2022-08-01T22:09:16Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6091/

thompsongl

LGTM! Thanks, as always, for all the tests

chandlerprall

🦑

) * Add RTL dependencies (at the same versions that Kibana uses) * Add basic EuiPopover RTL tests * consolidate react types yarn.lock entries * Add custom RTL queries and render/screen * consolidate more yarn.lock entries * Fix custom RTL render ignoring testenv mocks * Add RTL helpers for waiting for an EuiPopover to open/close * [Misc] Tweak typing by using correct get (vs query/find) API * Move RTL helpers to `src/test/rtl` instead of being exported by `src/test/` - Since RTL is a devDependency not a peerDependency, we can't assume consumers will have the library installed, and need to make reaching for it optional * Add Typescript definitions for helpers * Add unit tests for new generic test helpers + helps with quick type checking as well * Changelog/consuming documentation Co-authored-by: Greg Thompson <thompson.glowe@gmail.com> Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

cee-chen added 2 commits July 28, 2022 12:30

Add RTL dependencies (at the same versions that Kibana uses)

77767a6

Add basic EuiPopover RTL tests

eb486b5

cee-chen added the skip-changelog label Jul 28, 2022

cee-chen commented Jul 28, 2022

View reviewed changes

consolidate react types yarn.lock entries

bcf6a33

cee-chen commented Jul 28, 2022

View reviewed changes

src/components/popover/popover.rtl.test.tsx Outdated Show resolved Hide resolved

cee-chen commented Jul 28, 2022

View reviewed changes

cee-chen marked this pull request as ready for review July 28, 2022 21:18

Add custom RTL queries and render/screen

0e1de22

cee-chen commented Jul 29, 2022

View reviewed changes

src/test/rtl_custom_render.ts Outdated Show resolved Hide resolved

consolidate more yarn.lock entries

ffd53c3

Fix custom RTL render ignoring testenv mocks

e19d477

cee-chen added 2 commits August 1, 2022 09:17

Add RTL helpers for waiting for an EuiPopover to open/close

1916c96

[Misc] Tweak typing by using correct get (vs query/find) API

e78d702

Move RTL helpers to src/test/rtl instead of being exported by `src/…

2fd93e1

…test/` - Since RTL is a devDependency not a peerDependency, we can't assume consumers will have the library installed, and need to make reaching for it optional

cee-chen added 3 commits August 1, 2022 14:25

Add Typescript definitions for helpers

a98b125

Add unit tests for new generic test helpers

8b6208d

+ helps with quick type checking as well

Changelog/consuming documentation

d22eeeb

cee-chen force-pushed the react-testing-library branch from a0764e8 to d22eeeb Compare August 1, 2022 21:40

cee-chen removed the skip-changelog label Aug 1, 2022

cee-chen requested review from thompsongl and chandlerprall August 1, 2022 21:49

cee-chen commented Aug 1, 2022

View reviewed changes

scripts/jest/config.json Show resolved Hide resolved

thompsongl approved these changes Aug 2, 2022

View reviewed changes

cee-chen changed the title ~~Install React Testing Library~~ Install React Testing Library and export several RTL test helpers Aug 2, 2022

chandlerprall approved these changes Aug 2, 2022

View reviewed changes

cee-chen merged commit ca34f24 into elastic:main Aug 2, 2022

cee-chen deleted the react-testing-library branch August 2, 2022 16:53

cee-chen mentioned this pull request Aug 2, 2022

Upgrade EUI to v62.0.3 elastic/kibana#136865

Closed

chandlerprall mentioned this pull request Aug 3, 2022

[Docs] fix documentation build #6102

Merged

cee-chen mentioned this pull request Aug 9, 2022

Upgrade EUI to v62.0.3 elastic/kibana#138351

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Install React Testing Library and export several RTL test helpers #6091

Install React Testing Library and export several RTL test helpers #6091

cee-chen commented Jul 28, 2022 •

edited

Loading

cee-chen Jul 28, 2022

cee-chen commented Jul 28, 2022

cee-chen commented Jul 28, 2022

cee-chen Jul 28, 2022

kibanamachine commented Jul 28, 2022

chandlerprall commented Jul 28, 2022

kibanamachine commented Jul 29, 2022

chandlerprall commented Jul 29, 2022

kibanamachine commented Jul 29, 2022

cee-chen commented Jul 30, 2022 •

edited

Loading

cee-chen commented Aug 1, 2022

kibanamachine commented Aug 1, 2022

kibanamachine commented Aug 1, 2022

kibanamachine commented Aug 1, 2022

cee-chen left a comment

kibanamachine commented Aug 1, 2022

thompsongl left a comment

chandlerprall left a comment

		// NOTE: Using baseElement instead of container is required for components that use portals
		expect(baseElement).toMatchSnapshot();

Install React Testing Library and export several RTL test helpers #6091

Install React Testing Library and export several RTL test helpers #6091

Conversation

cee-chen commented Jul 28, 2022 • edited Loading

Summary

Checklist

cee-chen Jul 28, 2022

Choose a reason for hiding this comment

cee-chen commented Jul 28, 2022

cee-chen commented Jul 28, 2022

cee-chen Jul 28, 2022

Choose a reason for hiding this comment

kibanamachine commented Jul 28, 2022

chandlerprall commented Jul 28, 2022

kibanamachine commented Jul 29, 2022

chandlerprall commented Jul 29, 2022

kibanamachine commented Jul 29, 2022

cee-chen commented Jul 30, 2022 • edited Loading

cee-chen commented Aug 1, 2022

kibanamachine commented Aug 1, 2022

kibanamachine commented Aug 1, 2022

kibanamachine commented Aug 1, 2022

cee-chen left a comment

Choose a reason for hiding this comment

kibanamachine commented Aug 1, 2022

thompsongl left a comment

Choose a reason for hiding this comment

chandlerprall left a comment

Choose a reason for hiding this comment

cee-chen commented Jul 28, 2022 •

edited

Loading

cee-chen commented Jul 30, 2022 •

edited

Loading