Add more test coverage for nested memo() (#14311)
Dan Abramov committed
Nov 22, 2018 at 19:30 UTC
14be29b2b97f2be6c82955acc0455fbac22ec403
1 file changed
+53
packages/react-reconciler/src/__tests__/ReactMemo-test.internal.js
+53
@@ -253,6 +253,59 @@ describe('memo', () => {
253
expect(ReactNoop.getChildren()).toEqual([span('1!')]);
254
});
255
256
+ it('supports defaultProps defined on the memo() return value', async () => {
257
+ function Counter({a, b, c, d, e}) {
258
+ return <Text text={a + b + c + d + e} />;
259
+ }
260
+ Counter.defaultProps = {
261
+ a: 1,
262
+ };
263
+ // Note! We intentionally use React.memo() rather than the injected memo().
264
+ // This tests a synchronous chain of React.memo() without lazy() in the middle.
265
+ Counter = React.memo(Counter);
266
+ Counter.defaultProps = {
267
+ b: 2,
268
+ };
269
+ Counter = React.memo(Counter);
270
+ Counter = React.memo(Counter); // Layer without defaultProps
271
+ Counter.defaultProps = {
272
+ c: 3,
273
+ };
274
+ Counter = React.memo(Counter);
275
+ Counter.defaultProps = {
276
+ d: 4,
277
+ };
278
+ // The final layer uses memo() from test fixture (which might be lazy).
279
+ Counter = memo(Counter);
280
+ ReactNoop.render(
281
+ <Suspense fallback={<Text text="Loading..." />}>
282
+ <Counter e={5} />
283
+ </Suspense>,
284
+ );
285
+ expect(ReactNoop.flush()).toEqual(['Loading...']);
286
+ await Promise.resolve();
287
+ expect(ReactNoop.flush()).toEqual([15]);
288
+ expect(ReactNoop.getChildren()).toEqual([span(15)]);
289
+
290
+ // Should bail out because props have not changed
291
+ ReactNoop.render(
292
+ <Suspense>
293
+ <Counter e={5} />
294
+ </Suspense>,
295
+ );
296
+ expect(ReactNoop.flush()).toEqual([]);
297
+ expect(ReactNoop.getChildren()).toEqual([span(15)]);
298
+
299
+ // Should update because count prop changed
300
+ ReactNoop.render(
301
+ <Suspense>
302
+ <Counter e={10} />
303
+ </Suspense>,
304
+ );
305
+ expect(ReactNoop.flush()).toEqual([20]);
306
+ expect(ReactNoop.getChildren()).toEqual([span(20)]);
307
+ });
308
+
309
it('warns if first argument is undefined', () => {
310
expect(() => memo()).toWarnDev(
311
'memo: The first argument must be a component. Instead ' +