-
Notifications
You must be signed in to change notification settings - Fork 45.6k
/
ReactFlight-test.js
100 lines (89 loc) · 2.34 KB
/
ReactFlight-test.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
/**
* 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
* @jest-environment node
*/
'use strict';
const ReactFeatureFlags = require('shared/ReactFeatureFlags');
let act;
let React;
let ReactNoop;
let ReactNoopFlightServer;
let ReactNoopFlightClient;
describe('ReactFlight', () => {
beforeEach(() => {
jest.resetModules();
React = require('react');
ReactNoop = require('react-noop-renderer');
ReactNoopFlightServer = require('react-noop-renderer/flight-server');
ReactNoopFlightClient = require('react-noop-renderer/flight-client');
act = ReactNoop.act;
});
function block(query, render) {
return function(...args) {
let curriedQuery = () => {
return query(...args);
};
return [Symbol.for('react.server.block'), render, curriedQuery];
};
}
it('can render a server component', () => {
function Bar({text}) {
return text.toUpperCase();
}
function Foo() {
return {
bar: (
<div>
<Bar text="a" />, <Bar text="b" />
</div>
),
};
}
let transport = ReactNoopFlightServer.render({
foo: <Foo />,
});
let root = ReactNoopFlightClient.read(transport);
let model = root.model;
expect(model).toEqual({
foo: {
bar: (
<div>
{'A'}
{', '}
{'B'}
</div>
),
},
});
});
if (ReactFeatureFlags.enableBlocksAPI) {
it('can transfer a Block to the client and render there', () => {
function Query(firstName, lastName) {
return {name: firstName + ' ' + lastName};
}
function User(props, data) {
return (
<span>
{props.greeting}, {data.name}
</span>
);
}
let loadUser = block(Query, User);
let model = {
User: loadUser('Seb', 'Smith'),
};
let transport = ReactNoopFlightServer.render(model);
let root = ReactNoopFlightClient.read(transport);
act(() => {
let UserClient = root.model.User;
ReactNoop.render(<UserClient greeting="Hello" />);
});
expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
});
}
});