-
Notifications
You must be signed in to change notification settings - Fork 45.7k
/
ReactDOMServerSuspense-test.internal.js
101 lines (84 loc) · 2.39 KB
/
ReactDOMServerSuspense-test.internal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @emails react-core
*/
'use strict';
const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
let React;
let ReactDOM;
let ReactDOMServer;
let ReactFeatureFlags;
function initModules() {
// Reset warning cache.
jest.resetModuleRegistry();
ReactFeatureFlags = require('shared/ReactFeatureFlags');
ReactFeatureFlags.enableSuspenseServerRenderer = true;
React = require('react');
ReactDOM = require('react-dom');
ReactDOMServer = require('react-dom/server');
// Make them available to the helpers.
return {
ReactDOM,
ReactDOMServer,
};
}
const {resetModules, serverRender} = ReactDOMServerIntegrationUtils(
initModules,
);
describe('ReactDOMServerSuspense', () => {
beforeEach(() => {
resetModules();
});
function Text(props) {
return <div>{props.text}</div>;
}
function AsyncText(props) {
throw new Promise(() => {});
}
it('should render the children when no promise is thrown', async () => {
const c = await serverRender(
<div>
<React.Suspense fallback={<Text text="Fallback" />}>
<Text text="Children" />
</React.Suspense>
</div>,
);
const e = c.children[0];
expect(e.tagName).toBe('DIV');
expect(e.textContent).toBe('Children');
});
it('should render the fallback when a promise thrown', async () => {
const c = await serverRender(
<div>
<React.Suspense fallback={<Text text="Fallback" />}>
<AsyncText text="Children" />
</React.Suspense>
</div>,
);
const e = c.children[0];
expect(e.tagName).toBe('DIV');
expect(e.textContent).toBe('Fallback');
});
it('should work with nested suspense components', async () => {
const c = await serverRender(
<div>
<React.Suspense fallback={<Text text="Fallback" />}>
<div>
<Text text="Children" />
<React.Suspense fallback={<Text text="Fallback" />}>
<AsyncText text="Children" />
</React.Suspense>
</div>
</React.Suspense>
</div>,
);
const e = c.children[0];
expect(e.innerHTML).toBe(
'<div>Children</div><!--$!--><div>Fallback</div><!--/$-->',
);
});
});