give name to forwardRef components

src/common/Button/Button.js

@@ -44,4 +44,6 @@ const ButtonWithForwardedRef = React.forwardRef((props, ref) => (
     <Button {...props} forwardedRef={ref} />
 ));
 
+ButtonWithForwardedRef.displayName = 'ButtonWithForwardedRef';
+
 export default ButtonWithForwardedRef;

src/common/Focusable/Focusable.js

@@ -9,4 +9,6 @@ const Focusable = React.forwardRef(({ children, ...props }, ref) => {
     );
 });
 
+Focusable.displayName = 'Focusable';
+
 export default Focusable;

src/common/Popup/Label.js

@@ -4,4 +4,6 @@ const Label = React.forwardRef(({ children, ...props }, ref) => {
     return React.cloneElement(React.Children.only(children), { ...props, ref });
 });
 
+Label.displayName = 'Popup.Label';
+
 export default Label;

src/common/Popup/Menu.js

@@ -6,4 +6,6 @@ const Menu = React.forwardRef(({ children }, ref) => (
     </div>
 ));
 
+Menu.displayName = 'Popup.Menu';
+
 export default Menu;

src/routes/Player/ControlBar/ControlBar.js

@@ -15,6 +15,8 @@ const ControlBarButton = React.forwardRef(({ icon, active, disabled, onClick },
     </div>
 ));
 
+ControlBarButton.displayName = 'ControlBarButton';
+
 class ControlBar extends Component {
     constructor(props) {
         super(props);