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 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.
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']);
});
});
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.