Support React.memo in ReactShallowRenderer #14816

aweary · 2019-02-11T04:26:53Z

Adds support for React.memo in React.ShallowRenderer. Instead of using element.type directly it now checks if the element is REACT_MEMO_TYPE and uses the nested type if it is.
Validates the propTypes for the inner component

For testing I just coped ReactShallowRenderer-test and wrapped every component in React.memo to validate everything worked. I don't think we should take approach, but it made it easy to find issues 🤷‍♂️maybe we can have a single set of tests that run with and without memo?

sizebot · 2019-02-11T04:37:16Z

	Fails
🚫	node` failed.

Log

Error:  { FetchError: invalid json response body at http://react.zpao.com/builds/master/_commits/f0621fe232f31cb0fcd63992c3440ec1b4ce5813/results.json reason: Unexpected token < in JSON at position 0
    at /home/circleci/project/node_modules/node-fetch/lib/body.js:48:31
    at process._tickCallback (internal/process/next_tick.js:68:7)
  name: 'FetchError',
  message:
   'invalid json response body at http://react.zpao.com/builds/master/_commits/f0621fe232f31cb0fcd63992c3440ec1b4ce5813/results.json reason: Unexpected token < in JSON at position 0',
  type: 'invalid-json' }

Generated by 🚫 dangerJS

trueadm

There are some Flow failures that need fixing, but this looks good to me. :)

gaearon · 2019-02-11T16:18:18Z

If we support memo() and forwardRef(), their combination memo(forwardRef()) should also work. Does it?

gaearon

If we're fixing this we'd need a strategy that works with composing them

aweary · 2019-02-11T17:29:50Z

@gaearon I've added support for memo(forwardRef()) and also made sure that forwardRef(memo()) fails as expected.

What do you think of the testing strategy? Should I remove ReactShallowRendererMemo-test and just rely on the memo tests added to ReactShallowRenderer-test? Do you think it's worth running every test with and without memo?

aweary · 2019-02-11T17:42:05Z

packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js

+        'Warning: forwardRef requires a render function but received ' +
+          'a `memo` component. Instead of forwardRef(memo(...)), use ' +
+          'memo(forwardRef(...))',
+        {withoutStack: true},


This test is failing saying Expected test not to call console.error(), but I'm calling toWarnDev here so I don't think that's right?

aweary · 2019-02-11T17:43:35Z

packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js

+    const shallowRenderer = createRenderer();
+    shallowRenderer.render(<SomeComponent foo={1} />);
+    expect(areEqual).not.toHaveBeenCalled();
+    expect(shallowRenderer.getRenderOutput()).toEqual(<div>1</div>);


This test is failing here because the rendered output doesn't match. I verified that getRenderOutput is returning <div>1</div>. I guess its failing because they're not the same React elements, but we're using this same pattern elsewhere in this test suite so I don't know why its failing here.

addressed

ljharb · 2019-02-12T16:40:04Z

packages/react-test-renderer/src/ReactShallowRenderer.js

@@ -500,7 +500,8 @@ class ReactShallowRenderer {
      element.type,
    );
    invariant(
-      isForwardRef(element) || typeof element.type === 'function',
+      isForwardRef(element) ||
+        (typeof element.type === 'function' || isMemo(element.type)),


any reason not to use isValidElementType from react-is here, and asserting the type isn’t string, rather than repeating some of the logic?

Probably because isValidElementType was introduced after this version of the shallow renderer. That's a good point though, because looking at isValidElementType catches more uncommon cases that React technically supports and that fail with the shallow renderer.

For example, you can do:

const MemoFragment = React.memo(React.Fragment)

But rendering that with the shallow render will trigger this invariant. The same goes for other elements that have their own type like React.Suspense, React.ConcurrentMode, React.StrictMode, etc.

ljharb · 2019-02-12T16:41:30Z

packages/react-test-renderer/src/ReactShallowRenderer.js

@@ -545,14 +565,13 @@ class ReactShallowRenderer {
          }
        }

-        if (element.type.hasOwnProperty('contextTypes')) {
+        if (elementType.hasOwnProperty('contextTypes')) {


you may want to use Object.prototype.hasOwnProperty.call here, since it’d otherwise work fine to pass a function component with a null prototype.

This codepath is for classes so should be ok. In fact it should probably use dot access since that's what we do in the real one.

ljharb · 2019-02-12T16:42:26Z

packages/react-test-renderer/src/ReactShallowRenderer.js

+            // elementType could still be a ForwardRef if it was
+            // nested inside Memo.
+            this._rendered =
+              elementType.$$typeof === ForwardRef


should this use isForwardRef(element) (and cache the isForwardRef status in a var, since it seems to be checked multiple times)?

It's a little confusing, but that doesn't work because isForwardRef expects a React Element for the forwardRef, not the actual object returned from forwardRef itself.

const forwardRef = React.forwardRef(...); isForwardRef(forwardRef) // false isForwardRef(React.createElement(forwardRef)) // true

aweary · 2019-02-12T18:50:26Z

@gaearon @trueadm how should the shallow renderer handle rendering the element types exported by React like React.StrictMode, React.ConcurrentMode, etc.

shallowRenderer.render(<React.StrictMode>hmm</React.StrictMode>)

Currently they fail with the error:

Invariant Violation: ReactShallowRenderer render(): Shallow rendering works only
with custom components, but the provided element type was `symbol`.

I think it's correct that it fails (there's no reason to shallow render them directly) but the error about a symbol element type is confusing. Should we report the actual symbol name instead?

the provided element type was `React.StrictMode`.

Should we fail with the same error if you try to render React.memo(React.StrictMode)?

Unrelated to this task, but it looks like we also need to update jest-react or whatever utility is responsible for comparing JSX with expect because it reports these types as UNDEFINED

 Expected value to equal:
      <UNDEFINED>lkdol</UNDEFINED>
    Received:
      <UNDEFINED>lol</UNDEFINED>

ljharb · 2019-02-26T00:46:43Z

ping on this; I'm going to update enzyme's react 16 adapter so it can handle memo for SFCs, but without this fix it'll still throw for class-based components. It'd be good to close that gap sooner than later.

trueadm · 2019-03-06T15:09:07Z

I think it's correct that it fails (there's no reason to shallow render them directly) but the error about a symbol element type is confusing. Should we report the actual symbol name instead?

I think this is all we should do here. Provide a better error message so they understand that these symbols are not supported.

ReactShallowRenderer uses element.type frequently, but with React.memo elements the actual type is element.type.type. This updates ReactShallowRenderer so it uses the correct element type for Memo components and also validates the inner props for the wrapped components.

* Support React.memo in ReactShallowRenderer ReactShallowRenderer uses element.type frequently, but with React.memo elements the actual type is element.type.type. This updates ReactShallowRenderer so it uses the correct element type for Memo components and also validates the inner props for the wrapped components. * Allow Rect.memo to prevent re-renders * Support memo(forwardRef()) * Dont call memo comparison function on initial render * Fix test * Small tweaks

aweary requested review from bvaughn and gaearon February 11, 2019 04:26

facebook-github-bot added the CLA Signed label Feb 11, 2019

aweary force-pushed the shallow-renderer-memo branch from c32c54f to f88d309 Compare February 11, 2019 04:50

trueadm approved these changes Feb 11, 2019

View reviewed changes

gaearon previously requested changes Feb 11, 2019

View reviewed changes

aweary commented Feb 11, 2019

View reviewed changes

aweary requested a review from gaearon February 11, 2019 18:25

ljharb reviewed Feb 12, 2019

View reviewed changes

Brandon Dail and others added 5 commits March 15, 2019 21:33

Allow Rect.memo to prevent re-renders

f06a74e

Support memo(forwardRef())

75dcd59

Dont call memo comparison function on initial render

0dbe1fd

Fix test

2230fab

gaearon force-pushed the shallow-renderer-memo branch from dfb74db to 2230fab Compare March 15, 2019 21:51

Small tweaks

137f390

gaearon merged commit b283d75 into facebook:master Mar 15, 2019

gaearon mentioned this pull request Mar 22, 2019

React v16.8.5 #15192

Closed

This was referenced Aug 12, 2019

[Snyk] Upgrade react from 16.8.1 to 16.8.6 Niweera/nutribuddy#3

Open

[Snyk] Upgrade react-dom from 16.8.1 to 16.8.6 Niweera/nutribuddy#4

Open

[Snyk] Upgrade react from 16.8.0 to 16.8.6 william10000/jobs-by-traveltime#2

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support React.memo in ReactShallowRenderer #14816

Support React.memo in ReactShallowRenderer #14816

aweary commented Feb 11, 2019 •

edited

Loading

sizebot commented Feb 11, 2019 •

edited

Loading

trueadm left a comment •

edited

Loading

gaearon commented Feb 11, 2019

gaearon left a comment

aweary commented Feb 11, 2019

aweary Feb 11, 2019

aweary Feb 11, 2019 •

edited

Loading

ljharb Feb 12, 2019

aweary Feb 12, 2019 •

edited

Loading

ljharb Feb 12, 2019

gaearon Mar 15, 2019

ljharb Feb 12, 2019

aweary Feb 12, 2019

aweary commented Feb 12, 2019 •

edited

Loading

ljharb commented Feb 26, 2019 •

edited

Loading

trueadm commented Mar 6, 2019

Support React.memo in ReactShallowRenderer #14816

Support React.memo in ReactShallowRenderer #14816

Conversation

aweary commented Feb 11, 2019 • edited Loading

sizebot commented Feb 11, 2019 • edited Loading

Log

trueadm left a comment • edited Loading

Choose a reason for hiding this comment

gaearon commented Feb 11, 2019

gaearon left a comment

Choose a reason for hiding this comment

aweary commented Feb 11, 2019

aweary Feb 11, 2019

Choose a reason for hiding this comment

aweary Feb 11, 2019 • edited Loading

Choose a reason for hiding this comment

ljharb Feb 12, 2019

Choose a reason for hiding this comment

aweary Feb 12, 2019 • edited Loading

Choose a reason for hiding this comment

ljharb Feb 12, 2019

Choose a reason for hiding this comment

gaearon Mar 15, 2019

Choose a reason for hiding this comment

ljharb Feb 12, 2019

Choose a reason for hiding this comment

aweary Feb 12, 2019

Choose a reason for hiding this comment

aweary commented Feb 12, 2019 • edited Loading

ljharb commented Feb 26, 2019 • edited Loading

trueadm commented Mar 6, 2019

aweary commented Feb 11, 2019 •

edited

Loading

sizebot commented Feb 11, 2019 •

edited

Loading

trueadm left a comment •

edited

Loading

aweary Feb 11, 2019 •

edited

Loading

aweary Feb 12, 2019 •

edited

Loading

aweary commented Feb 12, 2019 •

edited

Loading

ljharb commented Feb 26, 2019 •

edited

Loading