Added a simple Suspense test
Brian Vaughn committed
Apr 11, 2019 at 11:22 UTC
16a7119bf296028a1e68ab57286d9ee2ee64823e
2 files changed
+81
src/__tests__/__snapshots__/store-test.js.snap
+25
@@ -1,5 +1,30 @@
1
// Jest Snapshot v1, https://goo.gl/fbAQLP
2
3
+exports[`Store should display Suspense nodes properly in various states: loading 1`] = `
4
+[root]
5
+ ▾ <Wrapper>
6
+ <Component key="Outside">
7
+ ▾ <Suspense>
8
+ <Loading>
9
+`;
10
+
11
+exports[`Store should display Suspense nodes properly in various states: resolved 1`] = `
12
+[root]
13
+ ▾ <Wrapper>
14
+ <Component key="Outside">
15
+ ▾ <Suspense>
16
+ <Component key="Inside">
17
+`;
18
+
19
+exports[`Store should filter DOM nodes from the store tree: mount 1`] = `
20
+[root]
21
+ ▾ <Grandparent>
22
+ ▾ <Parent>
23
+ <Child>
24
+ ▾ <Parent>
25
+ <Child>
26
+`;
27
+
28
exports[`Store should support mount and update operations for multiple roots: mount 1`] = `
29
[root]
30
▾ <Parent key="A">
src/__tests__/store-test.js
+56
@@ -71,4 +71,60 @@ describe('Store', () => {
71
act(() => ReactDOM.unmountComponentAtNode(containerA));
72
expect(store).toMatchSnapshot('unmount A');
73
});
74
+
75
+ it('should filter DOM nodes from the store tree', () => {
76
+ const Grandparent = () => (
77
+ <div>
78
+ <div>
79
+ <Parent />
80
+ </div>
81
+ <Parent />
82
+ </div>
83
+ );
84
+ const Parent = () => (
85
+ <div>
86
+ <Child />
87
+ </div>
88
+ );
89
+ const Child = () => <div>Hi!</div>;
90
+
91
+ act(() =>
92
+ ReactDOM.render(<Grandparent count={4} />, document.createElement('div'))
93
+ );
94
+ expect(store).toMatchSnapshot('mount');
95
+ });
96
+
97
+ // TODO We should write more complex Suspense tests than just this
98
+ it('should display Suspense nodes properly in various states', async done => {
99
+ const Loading = () => <div>Loading...</div>;
100
+ const SuspendingComponent = () => {
101
+ throw new Promise(() => {});
102
+ };
103
+ const Component = () => {
104
+ return <div>Hello</div>;
105
+ };
106
+ const Wrapper = ({ shouldSuspense }) => (
107
+ <React.Fragment>
108
+ <Component key="Outside" />
109
+ <React.Suspense fallback={<Loading />}>
110
+ {shouldSuspense ? (
111
+ <SuspendingComponent />
112
+ ) : (
113
+ <Component key="Inside" />
114
+ )}
115
+ </React.Suspense>
116
+ </React.Fragment>
117
+ );
118
+
119
+ const container = document.createElement('div');
120
+ act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
121
+ expect(store).toMatchSnapshot('loading');
122
+
123
+ act(async () => {
124
+ ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
125
+ });
126
+ expect(store).toMatchSnapshot('resolved');
127
+
128
+ done();
129
+ });
130
});