Add test for displayName on React.memo components (#18925)
* Add test for displayName on React.memo components * Added extra memo displayName test Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Sebastian Silbermann committed
May 16, 2020 at 00:56 UTC
c390ab3643612dc08ca4bebadc5b0377e9e7eb79
1 file changed
+39
packages/react-reconciler/src/__tests__/ReactMemo-test.js
+39
@@ -497,5 +497,44 @@ describe('memo', () => {
497
expect(root).toMatchRenderedOutput('1');
498
});
499
});
500
+
501
+ it('should honor a displayName if set on the memo wrapper in warnings', () => {
502
+ const MemoComponent = React.memo(function Component(props) {
503
+ return <div {...props} />;
504
+ });
505
+ MemoComponent.displayName = 'Foo';
506
+ MemoComponent.propTypes = {
507
+ required: PropTypes.string.isRequired,
508
+ };
509
+
510
+ expect(() =>
511
+ ReactNoop.render(<MemoComponent optional="foo" />),
512
+ ).toErrorDev(
513
+ 'Warning: Failed prop type: The prop `required` is marked as required in ' +
514
+ '`Foo`, but its value is `undefined`.\n' +
515
+ ' in Foo (at **)',
516
+ );
517
+ });
518
+
519
+ it('should honor a inner displayName if set on the wrapped function', () => {
520
+ function Component(props) {
521
+ return <div {...props} />;
522
+ }
523
+ Component.displayName = 'Foo';
524
+
525
+ const MemoComponent = React.memo(Component);
526
+ MemoComponent.displayName = 'Bar';
527
+ MemoComponent.propTypes = {
528
+ required: PropTypes.string.isRequired,
529
+ };
530
+
531
+ expect(() =>
532
+ ReactNoop.render(<MemoComponent optional="foo" />),
533
+ ).toErrorDev(
534
+ 'Warning: Failed prop type: The prop `required` is marked as required in ' +
535
+ '`Foo`, but its value is `undefined`.\n' +
536
+ ' in Foo (at **)',
537
+ );
538
+ });
539
}
540
});