Fix tests on main (#28643)
Not sure how these broke when merging https://github.com/facebook/react/pull/28299 and https://github.com/facebook/react/pull/28361
Ricky committed
Mar 26, 2024 at 11:26 UTC
c3048aab4c3346dca90ab0052a89fdb48450570f
2 files changed
+88
-90
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+81
-81
@@ -453,17 +453,17 @@ describe('ReactDOMServerPartialHydration', () => {
453
// Client rendered - suspense comment nodes removed.
454
expect(container.innerHTML).toBe('Hello<article>Mismatch</article>');
455
if (__DEV__) {
456
- const secondToLastCall =
457
- mockError.mock.calls[mockError.mock.calls.length - 2];
458
- expect(secondToLastCall).toEqual([
459
- 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
460
- 'article',
461
- 'section',
462
- '\n' +
463
- ' in article (at **)\n' +
464
- ' in Component (at **)\n' +
465
- ' in Suspense (at **)\n' +
466
- ' in App (at **)',
456
+ expect(mockError.mock.calls).toEqual([
457
+ [
458
+ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
459
+ 'article',
460
+ 'section',
461
+ '\n' +
462
+ ' in article (at **)\n' +
463
+ ' in Component (at **)\n' +
464
+ ' in Suspense (at **)\n' +
465
+ ' in App (at **)',
466
+ ],
467
]);
468
}
469
} finally {
@@ -561,19 +561,19 @@ describe('ReactDOMServerPartialHydration', () => {
561
'<div><article>Mismatch</article></div>',
562
);
563
if (__DEV__) {
564
- const secondToLastCall =
565
- mockError.mock.calls[mockError.mock.calls.length - 2];
566
- expect(secondToLastCall).toEqual([
567
- 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
568
- 'article',
569
- 'div',
570
- '\n' +
571
- ' in article (at **)\n' +
572
- ' in Component (at **)\n' +
573
- ' in div (at **)\n' +
574
- ' in Child (at **)\n' +
575
- ' in Suspense (at **)\n' +
576
- ' in App (at **)',
564
+ expect(mockError.mock.calls).toEqual([
565
+ [
566
+ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
567
+ 'article',
568
+ 'div',
569
+ '\n' +
570
+ ' in article (at **)\n' +
571
+ ' in Component (at **)\n' +
572
+ ' in div (at **)\n' +
573
+ ' in Child (at **)\n' +
574
+ ' in Suspense (at **)\n' +
575
+ ' in App (at **)',
576
+ ],
577
]);
578
}
579
} finally {
@@ -681,18 +681,18 @@ describe('ReactDOMServerPartialHydration', () => {
681
'<div><div></div><article>Mismatch</article></div>',
682
);
683
if (__DEV__) {
684
- const secondToLastCall =
685
- mockError.mock.calls[mockError.mock.calls.length - 2];
686
- expect(secondToLastCall).toEqual([
687
- 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
688
- 'article',
689
- 'div',
690
- '\n' +
691
- ' in article (at **)\n' +
692
- ' in div (at **)\n' +
693
- ' in Component (at **)\n' +
694
- ' in Suspense (at **)\n' +
695
- ' in App (at **)',
684
+ expect(mockError.mock.calls).toEqual([
685
+ [
686
+ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
687
+ 'article',
688
+ 'div',
689
+ '\n' +
690
+ ' in article (at **)\n' +
691
+ ' in div (at **)\n' +
692
+ ' in Component (at **)\n' +
693
+ ' in Suspense (at **)\n' +
694
+ ' in App (at **)',
695
+ ],
696
]);
697
}
698
} finally {
@@ -797,18 +797,18 @@ describe('ReactDOMServerPartialHydration', () => {
797
'<div><article>Mismatch</article><div></div></div>',
798
);
799
if (__DEV__) {
800
- const secondToLastCall =
801
- mockError.mock.calls[mockError.mock.calls.length - 2];
802
- expect(secondToLastCall).toEqual([
803
- 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
804
- 'article',
805
- 'div',
806
- '\n' +
807
- ' in article (at **)\n' +
808
- ' in div (at **)\n' +
809
- ' in Component (at **)\n' +
810
- ' in Suspense (at **)\n' +
811
- ' in App (at **)',
800
+ expect(mockError.mock.calls).toEqual([
801
+ [
802
+ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
803
+ 'article',
804
+ 'div',
805
+ '\n' +
806
+ ' in article (at **)\n' +
807
+ ' in div (at **)\n' +
808
+ ' in Component (at **)\n' +
809
+ ' in Suspense (at **)\n' +
810
+ ' in App (at **)',
811
+ ],
812
]);
813
}
814
} finally {
@@ -901,17 +901,17 @@ describe('ReactDOMServerPartialHydration', () => {
901
// Client rendered - suspense comment nodes removed
902
expect(container.innerHTML).toBe('<article><div></div></article>');
903
if (__DEV__) {
904
- const secondToLastCall =
905
- mockError.mock.calls[mockError.mock.calls.length - 2];
906
- expect(secondToLastCall).toEqual([
907
- 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
908
- 'article',
909
- 'section',
910
- '\n' +
911
- ' in article (at **)\n' +
912
- ' in Component (at **)\n' +
913
- ' in Suspense (at **)\n' +
914
- ' in App (at **)',
904
+ expect(mockError.mock.calls).toEqual([
905
+ [
906
+ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
907
+ 'article',
908
+ 'section',
909
+ '\n' +
910
+ ' in article (at **)\n' +
911
+ ' in Component (at **)\n' +
912
+ ' in Suspense (at **)\n' +
913
+ ' in App (at **)',
914
+ ],
915
]);
916
}
917
} finally {
@@ -1007,17 +1007,17 @@ describe('ReactDOMServerPartialHydration', () => {
1007
// Client rendered - suspense comment nodes removed
1008
expect(container.innerHTML).toBe('<article>Mismatch</article>Hello');
1009
if (__DEV__) {
1010
- const secondToLastCall =
1011
- mockError.mock.calls[mockError.mock.calls.length - 2];
1012
- expect(secondToLastCall).toEqual([
1013
- 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
1014
- 'article',
1015
- 'section',
1016
- '\n' +
1017
- ' in article (at **)\n' +
1018
- ' in Component (at **)\n' +
1019
- ' in Suspense (at **)\n' +
1020
- ' in App (at **)',
1010
+ expect(mockError.mock.calls).toEqual([
1011
+ [
1012
+ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
1013
+ 'article',
1014
+ 'section',
1015
+ '\n' +
1016
+ ' in article (at **)\n' +
1017
+ ' in Component (at **)\n' +
1018
+ ' in Suspense (at **)\n' +
1019
+ ' in App (at **)',
1020
+ ],
1021
]);
1022
}
1023
} finally {
@@ -1117,17 +1117,17 @@ describe('ReactDOMServerPartialHydration', () => {
1117
'<article>Mismatch</article><div>Hello</div>',
1118
);
1119
if (__DEV__) {
1120
- const secondToLastCall =
1121
- mockError.mock.calls[mockError.mock.calls.length - 2];
1122
- expect(secondToLastCall).toEqual([
1123
- 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
1124
- 'article',
1125
- 'section',
1126
- '\n' +
1127
- ' in article (at **)\n' +
1128
- ' in Component (at **)\n' +
1129
- ' in Suspense (at **)\n' +
1130
- ' in App (at **)',
1120
+ expect(mockError.mock.calls).toEqual([
1121
+ [
1122
+ 'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
1123
+ 'article',
1124
+ 'section',
1125
+ '\n' +
1126
+ ' in article (at **)\n' +
1127
+ ' in Component (at **)\n' +
1128
+ ' in Suspense (at **)\n' +
1129
+ ' in App (at **)',
1130
+ ],
1131
]);
1132
}
1133
} finally {
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+7
-9
@@ -314,32 +314,30 @@ describe('ReactSuspense', () => {
314
}, 290);
315
316
// Render an empty shell
317
- const root = ReactTestRenderer.create(<Foo />, {
318
- isConcurrent: true,
319
- });
320
-
317
+ const root = ReactDOMClient.createRoot(container);
318
+ root.render(<Foo />);
319
await waitForAll(['Foo', 'Suspend! [A]', 'Loading...']);
322
- expect(root).toMatchRenderedOutput('Loading...');
320
+ expect(container.textContent).toEqual('Loading...');
321
322
// Now resolve A
323
jest.advanceTimersByTime(290);
324
await waitFor(['A']);
327
- expect(root).toMatchRenderedOutput('Loading...');
325
+ expect(container.textContent).toEqual('Loading...');
326
327
// B starts loading. Parent boundary is in throttle.
328
// Still shows parent loading under throttle
329
jest.advanceTimersByTime(10);
330
await waitForAll(['Suspend! [B]', 'Loading more...']);
333
- expect(root).toMatchRenderedOutput('Loading...');
331
+ expect(container.textContent).toEqual('Loading...');
332
333
// !! B could have finished before the throttle, but we show a fallback.
334
// !! Pushing out the 30ms fetch for B to 300ms.
335
jest.advanceTimersByTime(300);
336
await waitFor(['B']);
339
- expect(root).toMatchRenderedOutput('ALoading more...');
337
+ expect(container.textContent).toEqual('ALoading more...');
338
339
await act(() => {});
342
- expect(root).toMatchRenderedOutput('AB');
340
+ expect(container.textContent).toEqual('AB');
341
});
342
343
it('does not throttle fallback committing for too long', async () => {