Added a simple Suspense test

This commit is contained in:
Brian Vaughn
2019-04-12 08:55:29 -07:00
parent 4ad85b26c0
commit 16a7119bf2
2 changed files with 81 additions and 0 deletions
@@ -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">
+56
View File
@@ -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();
});
});