In our current usage of EUI and Jest, we have many tests that are testing the integration of some component or portion of our application with EUI. This causes all sorts of problems:

• too many components are under test but assertions aren't related to them at all
• snapshots contain tons of unrelated bits which make upgrades really painful and cause information overload so things are missed in review
• UX optimizations in EUI like virtualization or focus-locking are being simulated in jest tests unnecessarily and have a serious performance and/or DX cost without any need
• CSS classes and internal wrapper components get exposed to tests and cause tighter coupling that we want to avoid.

In order to avoid most of this I think we need to work with the EUI folks to provide a black-box version of EUI that we use in our Jest tests. Whenever an EUI component is rendered it would be similar to using the shallow() helper from enzyme, where only the name of the component and props that were passed to the component would be available. Snapshots would reflect this change, and not include any of the internal implementation of EUI.

It is still important to test our integration with some of the more complex components in EUI, things like the table and data grid have integrations what EUI could/should provide helpers to test the props which are passed to make sure they behave correctly and then we can rely on EUI to test the components internally.