Add test coverage for readContext() on the server (#14649)
* Rename context variables I just spent half an hour debugging why readContext(PurpleContext) doesn't work. * Add test coverage for readContext() on the server
Dan Abramov committed
Jan 21, 2019 at 19:55 UTC
fe2ecd276e9b9e57a49ddf2d86ff01677b69b493
1 file changed
+57
-14
packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
+57
-14
@@ -37,9 +37,9 @@ describe('ReactDOMServerIntegration', () => {
37
});
38
39
describe('context', function() {
40
- let PurpleContext, RedContext, Consumer;
40
+ let Context, PurpleContextProvider, RedContextProvider, Consumer;
41
beforeEach(() => {
42
- let Context = React.createContext('none');
42
+ Context = React.createContext('none');
43
44
class Parent extends React.Component {
45
render() {
@@ -51,8 +51,12 @@ describe('ReactDOMServerIntegration', () => {
51
}
52
}
53
Consumer = Context.Consumer;
54
- PurpleContext = props => <Parent text="purple">{props.children}</Parent>;
55
- RedContext = props => <Parent text="red">{props.children}</Parent>;
54
+ PurpleContextProvider = props => (
55
+ <Parent text="purple">{props.children}</Parent>
56
+ );
57
+ RedContextProvider = props => (
58
+ <Parent text="red">{props.children}</Parent>
59
+ );
60
});
61
62
itRenders('class child with context', async render => {
@@ -67,9 +71,9 @@ describe('ReactDOMServerIntegration', () => {
71
}
72
73
const e = await render(
70
- <PurpleContext>
74
+ <PurpleContextProvider>
75
<ClassChildWithContext />
72
- </PurpleContext>,
76
+ </PurpleContextProvider>,
77
);
78
expect(e.textContent).toBe('purple');
79
});
@@ -80,9 +84,9 @@ describe('ReactDOMServerIntegration', () => {
84
}
85
86
const e = await render(
83
- <PurpleContext>
87
+ <PurpleContextProvider>
88
<FunctionChildWithContext />
85
- </PurpleContext>,
89
+ </PurpleContextProvider>,
90
);
91
expect(e.textContent).toBe('purple');
92
});
@@ -127,9 +131,9 @@ describe('ReactDOMServerIntegration', () => {
131
const Child = props => <Grandchild />;
132
133
const e = await render(
130
- <PurpleContext>
134
+ <PurpleContextProvider>
135
<Child />
132
- </PurpleContext>,
136
+ </PurpleContextProvider>,
137
);
138
expect(e.textContent).toBe('purple');
139
});
@@ -144,15 +148,54 @@ describe('ReactDOMServerIntegration', () => {
148
};
149
150
const e = await render(
147
- <PurpleContext>
148
- <RedContext>
151
+ <PurpleContextProvider>
152
+ <RedContextProvider>
153
<Grandchild />
150
- </RedContext>
151
- </PurpleContext>,
154
+ </RedContextProvider>
155
+ </PurpleContextProvider>,
156
);
157
expect(e.textContent).toBe('red');
158
});
159
160
+ itRenders('readContext() in different components', async render => {
161
+ function readContext(Ctx, observedBits) {
162
+ const dispatcher =
163
+ React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
164
+ .ReactCurrentDispatcher.current;
165
+ return dispatcher.readContext(Ctx, observedBits);
166
+ }
167
+
168
+ class Cls extends React.Component {
169
+ render() {
170
+ return readContext(Context);
171
+ }
172
+ }
173
+ function Fn() {
174
+ return readContext(Context);
175
+ }
176
+ const Memo = React.memo(() => {
177
+ return readContext(Context);
178
+ });
179
+ const FwdRef = React.forwardRef((props, ref) => {
180
+ return readContext(Context);
181
+ });
182
+
183
+ const e = await render(
184
+ <PurpleContextProvider>
185
+ <RedContextProvider>
186
+ <span>
187
+ <Fn />
188
+ <Cls />
189
+ <Memo />
190
+ <FwdRef />
191
+ <Consumer>{() => readContext(Context)}</Consumer>
192
+ </span>
193
+ </RedContextProvider>
194
+ </PurpleContextProvider>,
195
+ );
196
+ expect(e.textContent).toBe('redredredredred');
197
+ });
198
+
199
itRenders('multiple contexts', async render => {
200
const Theme = React.createContext('dark');
201
const Language = React.createContext('french');