Skip to content

Commit

Permalink
Codemod tests to waitFor pattern (7/?)
Browse files Browse the repository at this point in the history 
This converts some of our test suite to use the `waitFor` test pattern,
instead of the `expect(Scheduler).toFlushAndYield` pattern. Most of
these changes are automated with jscodeshift, with some slight manual
cleanup in certain cases.

See #26285 for full context.
  • Loading branch information
@acdlite
acdlite committed Mar 4, 2023
1 parent e98695d commit 6d1d1c4
Show file tree
Hide file tree
Showing 14 changed files with 635 additions and 737 deletions.
52 changes: 29 additions & 23 deletions packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ let ReactDOMClient;
let Scheduler;
let act;
let container;
let waitForAll;
let assertLog;

describe('ReactSuspenseEffectsSemanticsDOM', () => {
beforeEach(() => {
Expand All @@ -26,6 +28,10 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
Scheduler = require('scheduler');
act = require('jest-react').act;

const InternalTestUtils = require('internal-test-utils');
waitForAll = InternalTestUtils.waitForAll;
assertLog = InternalTestUtils.assertLog;

container = document.createElement('div');
document.body.appendChild(container);
});
Expand Down Expand Up @@ -139,23 +145,23 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
act(() => {
root.render(<Parent swap={false} />);
});
expect(Scheduler).toHaveYielded(['Loading...']);
assertLog(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Ref mount: A']);
await waitForAll(['A', 'Ref mount: A']);
expect(container.innerHTML).toBe('<span>A</span>');

// Swap the position of A and B
ReactDOM.flushSync(() => {
root.render(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Ref unmount: A']);
assertLog(['Loading...', 'Ref unmount: A']);
expect(container.innerHTML).toBe(
'<span style="display: none;">A</span>Loading...',
);

await LazyChildB;
expect(Scheduler).toFlushAndYield(['B', 'Ref mount: B']);
await waitForAll(['B', 'Ref mount: B']);
expect(container.innerHTML).toBe('<span>B</span>');
});

Expand Down Expand Up @@ -199,21 +205,21 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
act(() => {
root.render(<Parent swap={false} />);
});
expect(Scheduler).toHaveYielded(['Loading...']);
assertLog(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
await waitForAll(['A', 'Did mount: A']);
expect(container.innerHTML).toBe('A');

// Swap the position of A and B
ReactDOM.flushSync(() => {
root.render(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
assertLog(['Loading...', 'Will unmount: A']);
expect(container.innerHTML).toBe('Loading...');

await LazyChildB;
expect(Scheduler).toFlushAndYield(['B', 'Did mount: B']);
await waitForAll(['B', 'Did mount: B']);
expect(container.innerHTML).toBe('B');
});

Expand Down Expand Up @@ -251,24 +257,24 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
act(() => {
root.render(<Parent swap={false} />);
});
expect(Scheduler).toHaveYielded(['Loading...']);
assertLog(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
await waitForAll(['A', 'Did mount: A']);
expect(container.innerHTML).toBe('A');

// Swap the position of A and B
ReactDOM.flushSync(() => {
root.render(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
assertLog(['Loading...', 'Will unmount: A']);
expect(container.innerHTML).toBe('Loading...');

// Destroy the whole tree, including the hidden A
ReactDOM.flushSync(() => {
root.render(<h1>Hello</h1>);
});
expect(Scheduler).toFlushAndYield([]);
await waitForAll([]);
expect(container.innerHTML).toBe('<h1>Hello</h1>');
});

Expand Down Expand Up @@ -318,17 +324,17 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
act(() => {
root.render(<Parent swap={false} />);
});
expect(Scheduler).toHaveYielded(['Loading...']);
assertLog(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Ref mount: A']);
await waitForAll(['A', 'Ref mount: A']);
expect(container.innerHTML).toBe('<span>A</span>');

// Swap the position of A and B
ReactDOM.flushSync(() => {
root.render(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Ref unmount: A']);
assertLog(['Loading...', 'Ref unmount: A']);
expect(container.innerHTML).toBe(
'<span style="display: none;">A</span>Loading...',
);
Expand All @@ -337,7 +343,7 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
ReactDOM.flushSync(() => {
root.render(<h1>Hello</h1>);
});
expect(Scheduler).toFlushAndYield([]);
await waitForAll([]);
expect(container.innerHTML).toBe('<h1>Hello</h1>');
});

Expand Down Expand Up @@ -381,24 +387,24 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
act(() => {
root.render(<Parent swap={false} />);
});
expect(Scheduler).toHaveYielded(['Loading...']);
assertLog(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
await waitForAll(['A', 'Did mount: A']);
expect(container.innerHTML).toBe('A');

// Swap the position of A and B
ReactDOM.flushSync(() => {
root.render(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
assertLog(['Loading...', 'Will unmount: A']);
expect(container.innerHTML).toBe('Loading...');

// Destroy the whole tree, including the hidden A
ReactDOM.flushSync(() => {
root.render(<h1>Hello</h1>);
});
expect(Scheduler).toFlushAndYield([]);
await waitForAll([]);
expect(container.innerHTML).toBe('<h1>Hello</h1>');
});

Expand Down Expand Up @@ -432,12 +438,12 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {

// Initial render
ReactDOM.render(<App showMore={false} />, container);
expect(Scheduler).toHaveYielded(['Child', 'Mount']);
assertLog(['Child', 'Mount']);

// Update that suspends, causing the existing tree to switches it to
// a fallback.
ReactDOM.render(<App showMore={true} />, container);
expect(Scheduler).toHaveYielded([
assertLog([
'Child',
'Loading...',

Expand All @@ -448,6 +454,6 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {

// Delete the tree and unmount the effect
ReactDOM.render(null, container);
expect(Scheduler).toHaveYielded(['Unmount']);
assertLog(['Unmount']);
});
});
28 changes: 16 additions & 12 deletions packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ let Suspense;
let getCacheForType;
let caches;
let seededCache;
let waitForAll;

describe('ReactSuspenseFallback', () => {
beforeEach(() => {
Expand All @@ -25,6 +26,9 @@ describe('ReactSuspenseFallback', () => {
getCacheForType = React.unstable_getCacheForType;
caches = [];
seededCache = null;

const InternalTestUtils = require('internal-test-utils');
waitForAll = InternalTestUtils.waitForAll;
});

function createTextCache() {
Expand Down Expand Up @@ -128,49 +132,49 @@ describe('ReactSuspenseFallback', () => {
}

// @gate enableLegacyCache
it('suspends and shows fallback', () => {
it('suspends and shows fallback', async () => {
ReactNoop.render(
<Suspense fallback={<Text text="Loading..." />}>
<AsyncText text="A" ms={100} />
</Suspense>,
);

expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
await waitForAll(['Suspend! [A]', 'Loading...']);
expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
});

// @gate enableLegacyCache
it('suspends and shows null fallback', () => {
it('suspends and shows null fallback', async () => {
ReactNoop.render(
<Suspense fallback={null}>
<AsyncText text="A" ms={100} />
</Suspense>,
);

expect(Scheduler).toFlushAndYield([
await waitForAll([
'Suspend! [A]',
// null
]);
expect(ReactNoop).toMatchRenderedOutput(null);
});

// @gate enableLegacyCache
it('suspends and shows undefined fallback', () => {
it('suspends and shows undefined fallback', async () => {
ReactNoop.render(
<Suspense>
<AsyncText text="A" ms={100} />
</Suspense>,
);

expect(Scheduler).toFlushAndYield([
await waitForAll([
'Suspend! [A]',
// null
]);
expect(ReactNoop).toMatchRenderedOutput(null);
});

// @gate enableLegacyCache
it('suspends and shows inner fallback', () => {
it('suspends and shows inner fallback', async () => {
ReactNoop.render(
<Suspense fallback={<Text text="Should not show..." />}>
<Suspense fallback={<Text text="Loading..." />}>
Expand All @@ -179,12 +183,12 @@ describe('ReactSuspenseFallback', () => {
</Suspense>,
);

expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
await waitForAll(['Suspend! [A]', 'Loading...']);
expect(ReactNoop).toMatchRenderedOutput(<span prop="Loading..." />);
});

// @gate enableLegacyCache
it('suspends and shows inner undefined fallback', () => {
it('suspends and shows inner undefined fallback', async () => {
ReactNoop.render(
<Suspense fallback={<Text text="Should not show..." />}>
<Suspense>
Expand All @@ -193,15 +197,15 @@ describe('ReactSuspenseFallback', () => {
</Suspense>,
);

expect(Scheduler).toFlushAndYield([
await waitForAll([
'Suspend! [A]',
// null
]);
expect(ReactNoop).toMatchRenderedOutput(null);
});

// @gate enableLegacyCache
it('suspends and shows inner null fallback', () => {
it('suspends and shows inner null fallback', async () => {
ReactNoop.render(
<Suspense fallback={<Text text="Should not show..." />}>
<Suspense fallback={null}>
Expand All @@ -210,7 +214,7 @@ describe('ReactSuspenseFallback', () => {
</Suspense>,
);

expect(Scheduler).toFlushAndYield([
await waitForAll([
'Suspend! [A]',
// null
]);
Expand Down
Loading

0 comments on commit 6d1d1c4

Please sign in to comment.