@samitouri / QOS-React / commits / 6e612587ec

chore[react-devtools]: drop legacy context tests (#31059)

We've dropped the support for detecting changes in legacy Contexts in https://github.com/facebook/react/pull/30896.

Ruslan Lesiutin committed Oct 1, 2024 at 14:26 UTC 6e612587ecfca0ea2e331300635d497d54437930
1 file changed -688
packages/react-devtools-shared/src/__tests__/profilingCache-test.js
-688
@@ -13,7 +13,6 @@ import type Store from 'react-devtools-shared/src/devtools/store';
13 import {getVersionedRenderImplementation} from './utils';
14
15 describe('ProfilingCache', () => {
16 - let PropTypes;
16 let React;
17 let ReactDOM;
18 let ReactDOMClient;
@@ -34,7 +33,6 @@ describe('ProfilingCache', () => {
33 store.collapseNodesByDefault = false;
34 store.recordChangeDescriptions = true;
35
37 - PropTypes = require('prop-types');
36 React = require('react');
37 ReactDOM = require('react-dom');
38 ReactDOMClient = require('react-dom/client');
@@ -309,692 +307,6 @@ describe('ProfilingCache', () => {
307 });
308 });
309
312 - // @reactVersion >= 16.9
313 - // @reactVersion <= 18.2
314 - it('should record changed props/state/context/hooks for React version [16.9; 18.2] with legacy context', () => {
315 - let instance = null;
316 -
317 - const ModernContext = React.createContext(0);
318 -
319 - class LegacyContextProvider extends React.Component<any, {count: number}> {
320 - static childContextTypes = {
321 - count: PropTypes.number,
322 - };
323 - state = {count: 0};
324 - getChildContext() {
325 - return this.state;
326 - }
327 - render() {
328 - instance = this;
329 - return (
330 - <ModernContext.Provider value={this.state.count}>
331 - <React.Fragment>
332 - <ModernContextConsumer />
333 - <LegacyContextConsumer />
334 - </React.Fragment>
335 - </ModernContext.Provider>
336 - );
337 - }
338 - }
339 -
340 - const FunctionComponentWithHooks = ({count}) => {
341 - React.useMemo(() => count, [count]);
342 - return null;
343 - };
344 -
345 - class ModernContextConsumer extends React.Component<any> {
346 - static contextType = ModernContext;
347 - render() {
348 - return <FunctionComponentWithHooks count={this.context} />;
349 - }
350 - }
351 -
352 - class LegacyContextConsumer extends React.Component<any> {
353 - static contextTypes = {
354 - count: PropTypes.number,
355 - };
356 - render() {
357 - return <FunctionComponentWithHooks count={this.context.count} />;
358 - }
359 - }
360 -
361 - utils.act(() => store.profilerStore.startProfiling());
362 - utils.act(() => render(<LegacyContextProvider />));
363 - expect(instance).not.toBeNull();
364 - utils.act(() => (instance: any).setState({count: 1}));
365 - utils.act(() => render(<LegacyContextProvider foo={123} />));
366 - utils.act(() => render(<LegacyContextProvider bar="abc" />));
367 - utils.act(() => render(<LegacyContextProvider />));
368 - utils.act(() => store.profilerStore.stopProfiling());
369 -
370 - const rootID = store.roots[0];
371 -
372 - let changeDescriptions = store.profilerStore
373 - .getDataForRoot(rootID)
374 - .commitData.map(commitData => commitData.changeDescriptions);
375 - expect(changeDescriptions).toHaveLength(5);
376 - expect(changeDescriptions[0]).toMatchInlineSnapshot(`
377 - Map {
378 - 2 => {
379 - "context": null,
380 - "didHooksChange": false,
381 - "isFirstMount": true,
382 - "props": null,
383 - "state": null,
384 - },
385 - 4 => {
386 - "context": null,
387 - "didHooksChange": false,
388 - "isFirstMount": true,
389 - "props": null,
390 - "state": null,
391 - },
392 - 5 => {
393 - "context": null,
394 - "didHooksChange": false,
395 - "isFirstMount": true,
396 - "props": null,
397 - "state": null,
398 - },
399 - 6 => {
400 - "context": null,
401 - "didHooksChange": false,
402 - "isFirstMount": true,
403 - "props": null,
404 - "state": null,
405 - },
406 - 7 => {
407 - "context": null,
408 - "didHooksChange": false,
409 - "isFirstMount": true,
410 - "props": null,
411 - "state": null,
412 - },
413 - }
414 - `);
415 - expect(changeDescriptions[1]).toMatchInlineSnapshot(`
416 - Map {
417 - 5 => {
418 - "context": null,
419 - "didHooksChange": false,
420 - "hooks": [],
421 - "isFirstMount": false,
422 - "props": [
423 - "count",
424 - ],
425 - "state": null,
426 - },
427 - 4 => {
428 - "context": true,
429 - "didHooksChange": false,
430 - "hooks": null,
431 - "isFirstMount": false,
432 - "props": [],
433 - "state": null,
434 - },
435 - 7 => {
436 - "context": null,
437 - "didHooksChange": false,
438 - "hooks": [],
439 - "isFirstMount": false,
440 - "props": [
441 - "count",
442 - ],
443 - "state": null,
444 - },
445 - 6 => {
446 - "context": [
447 - "count",
448 - ],
449 - "didHooksChange": false,
450 - "hooks": null,
451 - "isFirstMount": false,
452 - "props": [],
453 - "state": null,
454 - },
455 - 2 => {
456 - "context": null,
457 - "didHooksChange": false,
458 - "hooks": [],
459 - "isFirstMount": false,
460 - "props": [],
461 - "state": [
462 - "count",
463 - ],
464 - },
465 - }
466 - `);
467 - expect(changeDescriptions[2]).toMatchInlineSnapshot(`
468 - Map {
469 - 5 => {
470 - "context": null,
471 - "didHooksChange": false,
472 - "hooks": [],
473 - "isFirstMount": false,
474 - "props": [],
475 - "state": null,
476 - },
477 - 4 => {
478 - "context": false,
479 - "didHooksChange": false,
480 - "hooks": null,
481 - "isFirstMount": false,
482 - "props": [],
483 - "state": null,
484 - },
485 - 7 => {
486 - "context": null,
487 - "didHooksChange": false,
488 - "hooks": [],
489 - "isFirstMount": false,
490 - "props": [],
491 - "state": null,
492 - },
493 - 6 => {
494 - "context": [],
495 - "didHooksChange": false,
496 - "hooks": null,
497 - "isFirstMount": false,
498 - "props": [],
499 - "state": null,
500 - },
501 - 2 => {
502 - "context": null,
503 - "didHooksChange": false,
504 - "hooks": [],
505 - "isFirstMount": false,
506 - "props": [
507 - "foo",
508 - ],
509 - "state": [],
510 - },
511 - }
512 - `);
513 - expect(changeDescriptions[3]).toMatchInlineSnapshot(`
514 - Map {
515 - 5 => {
516 - "context": null,
517 - "didHooksChange": false,
518 - "hooks": [],
519 - "isFirstMount": false,
520 - "props": [],
521 - "state": null,
522 - },
523 - 4 => {
524 - "context": false,
525 - "didHooksChange": false,
526 - "hooks": null,
527 - "isFirstMount": false,
528 - "props": [],
529 - "state": null,
530 - },
531 - 7 => {
532 - "context": null,
533 - "didHooksChange": false,
534 - "hooks": [],
535 - "isFirstMount": false,
536 - "props": [],
537 - "state": null,
538 - },
539 - 6 => {
540 - "context": [],
541 - "didHooksChange": false,
542 - "hooks": null,
543 - "isFirstMount": false,
544 - "props": [],
545 - "state": null,
546 - },
547 - 2 => {
548 - "context": null,
549 - "didHooksChange": false,
550 - "hooks": [],
551 - "isFirstMount": false,
552 - "props": [
553 - "foo",
554 - "bar",
555 - ],
556 - "state": [],
557 - },
558 - }
559 - `);
560 - expect(changeDescriptions[4]).toMatchInlineSnapshot(`
561 - Map {
562 - 5 => {
563 - "context": null,
564 - "didHooksChange": false,
565 - "hooks": [],
566 - "isFirstMount": false,
567 - "props": [],
568 - "state": null,
569 - },
570 - 4 => {
571 - "context": false,
572 - "didHooksChange": false,
573 - "hooks": null,
574 - "isFirstMount": false,
575 - "props": [],
576 - "state": null,
577 - },
578 - 7 => {
579 - "context": null,
580 - "didHooksChange": false,
581 - "hooks": [],
582 - "isFirstMount": false,
583 - "props": [],
584 - "state": null,
585 - },
586 - 6 => {
587 - "context": [],
588 - "didHooksChange": false,
589 - "hooks": null,
590 - "isFirstMount": false,
591 - "props": [],
592 - "state": null,
593 - },
594 - 2 => {
595 - "context": null,
596 - "didHooksChange": false,
597 - "hooks": [],
598 - "isFirstMount": false,
599 - "props": [
600 - "bar",
601 - ],
602 - "state": [],
603 - },
604 - }
605 - `);
606 -
607 - utils.exportImportHelper(bridge, store);
608 -
609 - const prevChangeDescriptions = [...changeDescriptions];
610 -
611 - changeDescriptions = store.profilerStore
612 - .getDataForRoot(rootID)
613 - .commitData.map(commitData => commitData.changeDescriptions);
614 - expect(changeDescriptions).toHaveLength(5);
615 -
616 - for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
617 - expect(changeDescriptions[commitIndex]).toEqual(
618 - prevChangeDescriptions[commitIndex],
619 - );
620 - }
621 - });
622 -
623 - // @reactVersion > 18.2
624 - // @gate !disableLegacyContext
625 - it('should record changed props/state/context/hooks for React version (18.2; ∞) with legacy context enabled', () => {
626 - let instance = null;
627 -
628 - const ModernContext = React.createContext(0);
629 -
630 - class LegacyContextProvider extends React.Component<any, {count: number}> {
631 - static childContextTypes = {
632 - count: PropTypes.number,
633 - };
634 - state = {count: 0};
635 - getChildContext() {
636 - return this.state;
637 - }
638 - render() {
639 - instance = this;
640 - return (
641 - <ModernContext.Provider value={this.state.count}>
642 - <React.Fragment>
643 - <ModernContextConsumer />
644 - <LegacyContextConsumer />
645 - </React.Fragment>
646 - </ModernContext.Provider>
647 - );
648 - }
649 - }
650 -
651 - const FunctionComponentWithHooks = ({count}) => {
652 - React.useMemo(() => count, [count]);
653 - return null;
654 - };
655 -
656 - class ModernContextConsumer extends React.Component<any> {
657 - static contextType = ModernContext;
658 - render() {
659 - return <FunctionComponentWithHooks count={this.context} />;
660 - }
661 - }
662 -
663 - class LegacyContextConsumer extends React.Component<any> {
664 - static contextTypes = {
665 - count: PropTypes.number,
666 - };
667 - render() {
668 - return <FunctionComponentWithHooks count={this.context.count} />;
669 - }
670 - }
671 -
672 - utils.act(() => store.profilerStore.startProfiling());
673 - utils.act(() => render(<LegacyContextProvider />));
674 - expect(instance).not.toBeNull();
675 - utils.act(() => (instance: any).setState({count: 1}));
676 - utils.act(() => render(<LegacyContextProvider foo={123} />));
677 - utils.act(() => render(<LegacyContextProvider bar="abc" />));
678 - utils.act(() => render(<LegacyContextProvider />));
679 - utils.act(() => store.profilerStore.stopProfiling());
680 -
681 - const rootID = store.roots[0];
682 -
683 - let changeDescriptions = store.profilerStore
684 - .getDataForRoot(rootID)
685 - .commitData.map(commitData => commitData.changeDescriptions);
686 - expect(changeDescriptions).toHaveLength(5);
687 - expect(changeDescriptions[0]).toEqual(
688 - new Map([
689 - [
690 - 2,
691 - {
692 - context: null,
693 - didHooksChange: false,
694 - isFirstMount: true,
695 - props: null,
696 - state: null,
697 - },
698 - ],
699 - [
700 - 4,
701 - {
702 - context: null,
703 - didHooksChange: false,
704 - isFirstMount: true,
705 - props: null,
706 - state: null,
707 - },
708 - ],
709 - [
710 - 5,
711 - {
712 - context: null,
713 - didHooksChange: false,
714 - isFirstMount: true,
715 - props: null,
716 - state: null,
717 - },
718 - ],
719 - [
720 - 6,
721 - {
722 - context: null,
723 - didHooksChange: false,
724 - isFirstMount: true,
725 - props: null,
726 - state: null,
727 - },
728 - ],
729 - [
730 - 7,
731 - {
732 - context: null,
733 - didHooksChange: false,
734 - isFirstMount: true,
735 - props: null,
736 - state: null,
737 - },
738 - ],
739 - ]),
740 - );
741 -
742 - expect(changeDescriptions[1]).toEqual(
743 - new Map([
744 - [
745 - 5,
746 - {
747 - context: null,
748 - didHooksChange: false,
749 - hooks: [],
750 - isFirstMount: false,
751 - props: ['count'],
752 - state: null,
753 - },
754 - ],
755 - [
756 - 4,
757 - {
758 - context: true,
759 - didHooksChange: false,
760 - hooks: null,
761 - isFirstMount: false,
762 - props: [],
763 - state: null,
764 - },
765 - ],
766 - [
767 - 7,
768 - {
769 - context: null,
770 - didHooksChange: false,
771 - hooks: [],
772 - isFirstMount: false,
773 - props: ['count'],
774 - state: null,
775 - },
776 - ],
777 - [
778 - 6,
779 - {
780 - context: ['count'],
781 - didHooksChange: false,
782 - hooks: null,
783 - isFirstMount: false,
784 - props: [],
785 - state: null,
786 - },
787 - ],
788 - [
789 - 2,
790 - {
791 - context: null,
792 - didHooksChange: false,
793 - hooks: [],
794 - isFirstMount: false,
795 - props: [],
796 - state: ['count'],
797 - },
798 - ],
799 - ]),
800 - );
801 -
802 - expect(changeDescriptions[2]).toEqual(
803 - new Map([
804 - [
805 - 5,
806 - {
807 - context: null,
808 - didHooksChange: false,
809 - hooks: [],
810 - isFirstMount: false,
811 - props: [],
812 - state: null,
813 - },
814 - ],
815 - [
816 - 4,
817 - {
818 - context: false,
819 - didHooksChange: false,
820 - hooks: null,
821 - isFirstMount: false,
822 - props: [],
823 - state: null,
824 - },
825 - ],
826 - [
827 - 7,
828 - {
829 - context: null,
830 - didHooksChange: false,
831 - hooks: [],
832 - isFirstMount: false,
833 - props: [],
834 - state: null,
835 - },
836 - ],
837 - [
838 - 6,
839 - {
840 - context: [],
841 - didHooksChange: false,
842 - hooks: null,
843 - isFirstMount: false,
844 - props: [],
845 - state: null,
846 - },
847 - ],
848 - [
849 - 2,
850 - {
851 - context: null,
852 - didHooksChange: false,
853 - hooks: [],
854 - isFirstMount: false,
855 - props: ['foo'],
856 - state: [],
857 - },
858 - ],
859 - ]),
860 - );
861 -
862 - expect(changeDescriptions[3]).toEqual(
863 - new Map([
864 - [
865 - 5,
866 - {
867 - context: null,
868 - didHooksChange: false,
869 - hooks: [],
870 - isFirstMount: false,
871 - props: [],
872 - state: null,
873 - },
874 - ],
875 - [
876 - 4,
877 - {
878 - context: false,
879 - didHooksChange: false,
880 - hooks: null,
881 - isFirstMount: false,
882 - props: [],
883 - state: null,
884 - },
885 - ],
886 - [
887 - 7,
888 - {
889 - context: null,
890 - didHooksChange: false,
891 - hooks: [],
892 - isFirstMount: false,
893 - props: [],
894 - state: null,
895 - },
896 - ],
897 - [
898 - 6,
899 - {
900 - context: [],
901 - didHooksChange: false,
902 - hooks: null,
903 - isFirstMount: false,
904 - props: [],
905 - state: null,
906 - },
907 - ],
908 - [
909 - 2,
910 - {
911 - context: null,
912 - didHooksChange: false,
913 - hooks: [],
914 - isFirstMount: false,
915 - props: ['foo', 'bar'],
916 - state: [],
917 - },
918 - ],
919 - ]),
920 - );
921 -
922 - expect(changeDescriptions[4]).toEqual(
923 - new Map([
924 - [
925 - 5,
926 - {
927 - context: null,
928 - didHooksChange: false,
929 - hooks: [],
930 - isFirstMount: false,
931 - props: [],
932 - state: null,
933 - },
934 - ],
935 - [
936 - 4,
937 - {
938 - context: false,
939 - didHooksChange: false,
940 - hooks: null,
941 - isFirstMount: false,
942 - props: [],
943 - state: null,
944 - },
945 - ],
946 - [
947 - 7,
948 - {
949 - context: null,
950 - didHooksChange: false,
951 - hooks: [],
952 - isFirstMount: false,
953 - props: [],
954 - state: null,
955 - },
956 - ],
957 - [
958 - 6,
959 - {
960 - context: [],
961 - didHooksChange: false,
962 - hooks: null,
963 - isFirstMount: false,
964 - props: [],
965 - state: null,
966 - },
967 - ],
968 - [
969 - 2,
970 - {
971 - context: null,
972 - didHooksChange: false,
973 - hooks: [],
974 - isFirstMount: false,
975 - props: ['bar'],
976 - state: [],
977 - },
978 - ],
979 - ]),
980 - );
981 -
982 - utils.exportImportHelper(bridge, store);
983 -
984 - const prevChangeDescriptions = [...changeDescriptions];
985 -
986 - changeDescriptions = store.profilerStore
987 - .getDataForRoot(rootID)
988 - .commitData.map(commitData => commitData.changeDescriptions);
989 - expect(changeDescriptions).toHaveLength(5);
990 -
991 - for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
992 - expect(changeDescriptions[commitIndex]).toEqual(
993 - prevChangeDescriptions[commitIndex],
994 - );
995 - }
996 - });
997 -
310 // @reactVersion >= 18.0
311 it('should properly detect changed hooks', () => {
312 const Context = React.createContext(0);