Merge pull request #28813 from ikevin127/fix/28334

fix/28334: Missing displayName prop leads to console error (testID undefined)

.eslintrc.js

@@ -79,6 +79,7 @@ module.exports = {
  },
  ],
  curly: 'error',
+ 'react/display-name': 'error',
  },
  },
  {

__mocks__/react-native-safe-area-context.js

@@ -20,13 +20,18 @@ function withSafeAreaInsets(WrappedComponent) {
  />
  );
  }
- return forwardRef((props, ref) => (
+
+ const WithSafeAreaInsetsWithRef = forwardRef((props, ref) => (
  <WithSafeAreaInsets
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  forwardedRef={ref}
  />
  ));
+
+ WithSafeAreaInsetsWithRef.displayName = 'WithSafeAreaInsetsWithRef';
+
+ return WithSafeAreaInsetsWithRef;
 }
 
 const SafeAreaView = View;

package.json

@@ -240,7 +240,7 @@
  "electron-builder": "24.6.4",
  "eslint": "^7.6.0",
  "eslint-config-airbnb-typescript": "^17.1.0",
- "eslint-config-expensify": "^2.0.39",
+ "eslint-config-expensify": "^2.0.42",
  "eslint-config-prettier": "^8.8.0",
  "eslint-plugin-jest": "^24.1.0",
  "eslint-plugin-jsdoc": "^46.2.6",

src/components/AddressSearch/index.js

@@ -499,15 +499,14 @@ AddressSearch.propTypes = propTypes;
 AddressSearch.defaultProps = defaultProps;
 AddressSearch.displayName = 'AddressSearch';
 
-export default compose(
- withNetwork(),
- withLocalize,
-)(
- React.forwardRef((props, ref) => (
- <AddressSearch
- // eslint-disable-next-line react/jsx-props-no-spreading
- {...props}
- innerRef={ref}
- />
- )),
-);
+const AddressSearchWithRef = React.forwardRef((props, ref) => (
+ <AddressSearch
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {...props}
+ innerRef={ref}
+ />
+));
+
+AddressSearchWithRef.displayName = 'AddressSearchWithRef';
+
+export default compose(withNetwork(), withLocalize)(AddressSearchWithRef);

src/components/AmountTextInput.js

@@ -64,10 +64,14 @@ AmountTextInput.propTypes = propTypes;
 AmountTextInput.defaultProps = defaultProps;
 AmountTextInput.displayName = 'AmountTextInput';
 
-export default React.forwardRef((props, ref) => (
+const AmountTextInputWithRef = React.forwardRef((props, ref) => (
  <AmountTextInput
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  forwardedRef={ref}
  />
 ));
+
+AmountTextInputWithRef.displayName = 'AmountTextInputWithRef';
+
+export default AmountTextInputWithRef;

src/components/Attachments/AttachmentCarousel/Pager/index.js

@@ -171,10 +171,14 @@ function AttachmentCarouselPager({
 AttachmentCarouselPager.propTypes = pagerPropTypes;
 AttachmentCarouselPager.defaultProps = pagerDefaultProps;
 
-export default React.forwardRef((props, ref) => (
+const AttachmentCarouselPagerWithRef = React.forwardRef((props, ref) => (
  <AttachmentCarouselPager
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  forwardedRef={ref}
  />
 ));
+
+AttachmentCarouselPagerWithRef.displayName = 'AttachmentCarouselPagerWithRef';
+
+export default AttachmentCarouselPagerWithRef;

src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js

@@ -110,10 +110,14 @@ function BaseAutoCompleteSuggestions(props) {
 BaseAutoCompleteSuggestions.propTypes = propTypes;
 BaseAutoCompleteSuggestions.displayName = 'BaseAutoCompleteSuggestions';
 
-export default React.forwardRef((props, ref) => (
+const BaseAutoCompleteSuggestionsWithRef = React.forwardRef((props, ref) => (
  <BaseAutoCompleteSuggestions
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  forwardedRef={ref}
  />
 ));
+
+BaseAutoCompleteSuggestionsWithRef.displayName = 'BaseAutoCompleteSuggestionsWithRef';
+
+export default BaseAutoCompleteSuggestionsWithRef;

src/components/BaseMiniContextMenuItem.js

@@ -90,10 +90,14 @@ BaseMiniContextMenuItem.propTypes = propTypes;
 BaseMiniContextMenuItem.defaultProps = defaultProps;
 BaseMiniContextMenuItem.displayName = 'BaseMiniContextMenuItem';
 
-export default React.forwardRef((props, ref) => (
+const BaseMiniContextMenuItemWithRef = React.forwardRef((props, ref) => (
  <BaseMiniContextMenuItem
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  innerRef={ref}
  />
 ));
+
+BaseMiniContextMenuItemWithRef.displayName = 'BaseMiniContextMenuItemWithRef';
+
+export default BaseMiniContextMenuItemWithRef;

src/components/CheckboxWithLabel.js

@@ -130,10 +130,14 @@ CheckboxWithLabel.propTypes = propTypes;
 CheckboxWithLabel.defaultProps = defaultProps;
 CheckboxWithLabel.displayName = 'CheckboxWithLabel';
 
-export default React.forwardRef((props, ref) => (
+const CheckboxWithLabelWithRef = React.forwardRef((props, ref) => (
  <CheckboxWithLabel
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  forwardedRef={ref}
  />
 ));
+
+CheckboxWithLabelWithRef.displayName = 'CheckboxWithLabelWithRef';
+
+export default CheckboxWithLabelWithRef;

src/components/Composer/index.android.js

@@ -131,10 +131,14 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
 Composer.propTypes = propTypes;
 Composer.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => (
+const ComposerWithRef = React.forwardRef((props, ref) => (
  <Composer
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  forwardedRef={ref}
  />
 ));
+
+ComposerWithRef.displayName = 'ComposerWithRef';
+
+export default ComposerWithRef;

src/components/Composer/index.ios.js

@@ -132,10 +132,14 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
 Composer.propTypes = propTypes;
 Composer.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => (
+const ComposerWithRef = React.forwardRef((props, ref) => (
  <Composer
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  forwardedRef={ref}
  />
 ));
+
+ComposerWithRef.displayName = 'ComposerWithRef';
+
+export default ComposerWithRef;

src/components/Composer/index.js

@@ -489,16 +489,14 @@ function Composer({
 Composer.propTypes = propTypes;
 Composer.defaultProps = defaultProps;
 
-export default compose(
- withLocalize,
- withWindowDimensions,
- withNavigation,
-)(
- React.forwardRef((props, ref) => (
- <Composer
- // eslint-disable-next-line react/jsx-props-no-spreading
- {...props}
- forwardedRef={ref}
- />
- )),
-);
+const ComposerWithRef = React.forwardRef((props, ref) => (
+ <Composer
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {...props}
+ forwardedRef={ref}
+ />
+));
+
+ComposerWithRef.displayName = 'ComposerWithRef';
+
+export default compose(withLocalize, withWindowDimensions, withNavigation)(ComposerWithRef);

src/components/ContextMenuItem.js

@@ -109,10 +109,14 @@ ContextMenuItem.propTypes = propTypes;
 ContextMenuItem.defaultProps = defaultProps;
 ContextMenuItem.displayName = 'ContextMenuItem';
 
-export default forwardRef((props, ref) => (
+const ContextMenuItemWithRef = forwardRef((props, ref) => (
  <ContextMenuItem
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  innerRef={ref}
  />
 ));
+
+ContextMenuItemWithRef.displayName = 'ContextMenuItemWithRef';
+
+export default ContextMenuItemWithRef;

src/components/CountrySelector.js

@@ -68,10 +68,14 @@ CountrySelector.propTypes = propTypes;
 CountrySelector.defaultProps = defaultProps;
 CountrySelector.displayName = 'CountrySelector';
 
-export default React.forwardRef((props, ref) => (
+const CountrySelectorWithRef = React.forwardRef((props, ref) => (
  <CountrySelector
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  forwardedRef={ref}
  />
 ));
+
+CountrySelectorWithRef.displayName = 'CountrySelectorWithRef';
+
+export default CountrySelectorWithRef;

src/components/DatePicker/index.ios.js

@@ -138,10 +138,14 @@ DatePicker.displayName = 'DatePicker';
  * locale. Otherwise the spinner would be present in the system locale and it would be weird if it happens
  * that the modal buttons are in one locale (app) while the (spinner) month names are another (system)
  */
-export default React.forwardRef((props, ref) => (
+const DatePickerWithRef = React.forwardRef((props, ref) => (
  <DatePicker
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  innerRef={ref}
  />
 ));
+
+DatePickerWithRef.displayName = 'DatePickerWithRef';
+
+export default DatePickerWithRef;

src/components/DatePicker/index.js

@@ -77,10 +77,14 @@ DatePicker.displayName = 'DatePicker';
 DatePicker.propTypes = propTypes;
 DatePicker.defaultProps = defaultProps;
 
-export default React.forwardRef((props, ref) => (
+const DatePickerWithRef = React.forwardRef((props, ref) => (
  <DatePicker
  // eslint-disable-next-line react/jsx-props-no-spreading
  {...props}
  innerRef={ref}
  />
 ));
+
+DatePickerWithRef.displayName = 'DatePickerWithRef';
+
+export default DatePickerWithRef;

src/components/EmojiPicker/EmojiPickerButtonDropdown.js

@@ -76,12 +76,15 @@ function EmojiPickerButtonDropdown(props) {
 EmojiPickerButtonDropdown.propTypes = propTypes;
 EmojiPickerButtonDropdown.defaultProps = defaultProps;
 EmojiPickerButtonDropdown.displayName = 'EmojiPickerButtonDropdown';
-export default withLocalize(
- React.forwardRef((props, ref) => (
- <EmojiPickerButtonDropdown
- // eslint-disable-next-line react/jsx-props-no-spreading
- {...props}
- forwardedRef={ref}
- />
- )),
-);
+
+const EmojiPickerButtonDropdownWithRef = React.forwardRef((props, ref) => (
+ <EmojiPickerButtonDropdown
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {...props}
+ forwardedRef={ref}
+ />
+));
+
+EmojiPickerButtonDropdownWithRef.displayName = 'EmojiPickerButtonDropdownWithRef';
+
+export default withLocalize(EmojiPickerButtonDropdownWithRef);

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -526,6 +526,16 @@ function EmojiPickerMenu(props) {
 EmojiPickerMenu.propTypes = propTypes;
 EmojiPickerMenu.defaultProps = defaultProps;
 
+const EmojiPickerMenuWithRef = React.forwardRef((props, ref) => (
+ <EmojiPickerMenu
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {...props}
+ forwardedRef={ref}
+ />
+));
+
+EmojiPickerMenuWithRef.displayName = 'EmojiPickerMenuWithRef';
+
 export default compose(
  withLocalize,
  withOnyx({
@@ -536,12 +546,4 @@ export default compose(
  key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
  },
  }),
-)(
- React.forwardRef((props, ref) => (
- <EmojiPickerMenu
- // eslint-disable-next-line react/jsx-props-no-spreading
- {...props}
- forwardedRef={ref}
- />
- )),
-);
+)(EmojiPickerMenuWithRef);

src/components/EmojiPicker/EmojiPickerMenu/index.native.js

@@ -201,6 +201,16 @@ EmojiPickerMenu.displayName = 'EmojiPickerMenu';
 EmojiPickerMenu.propTypes = propTypes;
 EmojiPickerMenu.defaultProps = defaultProps;
 
+const EmojiPickerMenuWithRef = React.forwardRef((props, ref) => (
+ <EmojiPickerMenu
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {...props}
+ forwardedRef={ref}
+ />
+));
+
+EmojiPickerMenuWithRef.displayName = 'EmojiPickerMenuWithRef';
+
 export default compose(
  withLocalize,
  withOnyx({
@@ -211,12 +221,4 @@ export default compose(
  key: ONYXKEYS.FREQUENTLY_USED_EMOJIS,
  },
  }),
-)(
- React.forwardRef((props, ref) => (
- <EmojiPickerMenu
- // eslint-disable-next-line react/jsx-props-no-spreading
- {...props}
- forwardedRef={ref}
- />
- )),
-);
+)(EmojiPickerMenuWithRef);