Skip to content

Commit

Permalink
Fix tests on main (facebook#28643)
Browse files Browse the repository at this point in the history 
Not sure how these broke when merging
facebook#28299 and
facebook#28361
  • Loading branch information
@rickhanlonii @AndyPengc12
rickhanlonii authored and AndyPengc12 committed Apr 15, 2024
1 parent 325bb34 commit 897b6cd
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 90 deletions.
162 changes: 81 additions & 81 deletions packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -453,17 +453,17 @@ describe('ReactDOMServerPartialHydration', () => {
// Client rendered - suspense comment nodes removed.
expect(container.innerHTML).toBe('Hello<article>Mismatch</article>');
if (__DEV__) {
const secondToLastCall =
mockError.mock.calls[mockError.mock.calls.length - 2];
expect(secondToLastCall).toEqual([
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'section',
'\n' +
' in article (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
expect(mockError.mock.calls).toEqual([
[
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'section',
'\n' +
' in article (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
],
]);
}
} finally {
Expand Down Expand Up @@ -561,19 +561,19 @@ describe('ReactDOMServerPartialHydration', () => {
'<div><article>Mismatch</article></div>',
);
if (__DEV__) {
const secondToLastCall =
mockError.mock.calls[mockError.mock.calls.length - 2];
expect(secondToLastCall).toEqual([
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'div',
'\n' +
' in article (at **)\n' +
' in Component (at **)\n' +
' in div (at **)\n' +
' in Child (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
expect(mockError.mock.calls).toEqual([
[
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'div',
'\n' +
' in article (at **)\n' +
' in Component (at **)\n' +
' in div (at **)\n' +
' in Child (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
],
]);
}
} finally {
Expand Down Expand Up @@ -681,18 +681,18 @@ describe('ReactDOMServerPartialHydration', () => {
'<div><div></div><article>Mismatch</article></div>',
);
if (__DEV__) {
const secondToLastCall =
mockError.mock.calls[mockError.mock.calls.length - 2];
expect(secondToLastCall).toEqual([
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'div',
'\n' +
' in article (at **)\n' +
' in div (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
expect(mockError.mock.calls).toEqual([
[
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'div',
'\n' +
' in article (at **)\n' +
' in div (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
],
]);
}
} finally {
Expand Down Expand Up @@ -797,18 +797,18 @@ describe('ReactDOMServerPartialHydration', () => {
'<div><article>Mismatch</article><div></div></div>',
);
if (__DEV__) {
const secondToLastCall =
mockError.mock.calls[mockError.mock.calls.length - 2];
expect(secondToLastCall).toEqual([
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'div',
'\n' +
' in article (at **)\n' +
' in div (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
expect(mockError.mock.calls).toEqual([
[
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'div',
'\n' +
' in article (at **)\n' +
' in div (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
],
]);
}
} finally {
Expand Down Expand Up @@ -901,17 +901,17 @@ describe('ReactDOMServerPartialHydration', () => {
// Client rendered - suspense comment nodes removed
expect(container.innerHTML).toBe('<article><div></div></article>');
if (__DEV__) {
const secondToLastCall =
mockError.mock.calls[mockError.mock.calls.length - 2];
expect(secondToLastCall).toEqual([
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'section',
'\n' +
' in article (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
expect(mockError.mock.calls).toEqual([
[
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'section',
'\n' +
' in article (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
],
]);
}
} finally {
Expand Down Expand Up @@ -1007,17 +1007,17 @@ describe('ReactDOMServerPartialHydration', () => {
// Client rendered - suspense comment nodes removed
expect(container.innerHTML).toBe('<article>Mismatch</article>Hello');
if (__DEV__) {
const secondToLastCall =
mockError.mock.calls[mockError.mock.calls.length - 2];
expect(secondToLastCall).toEqual([
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'section',
'\n' +
' in article (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
expect(mockError.mock.calls).toEqual([
[
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'section',
'\n' +
' in article (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
],
]);
}
} finally {
Expand Down Expand Up @@ -1117,17 +1117,17 @@ describe('ReactDOMServerPartialHydration', () => {
'<article>Mismatch</article><div>Hello</div>',
);
if (__DEV__) {
const secondToLastCall =
mockError.mock.calls[mockError.mock.calls.length - 2];
expect(secondToLastCall).toEqual([
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'section',
'\n' +
' in article (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
expect(mockError.mock.calls).toEqual([
[
'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
'article',
'section',
'\n' +
' in article (at **)\n' +
' in Component (at **)\n' +
' in Suspense (at **)\n' +
' in App (at **)',
],
]);
}
} finally {
Expand Down
16 changes: 7 additions & 9 deletions packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,32 +314,30 @@ describe('ReactSuspense', () => {
}, 290);

// Render an empty shell
const root = ReactTestRenderer.create(<Foo />, {
isConcurrent: true,
});

const root = ReactDOMClient.createRoot(container);
root.render(<Foo />);
await waitForAll(['Foo', 'Suspend! [A]', 'Loading...']);
expect(root).toMatchRenderedOutput('Loading...');
expect(container.textContent).toEqual('Loading...');

// Now resolve A
jest.advanceTimersByTime(290);
await waitFor(['A']);
expect(root).toMatchRenderedOutput('Loading...');
expect(container.textContent).toEqual('Loading...');

// B starts loading. Parent boundary is in throttle.
// Still shows parent loading under throttle
jest.advanceTimersByTime(10);
await waitForAll(['Suspend! [B]', 'Loading more...']);
expect(root).toMatchRenderedOutput('Loading...');
expect(container.textContent).toEqual('Loading...');

// !! B could have finished before the throttle, but we show a fallback.
// !! Pushing out the 30ms fetch for B to 300ms.
jest.advanceTimersByTime(300);
await waitFor(['B']);
expect(root).toMatchRenderedOutput('ALoading more...');
expect(container.textContent).toEqual('ALoading more...');

await act(() => {});
expect(root).toMatchRenderedOutput('AB');
expect(container.textContent).toEqual('AB');
});

it('does not throttle fallback committing for too long', async () => {
Expand Down

0 comments on commit 897b6cd

Please sign in to comment.