mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Added a simple Suspense test
This commit is contained in:
@@ -1,5 +1,30 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Store should display Suspense nodes properly in various states: loading 1`] = `
|
||||
[root]
|
||||
▾ <Wrapper>
|
||||
<Component key="Outside">
|
||||
▾ <Suspense>
|
||||
<Loading>
|
||||
`;
|
||||
|
||||
exports[`Store should display Suspense nodes properly in various states: resolved 1`] = `
|
||||
[root]
|
||||
▾ <Wrapper>
|
||||
<Component key="Outside">
|
||||
▾ <Suspense>
|
||||
<Component key="Inside">
|
||||
`;
|
||||
|
||||
exports[`Store should filter DOM nodes from the store tree: mount 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child>
|
||||
▾ <Parent>
|
||||
<Child>
|
||||
`;
|
||||
|
||||
exports[`Store should support mount and update operations for multiple roots: mount 1`] = `
|
||||
[root]
|
||||
▾ <Parent key="A">
|
||||
|
||||
@@ -71,4 +71,60 @@ describe('Store', () => {
|
||||
act(() => ReactDOM.unmountComponentAtNode(containerA));
|
||||
expect(store).toMatchSnapshot('unmount A');
|
||||
});
|
||||
|
||||
it('should filter DOM nodes from the store tree', () => {
|
||||
const Grandparent = () => (
|
||||
<div>
|
||||
<div>
|
||||
<Parent />
|
||||
</div>
|
||||
<Parent />
|
||||
</div>
|
||||
);
|
||||
const Parent = () => (
|
||||
<div>
|
||||
<Child />
|
||||
</div>
|
||||
);
|
||||
const Child = () => <div>Hi!</div>;
|
||||
|
||||
act(() =>
|
||||
ReactDOM.render(<Grandparent count={4} />, document.createElement('div'))
|
||||
);
|
||||
expect(store).toMatchSnapshot('mount');
|
||||
});
|
||||
|
||||
// TODO We should write more complex Suspense tests than just this
|
||||
it('should display Suspense nodes properly in various states', async done => {
|
||||
const Loading = () => <div>Loading...</div>;
|
||||
const SuspendingComponent = () => {
|
||||
throw new Promise(() => {});
|
||||
};
|
||||
const Component = () => {
|
||||
return <div>Hello</div>;
|
||||
};
|
||||
const Wrapper = ({ shouldSuspense }) => (
|
||||
<React.Fragment>
|
||||
<Component key="Outside" />
|
||||
<React.Suspense fallback={<Loading />}>
|
||||
{shouldSuspense ? (
|
||||
<SuspendingComponent />
|
||||
) : (
|
||||
<Component key="Inside" />
|
||||
)}
|
||||
</React.Suspense>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
const container = document.createElement('div');
|
||||
act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
|
||||
expect(store).toMatchSnapshot('loading');
|
||||
|
||||
act(async () => {
|
||||
ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
|
||||
});
|
||||
expect(store).toMatchSnapshot('resolved');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user