diff --git a/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap b/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap
index 7f6c3d28b..ed6cc0b24 100644
--- a/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap
+++ b/src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap
@@ -5,28 +5,28 @@ exports[`notifications for leaks 1`] = `
   <Styled(div)>
     CloseableReference leaked for
      
-    <Styled(span)
+    <Text
       code={true}
     >
       com.facebook.imagepipeline.memory.NativeMemoryChunk
-    </Styled(span)>
+    </Text>
     (identity hashcode: 
     deadbeef
     ).
   </Styled(div)>
   <Styled(div)>
-    <Styled(span)
+    <Text
       bold={true}
     >
       Stacktrace:
-    </Styled(span)>
+    </Text>
   </Styled(div)>
   <Styled(div)>
-    <Styled(span)
+    <Text
       code={true}
     >
       &lt;unavailable&gt;
-    </Styled(span)>
+    </Text>
   </Styled(div)>
 </React.Fragment>
 `;
diff --git a/src/ui/components/Block.tsx b/src/ui/components/Block.tsx
index b78305538..93c8844be 100644
--- a/src/ui/components/Block.tsx
+++ b/src/ui/components/Block.tsx
@@ -9,6 +9,12 @@
 
 import styled from 'react-emotion';
 
-export default styled('div')({
+/**
+ * A Block styled div
+ */
+const Block = styled('div')({
   display: 'block',
 });
+Block.displayName = 'Block';
+
+export default Block;
diff --git a/src/ui/components/Box.tsx b/src/ui/components/Box.tsx
index b347910b4..dd274f19f 100644
--- a/src/ui/components/Box.tsx
+++ b/src/ui/components/Box.tsx
@@ -10,9 +10,12 @@
 import FlexBox from './FlexBox';
 import styled from 'react-emotion';
 
-export default styled(FlexBox)({
+const Box = styled(FlexBox)({
   height: '100%',
   overflow: 'auto',
   position: 'relative',
   width: '100%',
 });
+Box.displayName = 'Box';
+
+export default Box;
diff --git a/src/ui/components/Button.tsx b/src/ui/components/Button.tsx
index d803ac012..e7893bdb9 100644
--- a/src/ui/components/Button.tsx
+++ b/src/ui/components/Button.tsx
@@ -185,10 +185,12 @@ const StyledButton = styled('div')(
     },
   }),
 );
+StyledButton.displayName = 'Button:StyledButton';
 
 const Icon = styled(Glyph)(({hasText}: {hasText: boolean}) => ({
   marginRight: hasText ? 3 : 0,
 }));
+Icon.displayName = 'Button:Icon';
 
 type OwnProps = {
   /**
diff --git a/src/ui/components/ButtonGroup.tsx b/src/ui/components/ButtonGroup.tsx
index 12f0a9f72..69d895e58 100644
--- a/src/ui/components/ButtonGroup.tsx
+++ b/src/ui/components/ButtonGroup.tsx
@@ -18,6 +18,7 @@ const ButtonGroupContainer = styled('div')({
     marginLeft: 0,
   },
 });
+ButtonGroupContainer.displayName = 'ButtonGroup:ButtonGroupContainer';
 
 /**
  * Group a series of buttons together.
diff --git a/src/ui/components/ButtonGroupChain.tsx b/src/ui/components/ButtonGroupChain.tsx
index d825bff27..4aea750ce 100644
--- a/src/ui/components/ButtonGroupChain.tsx
+++ b/src/ui/components/ButtonGroupChain.tsx
@@ -19,6 +19,7 @@ const IconContainer = styled('div')({
   alignItems: 'center',
   pointerEvents: 'none',
 });
+IconContainer.displayName = 'ButtonGroupChain:IconContainer';
 
 const ButtonGroupChainContainer = styled('div')(
   (props: {iconSize: number}) => ({
@@ -39,6 +40,7 @@ const ButtonGroupChainContainer = styled('div')(
     },
   }),
 );
+IconContainer.displayName = 'ButtonGroupChain:ButtonGroupChainContainer';
 
 type Props = {
   /**
diff --git a/src/ui/components/Checkbox.tsx b/src/ui/components/Checkbox.tsx
index 6af038eae..ec1052b56 100644
--- a/src/ui/components/Checkbox.tsx
+++ b/src/ui/components/Checkbox.tsx
@@ -23,6 +23,7 @@ const CheckboxContainer = styled('input')({
   marginRight: 5,
   verticalAlign: 'middle',
 });
+CheckboxContainer.displayName = 'Checkbox:CheckboxContainer';
 
 /**
  * A checkbox to toggle UI state
diff --git a/src/ui/components/CodeBlock.tsx b/src/ui/components/CodeBlock.tsx
index 4aeae7493..af784e4b9 100644
--- a/src/ui/components/CodeBlock.tsx
+++ b/src/ui/components/CodeBlock.tsx
@@ -9,6 +9,9 @@
 
 import styled from 'react-emotion';
 
-export default styled('div')({
+const CodeBlock = styled('div')({
   fontFamily: 'monospace',
 });
+CodeBlock.displayName = 'CodeBlock';
+
+export default CodeBlock;
diff --git a/src/ui/components/ContextMenuProvider.tsx b/src/ui/components/ContextMenuProvider.tsx
index 8bde4b5cd..b8b89ae90 100644
--- a/src/ui/components/ContextMenuProvider.tsx
+++ b/src/ui/components/ContextMenuProvider.tsx
@@ -18,6 +18,7 @@ type MenuTemplate = Array<MenuItemConstructorOptions>;
 const Container = styled('div')({
   display: 'contents',
 });
+Container.displayName = 'ContextMenuProvider:Container';
 
 /**
  * Flipper's root is already wrapped with this component, so plugins should not
diff --git a/src/ui/components/ErrorBlock.tsx b/src/ui/components/ErrorBlock.tsx
index 2d074746b..46d607709 100644
--- a/src/ui/components/ErrorBlock.tsx
+++ b/src/ui/components/ErrorBlock.tsx
@@ -20,6 +20,7 @@ export const ErrorBlockContainer = styled(CodeBlock)({
   padding: 10,
   whiteSpace: 'pre',
 });
+ErrorBlockContainer.displayName = 'ErrorBlock:ErrorBlockContainer';
 
 /**
  * Displaying error messages in a red box.
diff --git a/src/ui/components/ErrorBoundary.tsx b/src/ui/components/ErrorBoundary.tsx
index 076abbdf1..dd60b78aa 100644
--- a/src/ui/components/ErrorBoundary.tsx
+++ b/src/ui/components/ErrorBoundary.tsx
@@ -19,11 +19,13 @@ const ErrorBoundaryContainer = styled(View)({
   overflow: 'auto',
   padding: 10,
 });
+ErrorBoundaryContainer.displayName = 'ErrorBoundary:ErrorBoundaryContainer';
 
 const ErrorBoundaryStack = styled(ErrorBlock)({
   marginBottom: 10,
   whiteSpace: 'pre',
 });
+ErrorBoundaryStack.displayName = 'ErrorBoundary:ErrorBoundaryStack';
 
 type ErrorBoundaryProps = {
   /** Function to dynamically generate the heading of the ErrorBox. */
diff --git a/src/ui/components/FlexBox.tsx b/src/ui/components/FlexBox.tsx
index 1fa05c306..6e9429018 100644
--- a/src/ui/components/FlexBox.tsx
+++ b/src/ui/components/FlexBox.tsx
@@ -18,7 +18,10 @@ type Props = {
 /**
  * A container using flexbox to layout its children
  */
-export default styled(View)(({shrink}: Props) => ({
+const FlexBox = styled(View)(({shrink}: Props) => ({
   display: 'flex',
   flexShrink: shrink == null || shrink ? 1 : 0,
 }));
+FlexBox.displayName = 'FlexBox';
+
+export default FlexBox;
diff --git a/src/ui/components/FlexCenter.tsx b/src/ui/components/FlexCenter.tsx
index baf0af3e8..0d875e8cc 100644
--- a/src/ui/components/FlexCenter.tsx
+++ b/src/ui/components/FlexCenter.tsx
@@ -13,8 +13,11 @@ import styled from 'react-emotion';
 /**
  * A container displaying its children horizontally and vertically centered.
  */
-export default styled(View)({
+const FlexCenter = styled(View)({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
 });
+FlexCenter.displayName = 'FlexCenter';
+
+export default FlexCenter;
diff --git a/src/ui/components/FlexColumn.tsx b/src/ui/components/FlexColumn.tsx
index cfec5f0d9..995bfcaf8 100644
--- a/src/ui/components/FlexColumn.tsx
+++ b/src/ui/components/FlexColumn.tsx
@@ -13,6 +13,9 @@ import styled from 'react-emotion';
 /**
  * A container displaying its children in a column
  */
-export default styled(FlexBox)({
+const FlexColumn = styled(FlexBox)({
   flexDirection: 'column',
 });
+FlexColumn.displayName = 'FlexColumn';
+
+export default FlexColumn;
diff --git a/src/ui/components/FlexRow.tsx b/src/ui/components/FlexRow.tsx
index 656c8ed74..0004082a2 100644
--- a/src/ui/components/FlexRow.tsx
+++ b/src/ui/components/FlexRow.tsx
@@ -13,6 +13,9 @@ import styled from 'react-emotion';
 /**
  * A container displaying its children in a row
  */
-export default styled(FlexBox)({
+const FlexRow = styled(FlexBox)({
   flexDirection: 'row',
 });
+FlexRow.displayName = 'FlexRow';
+
+export default FlexRow;
diff --git a/src/ui/components/FocusableBox.tsx b/src/ui/components/FocusableBox.tsx
index 39eab517b..1ac0ac8a8 100644
--- a/src/ui/components/FocusableBox.tsx
+++ b/src/ui/components/FocusableBox.tsx
@@ -22,6 +22,7 @@ const FocusableBoxBorder = styled(Box)({
   right: '0',
   top: '0',
 });
+FocusableBoxBorder.displayName = 'FocusableBox:FocusableBoxBorder';
 
 type Props = {
   onBlur?: (e: React.FocusEvent) => void;
diff --git a/src/ui/components/Glyph.tsx b/src/ui/components/Glyph.tsx
index 556f7a6ea..86744fec5 100644
--- a/src/ui/components/Glyph.tsx
+++ b/src/ui/components/Glyph.tsx
@@ -20,6 +20,7 @@ const ColoredIconBlack = styled('img')(({size}: {size: number}) => ({
   width: size,
   flexShrink: 0,
 }));
+ColoredIconBlack.displayName = 'Glyph:ColoredIconBlack';
 
 const ColoredIconCustom = styled('div')(
   (props: {size: number; color?: string; src: string}) => ({
@@ -35,6 +36,7 @@ const ColoredIconCustom = styled('div')(
     flexShrink: 0,
   }),
 );
+ColoredIconCustom.displayName = 'Glyph:ColoredIconCustom';
 
 function ColoredIcon(
   props: {
@@ -79,7 +81,7 @@ function ColoredIcon(
     );
   }
 }
-
+ColoredIcon.displayName = 'Glyph:ColoredIcon';
 ColoredIcon.contextTypes = {
   glyphColor: PropTypes.string,
 };
diff --git a/src/ui/components/Heading.tsx b/src/ui/components/Heading.tsx
index 6b8091225..64d90b5b2 100644
--- a/src/ui/components/Heading.tsx
+++ b/src/ui/components/Heading.tsx
@@ -17,6 +17,7 @@ const LargeHeading = styled('div')({
   borderBottom: '1px solid #ddd',
   marginBottom: 10,
 });
+LargeHeading.displayName = 'Heading:LargeHeading';
 
 const SmallHeading = styled('div')({
   fontSize: 12,
@@ -25,6 +26,7 @@ const SmallHeading = styled('div')({
   marginBottom: 10,
   textTransform: 'uppercase',
 });
+SmallHeading.displayName = 'Heading:SmallHeading';
 
 /**
  * A heading component.
diff --git a/src/ui/components/HorizontalRule.tsx b/src/ui/components/HorizontalRule.tsx
index fd258beec..dc08b1198 100644
--- a/src/ui/components/HorizontalRule.tsx
+++ b/src/ui/components/HorizontalRule.tsx
@@ -9,8 +9,11 @@
 
 import styled from 'react-emotion';
 
-export default styled('div')({
+const HorizontalRule = styled('div')({
   backgroundColor: '#c9ced4',
   height: 1,
   margin: '5px 0',
 });
+HorizontalRule.displayName = 'HorizontalRule';
+
+export default HorizontalRule;
diff --git a/src/ui/components/Input.tsx b/src/ui/components/Input.tsx
index d869246bf..26882fb2c 100644
--- a/src/ui/components/Input.tsx
+++ b/src/ui/components/Input.tsx
@@ -31,6 +31,8 @@ const Input = styled('input')(({compact}: {compact?: boolean}) => ({
   padding: compact ? '0 5px' : '0 10px',
 }));
 
+Input.displayName = 'Input';
+
 Input.defaultProps = {
   type: 'text',
 };
diff --git a/src/ui/components/Interactive.tsx b/src/ui/components/Interactive.tsx
index d029e04e9..a8d565f09 100644
--- a/src/ui/components/Interactive.tsx
+++ b/src/ui/components/Interactive.tsx
@@ -93,6 +93,7 @@ type InteractiveState = {
 const InteractiveContainer = styled('div')({
   willChange: 'transform, height, width, z-index',
 });
+InteractiveContainer.displayName = 'Interactive:InteractiveContainer';
 
 export default class Interactive extends React.Component<
   InteractiveProps,
diff --git a/src/ui/components/Label.tsx b/src/ui/components/Label.tsx
index 4b400e968..fbac511e4 100644
--- a/src/ui/components/Label.tsx
+++ b/src/ui/components/Label.tsx
@@ -9,7 +9,10 @@
 
 import styled from 'react-emotion';
 
-export default styled('div')({
+const Label = styled('div')({
   fontSize: 12,
   fontWeight: 'bold',
 });
+Label.displayName = 'Label';
+
+export default Label;
diff --git a/src/ui/components/Link.tsx b/src/ui/components/Link.tsx
index a916ccbcd..79c611156 100644
--- a/src/ui/components/Link.tsx
+++ b/src/ui/components/Link.tsx
@@ -20,6 +20,7 @@ const StyledLink = styled('span')({
     textDecoration: 'underline',
   },
 });
+StyledLink.displayName = 'Link:StyledLink';
 
 export default class Link extends Component<{
   href: string;
diff --git a/src/ui/components/LoadingIndicator.tsx b/src/ui/components/LoadingIndicator.tsx
index 6d997a002..9d69ee80a 100644
--- a/src/ui/components/LoadingIndicator.tsx
+++ b/src/ui/components/LoadingIndicator.tsx
@@ -30,6 +30,8 @@ const LoadingIndicator = styled('div')((props: {size: number}) => ({
   borderLeftColor: 'rgba(0, 0, 0, 0.4)',
 }));
 
+LoadingIndicator.displayName = 'LoadingIndicator';
+
 LoadingIndicator.defaultProps = {
   size: 50,
 };
diff --git a/src/ui/components/MarkerTimeline.tsx b/src/ui/components/MarkerTimeline.tsx
index 8bc141dc9..8c130a3fe 100644
--- a/src/ui/components/MarkerTimeline.tsx
+++ b/src/ui/components/MarkerTimeline.tsx
@@ -43,6 +43,7 @@ const Markers = styled('div')((props: {totalTime: number}) => ({
     left: 5,
   },
 }));
+Markers.displayName = 'MarkerTimeline:Markers';
 
 const Point = styled(FlexRow)(
   (props: {
@@ -104,6 +105,7 @@ const Point = styled(FlexRow)(
     },
   }),
 );
+Point.displayName = 'MakerTimeline:Point';
 
 const Time = styled('span')({
   color: colors.light30,
@@ -111,12 +113,14 @@ const Time = styled('span')({
   marginRight: 4,
   marginTop: -2,
 });
+Time.displayName = 'MakerTimeline:Time';
 
 const Code = styled(Text)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   marginTop: -1,
 });
+Code.displayName = 'MakerTimeline:Code';
 
 type TimePoint = {
   timestamp: number;
diff --git a/src/ui/components/ModalOverlay.tsx b/src/ui/components/ModalOverlay.tsx
index a11cec32d..c319704b9 100644
--- a/src/ui/components/ModalOverlay.tsx
+++ b/src/ui/components/ModalOverlay.tsx
@@ -23,6 +23,7 @@ const Overlay = styled('div')({
   top: 0,
   zIndex: 99999,
 });
+Overlay.displayName = 'ModalOverlay:Overlay';
 
 export default class ModalOverlay extends Component<{
   onClose: () => void;
diff --git a/src/ui/components/MultiLineInput.tsx b/src/ui/components/MultiLineInput.tsx
index b6a09ce17..7c54b9e22 100644
--- a/src/ui/components/MultiLineInput.tsx
+++ b/src/ui/components/MultiLineInput.tsx
@@ -30,5 +30,6 @@ const MultiLineInput = styled('textarea')({
   ...multilineStyle,
   padding: '0 10px',
 });
+MultiLineInput.displayName = 'MultiLineInput';
 
 export default MultiLineInput;
diff --git a/src/ui/components/Orderable.tsx b/src/ui/components/Orderable.tsx
index e827b25c8..449407ebd 100644
--- a/src/ui/components/Orderable.tsx
+++ b/src/ui/components/Orderable.tsx
@@ -41,12 +41,14 @@ type TabSizes = {
 const OrderableContainer = styled('div')({
   position: 'relative',
 });
+OrderableContainer.displayName = 'Orderable:OrderableContainer';
 
 const OrderableItemContainer = styled('div')(
   (props: {orientation: 'vertical' | 'horizontal'}) => ({
     display: props.orientation === 'vertical' ? 'block' : 'inline-block',
   }),
 );
+OrderableItemContainer.displayName = 'Orderable:OrderableItemContainer';
 
 class OrderableItem extends Component<{
   orientation: OrderableOrientation;
diff --git a/src/ui/components/Panel.tsx b/src/ui/components/Panel.tsx
index 0d0a21902..85114af10 100644
--- a/src/ui/components/Panel.tsx
+++ b/src/ui/components/Panel.tsx
@@ -21,6 +21,7 @@ const Chevron = styled(Glyph)({
   marginLeft: -2,
   marginBottom: 1,
 });
+Chevron.displayName = 'Panel:Chevron';
 
 /**
  * A Panel component.
diff --git a/src/ui/components/Popover.tsx b/src/ui/components/Popover.tsx
index db0dd72e7..83955dcd5 100644
--- a/src/ui/components/Popover.tsx
+++ b/src/ui/components/Popover.tsx
@@ -19,6 +19,7 @@ const Anchor = styled('img')({
   left: '50%',
   transform: 'translate(-50%, calc(100% + 2px))',
 });
+Anchor.displayName = 'Popover.Anchor';
 
 type Opts = {
   minWidth?: number;
@@ -56,6 +57,7 @@ const PopoverContainer = styled(FlexColumn)((props: {opts?: Opts}) => ({
     backgroundColor: colors.white,
   },
 }));
+PopoverContainer.displayName = 'Popover:PopoverContainer';
 
 type Props = {
   children: React.ReactNode;
diff --git a/src/ui/components/ResizeSensor.tsx b/src/ui/components/ResizeSensor.tsx
index e0fb09854..38d98bfc6 100644
--- a/src/ui/components/ResizeSensor.tsx
+++ b/src/ui/components/ResizeSensor.tsx
@@ -21,6 +21,7 @@ const IFrame = styled('iframe')({
   top: 0,
   left: 0,
 });
+IFrame.displayName = 'ResizeSensor:IFrame';
 
 /**
  * Listener for resize events.
diff --git a/src/ui/components/Select.tsx b/src/ui/components/Select.tsx
index d184bd5a6..b7f1e89a7 100644
--- a/src/ui/components/Select.tsx
+++ b/src/ui/components/Select.tsx
@@ -16,15 +16,18 @@ const Label = styled('label')({
   display: 'flex',
   alignItems: 'center',
 });
+Label.displayName = 'Select:Label';
 
 const LabelText = styled(Text)({
   fontWeight: 500,
   marginRight: 5,
 });
+LabelText.displayName = 'Select:LabelText';
 
 const SelectMenu = styled('select')((props: {grow?: boolean}) => ({
   flexGrow: props.grow ? 1 : 0,
 }));
+SelectMenu.displayName = 'Select:SelectMenu';
 
 /**
  * Dropdown to select from a list of options
diff --git a/src/ui/components/Sidebar.tsx b/src/ui/components/Sidebar.tsx
index f64084457..f74ca9529 100644
--- a/src/ui/components/Sidebar.tsx
+++ b/src/ui/components/Sidebar.tsx
@@ -23,6 +23,7 @@ import React from 'react';
 const SidebarInteractiveContainer = styled(Interactive)({
   flex: 'none',
 });
+SidebarInteractiveContainer.displayName = 'Sidebar:SidebarInteractiveContainer';
 
 type SidebarPosition = 'left' | 'top' | 'right' | 'bottom';
 
@@ -45,6 +46,7 @@ const SidebarContainer = styled(FlexColumn)(
     whiteSpace: props.overflow ? 'nowrap' : 'normal',
   }),
 );
+SidebarContainer.displayName = 'Sidebar:SidebarContainer';
 
 type SidebarProps = {
   /**
diff --git a/src/ui/components/SidebarLabel.tsx b/src/ui/components/SidebarLabel.tsx
index 6b750b444..80544001b 100644
--- a/src/ui/components/SidebarLabel.tsx
+++ b/src/ui/components/SidebarLabel.tsx
@@ -11,8 +11,11 @@ import {colors} from './colors';
 import Label from './Label';
 import styled from 'react-emotion';
 
-export default styled(Label)({
+const SidebarLabel = styled(Label)({
   color: colors.blackAlpha30,
   fontSize: 12,
   padding: 10,
 });
+SidebarLabel.displayName = 'SidebarLabel';
+
+export default SidebarLabel;
diff --git a/src/ui/components/StackTrace.tsx b/src/ui/components/StackTrace.tsx
index f6988ec3b..0f6f052ba 100644
--- a/src/ui/components/StackTrace.tsx
+++ b/src/ui/components/StackTrace.tsx
@@ -35,6 +35,7 @@ const Padder = styled('div')(
     backgroundColor,
   }),
 );
+Padder.displayName = 'StackTrace:Padder';
 
 const Container = styled('div')(
   ({isCrash, padded}: {isCrash?: boolean; padded?: boolean}) => ({
@@ -46,6 +47,7 @@ const Container = styled('div')(
     overflow: 'hidden',
   }),
 );
+Container.displayName = 'StackTrace:Container';
 
 const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({
   color: isCrash ? colors.red : 'inherit',
@@ -53,12 +55,14 @@ const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({
   alignItems: 'center',
   minHeight: 32,
 }));
+Title.displayName = 'StackTrace:Title';
 
 const Reason = styled(Text)(({isCrash}: {isCrash?: boolean}) => ({
   color: isCrash ? colors.red : colors.light80,
   fontWeight: 'bold',
   fontSize: 13,
 }));
+Reason.displayName = 'StackTrace:Reason';
 
 const Line = styled(Text)(
   ({isCrash, isBold}: {isCrash?: boolean; isBold?: boolean}) => ({
@@ -66,8 +70,10 @@ const Line = styled(Text)(
     fontWeight: isBold ? 'bold' : 'normal',
   }),
 );
+Line.displayName = 'StackTrace:Line';
 
 const Icon = styled(Glyph)({marginRight: 5});
+Icon.displayName = 'StackTrace:Icon';
 
 const COLUMNS = {
   lineNumber: 40,
diff --git a/src/ui/components/StarButton.tsx b/src/ui/components/StarButton.tsx
index 01b2927e4..87d9eefba 100644
--- a/src/ui/components/StarButton.tsx
+++ b/src/ui/components/StarButton.tsx
@@ -18,6 +18,7 @@ const DownscaledGlyph = styled(Glyph)({
   height: 12,
   width: 12,
 });
+DownscaledGlyph.displayName = 'StarButton:DownscaledGlyph';
 
 export function StarButton({
   starred,
diff --git a/src/ui/components/StatusIndicator.tsx b/src/ui/components/StatusIndicator.tsx
index 8ff098657..3c821035e 100644
--- a/src/ui/components/StatusIndicator.tsx
+++ b/src/ui/components/StatusIndicator.tsx
@@ -29,5 +29,6 @@ const StatusIndicator = styled('div')(
     width: diameter,
   }),
 );
+StatusIndicator.displayName = 'StatusIndicator';
 
 export default StatusIndicator;
diff --git a/src/ui/components/Tabs.tsx b/src/ui/components/Tabs.tsx
index 51d903e26..f5000d673 100644
--- a/src/ui/components/Tabs.tsx
+++ b/src/ui/components/Tabs.tsx
@@ -21,6 +21,7 @@ const TabList = styled(FlexRow)({
   justifyContent: 'center',
   alignItems: 'stretch',
 });
+TabList.displayName = 'Tabs:TabList';
 
 const TabListItem = styled('div')(
   (props: {
@@ -65,6 +66,7 @@ const TabListItem = styled('div')(
     },
   }),
 );
+TabListItem.displayName = 'Tabs:TabListItem';
 
 const TabListAddItem = styled(TabListItem)({
   borderRight: 'none',
@@ -72,6 +74,7 @@ const TabListAddItem = styled(TabListItem)({
   flexGrow: 0,
   fontWeight: 'bold',
 });
+TabListAddItem.displayName = 'Tabs:TabListAddItem';
 
 const CloseButton = styled('div')({
   color: '#000',
@@ -91,16 +94,19 @@ const CloseButton = styled('div')({
     color: '#fff',
   },
 });
+CloseButton.displayName = 'Tabs:CloseButton';
 
 const OrderableContainer = styled('div')({
   display: 'inline-block',
 });
+OrderableContainer.displayName = 'Tabs:OrderableContainer';
 
 const TabContent = styled('div')({
   height: '100%',
   overflow: 'auto',
   width: '100%',
 });
+TabContent.displayName = 'Tabs:TabContent';
 
 /**
  * A Tabs component.
diff --git a/src/ui/components/TabsContainer.tsx b/src/ui/components/TabsContainer.tsx
index 50550f7a0..5734da705 100644
--- a/src/ui/components/TabsContainer.tsx
+++ b/src/ui/components/TabsContainer.tsx
@@ -19,10 +19,11 @@ const Container = styled('div')({
   marginTop: 11,
   marginBottom: 10,
 });
+Container.displayName = 'TabsContainer:Container';
 
 export const TabsContext = React.createContext(true);
 
-export default function(props: {children: any}) {
+export default function TabsContainer(props: {children: any}) {
   return (
     <Container>
       <TabsContext.Provider value={true}>{props.children}</TabsContext.Provider>
diff --git a/src/ui/components/Text.tsx b/src/ui/components/Text.tsx
index c79425474..1d4cece94 100644
--- a/src/ui/components/Text.tsx
+++ b/src/ui/components/Text.tsx
@@ -55,5 +55,6 @@ const Text = styled('span')(
         : props.whiteSpace,
   }),
 );
+Text.displayName = 'Text';
 
 export default Text;
diff --git a/src/ui/components/TextParagraph.tsx b/src/ui/components/TextParagraph.tsx
index 74ca4d1d3..63db0e5d1 100644
--- a/src/ui/components/TextParagraph.tsx
+++ b/src/ui/components/TextParagraph.tsx
@@ -19,5 +19,6 @@ const TextParagraph = styled('div')({
     marginBottom: 0,
   },
 });
+TextParagraph.displayName = 'TextParagraph';
 
 export default TextParagraph;
diff --git a/src/ui/components/Textarea.tsx b/src/ui/components/Textarea.tsx
index 7f3a18faf..117b812dc 100644
--- a/src/ui/components/Textarea.tsx
+++ b/src/ui/components/Textarea.tsx
@@ -10,9 +10,12 @@
 import styled from 'react-emotion';
 import {inputStyle} from './Input';
 
-export default styled('textarea')(({compact}: {compact?: boolean}) => ({
+const Textarea = styled('textarea')(({compact}: {compact?: boolean}) => ({
   ...inputStyle(compact || false),
   lineHeight: 'normal',
   padding: compact ? '5px' : '8px',
   resize: 'none',
 }));
+Textarea.displayName = 'Textarea';
+
+export default Textarea;
diff --git a/src/ui/components/ToggleSwitch.tsx b/src/ui/components/ToggleSwitch.tsx
index 465b458d3..8438e006b 100644
--- a/src/ui/components/ToggleSwitch.tsx
+++ b/src/ui/components/ToggleSwitch.tsx
@@ -34,16 +34,19 @@ export const StyledButton = styled('div')((props: {toggled: boolean}) => ({
     transition: 'all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s',
   },
 }));
+StyledButton.displayName = 'ToggleSwitch:StyledButton';
 
 const Container = styled(FlexRow)({
   alignItems: 'center',
   cursor: 'pointer',
 });
+Container.displayName = 'ToggleSwitch:Container';
 
 const Label = styled(Text)({
   marginLeft: 7,
   marginRight: 7,
 });
+Label.displayName = 'ToggleSwitch:Label';
 
 type Props = {
   /**
diff --git a/src/ui/components/Toolbar.tsx b/src/ui/components/Toolbar.tsx
index 9da6e6625..fca94f62c 100644
--- a/src/ui/components/Toolbar.tsx
+++ b/src/ui/components/Toolbar.tsx
@@ -34,9 +34,11 @@ const Toolbar = styled(FlexRow)(
     width: '100%',
   }),
 );
+Toolbar.displayName = 'Toolbar';
 
 export const Spacer = styled(FlexBox)({
   flexGrow: 1,
 });
+Spacer.displayName = 'Spacer';
 
 export default Toolbar;
diff --git a/src/ui/components/Tooltip.tsx b/src/ui/components/Tooltip.tsx
index 43e04bc7d..6104e1739 100644
--- a/src/ui/components/Tooltip.tsx
+++ b/src/ui/components/Tooltip.tsx
@@ -15,6 +15,7 @@ import PropTypes from 'prop-types';
 const TooltipContainer = styled('div')({
   display: 'contents',
 });
+TooltipContainer.displayName = 'Tooltip:TooltipContainer';
 
 type TooltipProps = {
   /** Content shown in the tooltip */
diff --git a/src/ui/components/TooltipProvider.tsx b/src/ui/components/TooltipProvider.tsx
index d151921f1..207907280 100644
--- a/src/ui/components/TooltipProvider.tsx
+++ b/src/ui/components/TooltipProvider.tsx
@@ -83,6 +83,7 @@ const TooltipBubble = styled('div')(
     color: props.options.color,
   }),
 );
+TooltipBubble.displayName = 'TooltipProvider:TooltipBubble';
 
 // vertical offset on bubble when position is 'below'
 const BUBBLE_BELOW_POSITION_VERTICAL_OFFSET = -10;
@@ -120,6 +121,7 @@ const TooltipTail = styled('div')(
     right: props.right,
   }),
 );
+TooltipTail.displayName = 'TooltipProvider:TooltipTail';
 
 type TooltipProps = {
   children: React.ReactNode;
diff --git a/src/ui/components/VerticalRule.tsx b/src/ui/components/VerticalRule.tsx
index b10c569c2..98c3ee502 100644
--- a/src/ui/components/VerticalRule.tsx
+++ b/src/ui/components/VerticalRule.tsx
@@ -9,8 +9,11 @@
 
 import styled from 'react-emotion';
 
-export default styled('div')({
+const VerticalRule = styled('div')({
   backgroundColor: '#c9ced4',
   width: 3,
   margin: '0',
 });
+VerticalRule.displayName = 'VerticalRule';
+
+export default VerticalRule;
diff --git a/src/ui/components/View.tsx b/src/ui/components/View.tsx
index b42fd1444..cfb7c980c 100644
--- a/src/ui/components/View.tsx
+++ b/src/ui/components/View.tsx
@@ -20,5 +20,6 @@ const View = styled('div')((props: Props) => ({
   position: 'relative',
   width: props.grow ? '100%' : 'auto',
 }));
+View.displayName = 'View';
 
 export default View;
diff --git a/src/ui/components/VirtualList.tsx b/src/ui/components/VirtualList.tsx
index 15b759c95..b15102892 100644
--- a/src/ui/components/VirtualList.tsx
+++ b/src/ui/components/VirtualList.tsx
@@ -24,6 +24,7 @@ const Inner = styled(FlexColumn)(
     width: '100%',
   }),
 );
+Inner.displayName = 'VirtualList:Inner';
 
 const Content = styled(FlexColumn)(({top}: {top: TopProperty<number>}) => ({
   alignItems: 'flex-start',
@@ -32,6 +33,7 @@ const Content = styled(FlexColumn)(({top}: {top: TopProperty<number>}) => ({
   minWidth: '100%',
   overflow: 'visible',
 }));
+Content.displayName = 'VirtualList:Content';
 
 type VirtualListProps = {
   data: Array<any>;
diff --git a/src/ui/components/data-inspector/DataDescription.tsx b/src/ui/components/data-inspector/DataDescription.tsx
index 7b3750b16..60405ed15 100644
--- a/src/ui/components/data-inspector/DataDescription.tsx
+++ b/src/ui/components/data-inspector/DataDescription.tsx
@@ -21,26 +21,32 @@ import React, {KeyboardEvent} from 'react';
 const NullValue = styled('span')({
   color: 'rgb(128, 128, 128)',
 });
+NullValue.displayName = 'DataDescription:NullValue';
 
 const UndefinedValue = styled('span')({
   color: 'rgb(128, 128, 128)',
 });
+UndefinedValue.displayName = 'DataDescription:UndefinedValue';
 
 const StringValue = styled('span')({
   color: colors.cherryDark1,
 });
+StringValue.displayName = 'DataDescription:StringValue';
 
 const ColorValue = styled('span')({
   color: colors.blueGrey,
 });
+ColorValue.displayName = 'DataDescription:ColorValue';
 
 const SymbolValue = styled('span')({
   color: 'rgb(196, 26, 22)',
 });
+SymbolValue.displayName = 'DataDescription:SymbolValue';
 
 const NumberValue = styled('span')({
   color: colors.tealDark1,
 });
+NumberValue.displayName = 'DataDescription:NumberValue';
 
 const ColorBox = styled('span')((props: {color: string}) => ({
   backgroundColor: props.color,
@@ -51,20 +57,24 @@ const ColorBox = styled('span')((props: {color: string}) => ({
   verticalAlign: 'middle',
   width: 12,
 }));
+ColorBox.displayName = 'DataDescription:ColorBox';
 
 const FunctionKeyword = styled('span')({
   color: 'rgb(170, 13, 145)',
   fontStyle: 'italic',
 });
+FunctionKeyword.displayName = 'DataDescription:FunctionKeyword';
 
 const FunctionName = styled('span')({
   fontStyle: 'italic',
 });
+FunctionName.displayName = 'DataDescription:FunctionName';
 
 const ColorPickerDescription = styled('div')({
   display: 'inline',
   position: 'relative',
 });
+ColorPickerDescription.displayName = 'DataDescription:ColorPickerDescription';
 
 type DataDescriptionProps = {
   path?: Array<string>;
diff --git a/src/ui/components/data-inspector/DataInspector.tsx b/src/ui/components/data-inspector/DataInspector.tsx
index 4b9cf8cfb..3543ac7e3 100644
--- a/src/ui/components/data-inspector/DataInspector.tsx
+++ b/src/ui/components/data-inspector/DataInspector.tsx
@@ -34,18 +34,22 @@ const BaseContainer = styled('div')(
     userSelect: 'text',
   }),
 );
+BaseContainer.displayName = 'DataInspector:BaseContainer';
 
 const RecursiveBaseWrapper = styled('span')({
   color: colors.red,
 });
+RecursiveBaseWrapper.displayName = 'DataInspector:RecursiveBaseWrapper';
 
 const Wrapper = styled('span')({
   color: '#555',
 });
+Wrapper.displayName = 'DataInspector:Wrapper';
 
 const PropertyContainer = styled('span')({
   paddingTop: '2px',
 });
+PropertyContainer.displayName = 'DataInspector:PropertyContainer';
 
 const ExpandControl = styled('span')({
   color: '#6e6e6e',
@@ -54,10 +58,12 @@ const ExpandControl = styled('span')({
   marginRight: 5,
   whiteSpace: 'pre',
 });
+ExpandControl.displayName = 'DataInspector:ExpandControl';
 
 export const InspectorName = styled('span')({
   color: colors.grapeDark1,
 });
+InspectorName.displayName = 'DataInspector:InspectorName';
 
 const nameTooltipOptions: TooltipOptions = {
   position: 'toLeft',
diff --git a/src/ui/components/data-inspector/DataPreview.tsx b/src/ui/components/data-inspector/DataPreview.tsx
index e1165dce6..7b71e9d95 100755
--- a/src/ui/components/data-inspector/DataPreview.tsx
+++ b/src/ui/components/data-inspector/DataPreview.tsx
@@ -17,6 +17,7 @@ import React from 'react';
 const PreviewContainer = styled('span')({
   fontStyle: 'italic',
 });
+PreviewContainer.displayName = 'DataPreview:PreviewContainer';
 
 function intersperse(arr: Array<any>, sep: string) {
   if (arr.length === 0) {
diff --git a/src/ui/components/desktop-toolbar.tsx b/src/ui/components/desktop-toolbar.tsx
index 54427cb0f..57834a33e 100644
--- a/src/ui/components/desktop-toolbar.tsx
+++ b/src/ui/components/desktop-toolbar.tsx
@@ -27,6 +27,8 @@ const DesktopDropdownContainer = styled('div')({
     borderBottom: 'none',
   },
 });
+DesktopDropdownContainer.displayName =
+  'DesktopDropdown:DesktopDropdownContainer';
 
 export function DesktopDropdown(props: {
   deactivate?: () => void;
@@ -57,6 +59,8 @@ const DesktopDropdownItemContainer = styled('div')(
     },
   }),
 );
+DesktopDropdownItemContainer.displayName =
+  'DesktopDropdownItem:DesktopDropdownItemContainer';
 
 type DesktopDropdownItemState = {hovered: boolean};
 
@@ -126,3 +130,4 @@ export const DesktopDropdownSelectedItem = styled(DesktopDropdownItem)({
     position: 'absolute',
   },
 });
+DesktopDropdownSelectedItem.displayName = 'DesktopDropdownSelectedItem';
diff --git a/src/ui/components/elements-inspector/elements.tsx b/src/ui/components/elements-inspector/elements.tsx
index bb4119329..eba907fe9 100644
--- a/src/ui/components/elements-inspector/elements.tsx
+++ b/src/ui/components/elements-inspector/elements.tsx
@@ -72,6 +72,7 @@ const ElementsRowContainer = styled(ContextMenu)((props: any) => ({
     backgroundColor: backgroundColorHover(props),
   },
 }));
+ElementsRowContainer.displayName = 'Elements:ElementsRowContainer';
 
 const ElementsRowDecoration = styled(FlexRow)({
   flexShrink: 0,
@@ -82,6 +83,7 @@ const ElementsRowDecoration = styled(FlexRow)({
   width: 16,
   top: -1,
 });
+ElementsRowDecoration.displayName = 'Elements:ElementsRowDecoration';
 
 const ElementsLine = styled('div')((props: {childrenCount: number}) => ({
   backgroundColor: colors.light20,
@@ -93,12 +95,14 @@ const ElementsLine = styled('div')((props: {childrenCount: number}) => ({
   width: 2,
   borderRadius: '999em',
 }));
+ElementsLine.displayName = 'Elements:ElementsLine';
 
 const DecorationImage = styled('img')({
   height: 12,
   marginRight: 5,
   width: 12,
 });
+DecorationImage.displayName = 'Elements:DecorationImage';
 
 const NoShrinkText = styled(Text)({
   flexShrink: 0,
@@ -107,20 +111,25 @@ const NoShrinkText = styled(Text)({
   userSelect: 'none',
   fontWeight: 400,
 });
+NoShrinkText.displayName = 'Elements:NoShrinkText';
 
 const ElementsRowAttributeContainer = styled(NoShrinkText)({
   color: colors.dark80,
   fontWeight: 300,
   marginLeft: 5,
 });
+ElementsRowAttributeContainer.displayName =
+  'Elements:ElementsRowAttributeContainer';
 
 const ElementsRowAttributeKey = styled('span')({
   color: colors.tomato,
 });
+ElementsRowAttributeKey.displayName = 'Elements:ElementsRowAttributeKey';
 
 const ElementsRowAttributeValue = styled('span')({
   color: colors.slateDark3,
 });
+ElementsRowAttributeValue.displayName = 'Elements:ElementsRowAttributeValue';
 
 class PartialHighlight extends PureComponent<{
   selected: boolean;
@@ -403,12 +412,14 @@ const ElementsContainer = styled(FlexColumn)({
   minWidth: '100%',
   overflow: 'auto',
 });
+ElementsContainer.displayName = 'Elements:ElementsContainer';
 
 const ElementsBox = styled(FlexColumn)({
   alignItems: 'flex-start',
   flex: 1,
   overflow: 'auto',
 });
+ElementsBox.displayName = 'Elements:ElementsBox';
 
 export type DecorateRow = (e: Element) => ReactElement<any> | undefined | null;
 
diff --git a/src/ui/components/filter/FilterRow.tsx b/src/ui/components/filter/FilterRow.tsx
index c045a7414..d60acdd82 100644
--- a/src/ui/components/filter/FilterRow.tsx
+++ b/src/ui/components/filter/FilterRow.tsx
@@ -40,6 +40,7 @@ const FilterText = styled('div')({
     color: `${colors.white} !important`,
   },
 });
+FilterText.displayName = 'FilterRow:FilterText';
 
 type Props = {
   children: React.ReactNode;
diff --git a/src/ui/components/searchable/FilterToken.tsx b/src/ui/components/searchable/FilterToken.tsx
index 05e4697a2..08edf952f 100644
--- a/src/ui/components/searchable/FilterToken.tsx
+++ b/src/ui/components/searchable/FilterToken.tsx
@@ -39,6 +39,7 @@ const Token = styled(Text)(
     },
   }),
 );
+Token.displayName = 'FilterToken:Token';
 
 const Key = styled(Text)(
   (props: {type: 'exclude' | 'include' | 'enum'; focused?: boolean}) => ({
@@ -60,6 +61,7 @@ const Key = styled(Text)(
     },
   }),
 );
+Key.displayName = 'FilterToken:Key';
 
 const Value = styled(Text)({
   whiteSpace: 'nowrap',
@@ -69,6 +71,7 @@ const Value = styled(Text)({
   lineHeight: '21px',
   paddingLeft: 3,
 });
+Value.displayName = 'FilterToken:Value';
 
 const Chevron = styled('div')((props: {focused?: boolean}) => ({
   border: 0,
@@ -88,6 +91,7 @@ const Chevron = styled('div')((props: {focused?: boolean}) => ({
     backgroundColor: 'transparent',
   },
 }));
+Chevron.displayName = 'FilterToken:Chevron';
 
 type Props = {
   filter: Filter;
diff --git a/src/ui/components/searchable/Searchable.tsx b/src/ui/components/searchable/Searchable.tsx
index 2254e7427..cd962a97f 100644
--- a/src/ui/components/searchable/Searchable.tsx
+++ b/src/ui/components/searchable/Searchable.tsx
@@ -27,6 +27,7 @@ const SearchBar = styled(Toolbar)({
   height: 42,
   padding: 6,
 });
+SearchBar.displayName = 'Searchable:SearchBar';
 
 export const SearchBox = styled(FlexBox)({
   backgroundColor: colors.white,
@@ -37,6 +38,7 @@ export const SearchBox = styled(FlexBox)({
   alignItems: 'center',
   paddingLeft: 4,
 });
+SearchBox.displayName = 'Searchable:SearchBox';
 
 export const SearchInput = styled(Input)(
   (props: {focus?: boolean; regex?: boolean; isValidInput?: boolean}) => ({
@@ -56,6 +58,7 @@ export const SearchInput = styled(Input)(
     },
   }),
 );
+SearchInput.displayName = 'Searchable:SearchInput';
 
 const Clear = styled(Text)({
   position: 'absolute',
@@ -75,6 +78,7 @@ const Clear = styled(Text)({
     backgroundColor: 'rgba(0,0,0,0.15)',
   },
 });
+Clear.displayName = 'Searchable:Clear';
 
 export const SearchIcon = styled(Glyph)({
   marginRight: 3,
@@ -82,11 +86,13 @@ export const SearchIcon = styled(Glyph)({
   marginTop: -1,
   minWidth: 16,
 });
+SearchIcon.displayName = 'Searchable:SearchIcon';
 
 const Actions = styled(FlexRow)({
   marginLeft: 8,
   flexShrink: 0,
 });
+Actions.displayName = 'Searchable:Actions';
 
 export type SearchableProps = {
   addFilter: (filter: Filter) => void;
@@ -131,6 +137,8 @@ const Searchable = (
   Component: React.ComponentType<any>,
 ): React.ComponentType<any> =>
   class extends PureComponent<Props, State> {
+    static displayName = `Searchable(${Component.displayName})`;
+
     static defaultProps = {
       placeholder: 'Search...',
     };
diff --git a/src/ui/components/table/ManagedTable.tsx b/src/ui/components/table/ManagedTable.tsx
index 389ca8a3b..17bdfff18 100644
--- a/src/ui/components/table/ManagedTable.tsx
+++ b/src/ui/components/table/ManagedTable.tsx
@@ -148,6 +148,7 @@ const Container = styled(FlexColumn)((props: {canOverflow?: boolean}) => ({
   overflow: props.canOverflow ? 'scroll' : 'visible',
   flexGrow: 1,
 }));
+Container.displayName = 'ManagedTable:Container';
 
 const globalTableState: {[key: string]: TableColumnSizes} = {};
 
diff --git a/src/ui/components/table/ManagedTable_immutable.tsx b/src/ui/components/table/ManagedTable_immutable.tsx
index 7e2647902..d29e8d1f0 100644
--- a/src/ui/components/table/ManagedTable_immutable.tsx
+++ b/src/ui/components/table/ManagedTable_immutable.tsx
@@ -145,6 +145,7 @@ const Container = styled(FlexColumn)((props: {canOverflow?: boolean}) => ({
   overflow: props.canOverflow ? 'scroll' : 'visible',
   flexGrow: 1,
 }));
+Container.displayName = 'ManagedTable_immutable:Container';
 
 const globalTableState: {[key: string]: TableColumnSizes} = {};
 
diff --git a/src/ui/components/table/TableHead.tsx b/src/ui/components/table/TableHead.tsx
index d3fe93b1a..33aa3fd7d 100644
--- a/src/ui/components/table/TableHead.tsx
+++ b/src/ui/components/table/TableHead.tsx
@@ -29,6 +29,7 @@ import React from 'react';
 const TableHeaderArrow = styled('span')({
   float: 'right',
 });
+TableHeaderArrow.displayName = 'TableHead:TableHeaderArrow';
 
 const TableHeaderColumnInteractive = styled(Interactive)({
   display: 'inline-block',
@@ -37,10 +38,13 @@ const TableHeaderColumnInteractive = styled(Interactive)({
   whiteSpace: 'nowrap',
   width: '100%',
 });
+TableHeaderColumnInteractive.displayName =
+  'TableHead:TableHeaderColumnInteractive';
 
 const TableHeaderColumnContainer = styled('div')({
   padding: '0 8px',
 });
+TableHeaderColumnContainer.displayName = 'TableHead:TableHeaderColumnContainer';
 
 const TableHeadContainer = styled(FlexRow)(
   (props: {horizontallyScrollable?: boolean}) => ({
@@ -56,6 +60,7 @@ const TableHeadContainer = styled(FlexRow)(
     minWidth: props.horizontallyScrollable ? 'min-content' : 0,
   }),
 );
+TableHeadContainer.displayName = 'TableHead:TableHeadContainer';
 
 const TableHeadColumnContainer = styled('div')(
   (props: {width: string | number}) => ({
@@ -81,6 +86,7 @@ const TableHeadColumnContainer = styled('div')(
     },
   }),
 );
+TableHeadColumnContainer.displayName = 'TableHead:TableHeadColumnContainer';
 
 const RIGHT_RESIZABLE = {right: true};
 
diff --git a/src/ui/components/table/TableRow.tsx b/src/ui/components/table/TableRow.tsx
index 7e234f1c8..3863bc05c 100644
--- a/src/ui/components/table/TableRow.tsx
+++ b/src/ui/components/table/TableRow.tsx
@@ -84,6 +84,7 @@ const TableBodyRowContainer = styled(FlexRow)(
     },
   }),
 );
+TableBodyRowContainer.displayName = 'TableRow:TableBodyRowContainer';
 
 const TableBodyColumnContainer = styled('div')(
   (props: {
@@ -105,6 +106,7 @@ const TableBodyColumnContainer = styled('div')(
     justifyContent: props.justifyContent,
   }),
 );
+TableBodyColumnContainer.displayName = 'TableRow:TableBodyColumnContainer';
 
 type Props = {
   columnSizes: TableColumnSizes;
diff --git a/src/ui/components/table/TypeBasedValueRenderer.tsx b/src/ui/components/table/TypeBasedValueRenderer.tsx
index a0ae6256d..01abdb533 100644
--- a/src/ui/components/table/TypeBasedValueRenderer.tsx
+++ b/src/ui/components/table/TypeBasedValueRenderer.tsx
@@ -35,6 +35,7 @@ const NonWrappingText = styled(Text)({
   whiteSpace: 'nowrap',
   userSelect: 'none',
 });
+NonWrappingText.displayName = 'TypeBasedValueRenderer:NonWrappingText';
 
 const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
   '&::before': {
@@ -48,6 +49,7 @@ const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
     marginTop: 1,
   },
 }));
+BooleanValue.displayName = 'TypeBasedValueRenderer:BooleanValue';
 
 export function renderValue(val: Value) {
   switch (val.type) {