<Button> rendered as <Component> in jest snapshots after updating to the latest PatternFly, breaking our tests

[elad661]

After updating to @patternfly/react-core@3.120.5 (we previously used @patternfly/react-core@3.86.1), every <Button> in our snapshot is now <Component>, and some other components are affected too.

If this was just an issue with the snapshot itself, it wouldn't be a big deal, but it also affects more functional tests that we have, for example finding a button in the shallow rendered component, simulating a click, and checking the result. Now that the snapshot no longer has <Button>, we can't use .find('Button') anymore, as it doesn't find anything.

This means that we can't upgrade to the latest PatternFly, and this blocks us from implementing important features and improvements.

[elad661]

cc: @lizagilman

[redallen]

We should look into if displayName will fix these problems. I fear it might not -- the whole Enzyme integration might be more complicated since there's still an extra parent withOUIA added to the tree.

[mturley]

@redallen I think it should work if we apply displayName to the result of the HOC rather than the inner component. Not sure if TypeScript would be happy with it but that has worked for me when I ran into this problem in past JS projects.

e.g.

const ButtonWithOuiaContext = withOuiaContext(Button);
ButtonWithOuiaContext.displayName = 'Button';
export { ButtonWithOuiaContext as Button };

[redallen]

Cool, let's try that out on these files:

packages/patternfly-4/react-core/src/components/Switch/Switch.tsx
packages/patternfly-4/react-core/src/components/Dropdown/DropdownWithContext.tsx
packages/patternfly-4/react-core/src/components/Alert/Alert.tsx
packages/patternfly-4/react-core/src/components/Button/Button.tsx
packages/patternfly-4/react-core/src/components/Select/Select.tsx
packages/patternfly-4/react-core/src/components/Pagination/Pagination.tsx
packages/patternfly-4/react-core/src/components/Tabs/Tabs.tsx
packages/patternfly-4/react-core/src/components/ChipGroup/Chip.tsx
packages/patternfly-4/react-core/src/components/Nav/Nav.tsx
packages/patternfly-4/react-core/src/components/Breadcrumb/Breadcrumb.tsx
packages/patternfly-4/react-table/src/components/Table/Table.tsx
packages/patternfly-4/react-table/src/components/Table/RowWrapper.tsx

[mturley]

Sure, I'll open a PR in a minute.

[redallen]

Sweet, thanks! We'll have to update our own snapshots, too. They should give some indication of whether the fix will work or not.

[mturley]

I closed #3318 because while it fixed this issue in the snapshots, it broke any enzyme-based unit test that was using wrapper.find() since suddenly the HOCs and the inner components have the same display names, so there are two of each in the tree. @redallen I remember you mentioned resolving this by moving away from our HOC-based implementation of OUIA attributes. Is there another issue/PR for that already?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.