Added more forwardRef test cases for DevTools (#17642)
Brian Vaughn committed
Dec 17, 2019 at 12:45 UTC
e84327ba0c547431e3c67b30c5fb5453fcb11573
3 files changed
+22
-1
packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
+3
@@ -618,6 +618,9 @@ exports[`Store should show the right display names for special component types 1
618
▾ <App>
619
<MyComponent>
620
<MyComponent> [ForwardRef]
621
+ ▾ <Anonymous> [ForwardRef]
622
+ <MyComponent>
623
+ <Custom> [ForwardRef]
624
<MyComponent> [Memo]
625
▾ <MyComponent> [Memo]
626
<MyComponent> [ForwardRef]
packages/react-devtools-shared/src/__tests__/store-test.js
+9
@@ -856,6 +856,13 @@ describe('Store', () => {
856
857
const MyComponent = (props, ref) => null;
858
const FowardRefComponent = React.forwardRef(MyComponent);
859
+ const FowardRefComponentWithAnonymousFunction = React.forwardRef(() => (
860
+ <MyComponent />
861
+ ));
862
+ const FowardRefComponentWithCustomDisplayName = React.forwardRef(
863
+ MyComponent,
864
+ );
865
+ FowardRefComponentWithCustomDisplayName.displayName = 'Custom';
866
const MemoComponent = React.memo(MyComponent);
867
const MemoForwardRefComponent = React.memo(FowardRefComponent);
868
const LazyComponent = React.lazy(() => fakeImport(MyComponent));
@@ -864,6 +871,8 @@ describe('Store', () => {
871
<React.Fragment>
872
<MyComponent />
873
<FowardRefComponent />
874
+ <FowardRefComponentWithAnonymousFunction />
875
+ <FowardRefComponentWithCustomDisplayName />
876
<MemoComponent />
877
<MemoForwardRefComponent />
878
<React.Suspense fallback="Loading...">
packages/react-devtools-shell/src/app/ElementTypes/index.js
+10
-1
@@ -35,9 +35,16 @@ function FunctionComponent() {
35
36
const MemoFunctionComponent = memo(FunctionComponent);
37
38
-const ForwardRefComponent = forwardRef((props, ref) => (
38
+const FowardRefComponentWithAnonymousFunction = forwardRef((props, ref) => (
39
<ClassComponent ref={ref} {...props} />
40
));
41
+const ForwardRefComponent = forwardRef(function NamedInnerFunction(props, ref) {
42
+ return <ClassComponent ref={ref} {...props} />;
43
+});
44
+const FowardRefComponentWithCustomDisplayName = forwardRef((props, ref) => (
45
+ <ClassComponent ref={ref} {...props} />
46
+));
47
+FowardRefComponentWithCustomDisplayName.displayName = 'Custom';
48
49
const LazyComponent = lazy(() =>
50
Promise.resolve({
@@ -58,6 +65,8 @@ export default function ElementTypes() {
65
<FunctionComponent />
66
<MemoFunctionComponent />
67
<ForwardRefComponent />
68
+ <FowardRefComponentWithAnonymousFunction />
69
+ <FowardRefComponentWithCustomDisplayName />
70
<LazyComponent />
71
</Suspense>
72
</StrictMode>