Skip to content

Commit

Permalink
Convert tests to use ReactDOM
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaearon
gaearon committed Apr 6, 2022
1 parent fd77aa4 commit 36a1726
Show file tree
Hide file tree
Showing 2 changed files with 385 additions and 366 deletions.
365 changes: 0 additions & 365 deletions packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1631,369 +1631,4 @@ describe('ReactLazy', () => {
]);
expect(root).toMatchRenderedOutput('ba');
});

it('does not destroy layout effects twice when hidden child is removed', async () => {
function ChildA({label}) {
React.useLayoutEffect(() => {
Scheduler.unstable_yieldValue('Did mount: ' + label);
return () => {
Scheduler.unstable_yieldValue('Will unmount: ' + label);
};
}, []);
return <Text text={label} />;
}

function ChildB({label}) {
React.useLayoutEffect(() => {
Scheduler.unstable_yieldValue('Did mount: ' + label);
return () => {
Scheduler.unstable_yieldValue('Will unmount: ' + label);
};
}, []);
return <Text text={label} />;
}

const LazyChildA = lazy(() => fakeImport(ChildA));
const LazyChildB = lazy(() => fakeImport(ChildB));

function Parent({swap}) {
return (
<Suspense fallback={<Text text="Loading..." />}>
{swap ? <LazyChildB label="B" /> : <LazyChildA label="A" />}
</Suspense>
);
}

const root = ReactTestRenderer.create(<Parent swap={false} />, {
unstable_isConcurrent: true,
});

expect(Scheduler).toFlushAndYield(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
expect(root).toMatchRenderedOutput('A');

// Swap the position of A and B
root.unstable_flushSync(() => {
root.update(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
expect(root).toMatchRenderedOutput('Loading...');

await LazyChildB;
expect(Scheduler).toFlushAndYield(['B', 'Did mount: B']);
expect(root).toMatchRenderedOutput('B');
});

it('does not destroy ref cleanup twice when hidden child is removed', async () => {
function ChildA({label}) {
return (
<span
ref={node => {
if (node) {
Scheduler.unstable_yieldValue('Ref mount: ' + label);
} else {
Scheduler.unstable_yieldValue('Ref unmount: ' + label);
}
}}>
<Text text={label} />
</span>
);
}

function ChildB({label}) {
return (
<span
ref={node => {
if (node) {
Scheduler.unstable_yieldValue('Ref mount: ' + label);
} else {
Scheduler.unstable_yieldValue('Ref unmount: ' + label);
}
}}>
<Text text={label} />
</span>
);
}

const LazyChildA = lazy(() => fakeImport(ChildA));
const LazyChildB = lazy(() => fakeImport(ChildB));

function Parent({swap}) {
return (
<Suspense fallback={<Text text="Loading..." />}>
{swap ? <LazyChildB label="B" /> : <LazyChildA label="A" />}
</Suspense>
);
}

const root = ReactTestRenderer.create(<Parent swap={false} />, {
unstable_isConcurrent: true,
createNodeMock() {
return {};
},
});

expect(Scheduler).toFlushAndYield(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Ref mount: A']);
expect(root).toMatchRenderedOutput(<span>A</span>);

// Swap the position of A and B
root.unstable_flushSync(() => {
root.update(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Ref unmount: A']);
expect(root).toMatchRenderedOutput('Loading...');

await LazyChildB;
expect(Scheduler).toFlushAndYield(['B', 'Ref mount: B']);
expect(root).toMatchRenderedOutput(<span>B</span>);
});

it('does not call componentWillUnmount twice when hidden child is removed', async () => {
class ChildA extends React.Component {
componentDidMount() {
Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
}
componentWillUnmount() {
Scheduler.unstable_yieldValue('Will unmount: ' + this.props.label);
}
render() {
return <Text text={this.props.label} />;
}
}

class ChildB extends React.Component {
componentDidMount() {
Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
}
componentWillUnmount() {
Scheduler.unstable_yieldValue('Will unmount: ' + this.props.label);
}
render() {
return <Text text={this.props.label} />;
}
}

const LazyChildA = lazy(() => fakeImport(ChildA));
const LazyChildB = lazy(() => fakeImport(ChildB));

function Parent({swap}) {
return (
<Suspense fallback={<Text text="Loading..." />}>
{swap ? <LazyChildB label="B" /> : <LazyChildA label="A" />}
</Suspense>
);
}

const root = ReactTestRenderer.create(<Parent swap={false} />, {
unstable_isConcurrent: true,
});

expect(Scheduler).toFlushAndYield(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
expect(root).toMatchRenderedOutput('A');

// Swap the position of A and B
root.unstable_flushSync(() => {
root.update(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
expect(root).toMatchRenderedOutput('Loading...');

await LazyChildB;
expect(Scheduler).toFlushAndYield(['B', 'Did mount: B']);
expect(root).toMatchRenderedOutput('B');
});

it('does not destroy layout effects twice when parent suspense is removed', async () => {
function ChildA({label}) {
React.useLayoutEffect(() => {
Scheduler.unstable_yieldValue('Did mount: ' + label);
return () => {
Scheduler.unstable_yieldValue('Will unmount: ' + label);
};
}, []);
return <Text text={label} />;
}
function ChildB({label}) {
React.useLayoutEffect(() => {
Scheduler.unstable_yieldValue('Did mount: ' + label);
return () => {
Scheduler.unstable_yieldValue('Will unmount: ' + label);
};
}, []);
return <Text text={label} />;
}
const LazyChildA = lazy(() => fakeImport(ChildA));
const LazyChildB = lazy(() => fakeImport(ChildB));

function Parent({swap}) {
return (
<Suspense fallback={<Text text="Loading..." />}>
{swap ? <LazyChildB label="B" /> : <LazyChildA label="A" />}
</Suspense>
);
}

const root = ReactTestRenderer.create(<Parent swap={false} />, {
unstable_isConcurrent: true,
});

expect(Scheduler).toFlushAndYield(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
expect(root).toMatchRenderedOutput('A');

// Swap the position of A and B
root.unstable_flushSync(() => {
root.update(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
expect(root).toMatchRenderedOutput('Loading...');

// Destroy the whole tree, including the hidden A
root.unstable_flushSync(() => {
root.update(<h1>Hello</h1>);
});
expect(Scheduler).toFlushAndYield([]);
expect(root).toMatchRenderedOutput(<h1>Hello</h1>);
});

it('does not destroy ref cleanup twice when parent suspense is removed', async () => {
function ChildA({label}) {
return (
<span
ref={node => {
if (node) {
Scheduler.unstable_yieldValue('Ref mount: ' + label);
} else {
Scheduler.unstable_yieldValue('Ref unmount: ' + label);
}
}}>
<Text text={label} />
</span>
);
}

function ChildB({label}) {
return (
<span
ref={node => {
if (node) {
Scheduler.unstable_yieldValue('Ref mount: ' + label);
} else {
Scheduler.unstable_yieldValue('Ref unmount: ' + label);
}
}}>
<Text text={label} />
</span>
);
}

const LazyChildA = lazy(() => fakeImport(ChildA));
const LazyChildB = lazy(() => fakeImport(ChildB));

function Parent({swap}) {
return (
<Suspense fallback={<Text text="Loading..." />}>
{swap ? <LazyChildB label="B" /> : <LazyChildA label="A" />}
</Suspense>
);
}

const root = ReactTestRenderer.create(<Parent swap={false} />, {
unstable_isConcurrent: true,
createNodeMock() {
return {};
},
});

expect(Scheduler).toFlushAndYield(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Ref mount: A']);
expect(root).toMatchRenderedOutput(<span>A</span>);

// Swap the position of A and B
root.unstable_flushSync(() => {
root.update(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Ref unmount: A']);
expect(root).toMatchRenderedOutput('Loading...');

// Destroy the whole tree, including the hidden A
root.unstable_flushSync(() => {
root.update(<h1>Hello</h1>);
});
expect(Scheduler).toFlushAndYield([]);
expect(root).toMatchRenderedOutput(<h1>Hello</h1>);
});

it('does not call componentWillUnmount twice when parent suspense is removed', async () => {
class ChildA extends React.Component {
componentDidMount() {
Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
}
componentWillUnmount() {
Scheduler.unstable_yieldValue('Will unmount: ' + this.props.label);
}
render() {
return <Text text={this.props.label} />;
}
}

class ChildB extends React.Component {
componentDidMount() {
Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
}
componentWillUnmount() {
Scheduler.unstable_yieldValue('Will unmount: ' + this.props.label);
}
render() {
return <Text text={this.props.label} />;
}
}

const LazyChildA = lazy(() => fakeImport(ChildA));
const LazyChildB = lazy(() => fakeImport(ChildB));

function Parent({swap}) {
return (
<Suspense fallback={<Text text="Loading..." />}>
{swap ? <LazyChildB label="B" /> : <LazyChildA label="A" />}
</Suspense>
);
}

const root = ReactTestRenderer.create(<Parent swap={false} />, {
unstable_isConcurrent: true,
});

expect(Scheduler).toFlushAndYield(['Loading...']);

await LazyChildA;
expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
expect(root).toMatchRenderedOutput('A');

// Swap the position of A and B
root.unstable_flushSync(() => {
root.update(<Parent swap={true} />);
});
expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
expect(root).toMatchRenderedOutput('Loading...');

// Destroy the whole tree, including the hidden A
root.unstable_flushSync(() => {
root.update(<h1>Hello</h1>);
});
expect(Scheduler).toFlushAndYield([]);
expect(root).toMatchRenderedOutput(<h1>Hello</h1>);
});
});
Loading

0 comments on commit 36a1726

Please sign in to comment.