Fiber test renderer #8628

iamdustan · 2016-12-22T18:15:47Z

This is the start of reimplementing ReactTestRenderer on Fiber. Current tests status:

A good chunk of those tests have to do with refs and the ability to provide a createNodeMock function. I believe that ReactFiberReconciler will need to be updated with a getPublicInstance method to handle this.

Ignore all changes in ReactTestRenderer-test.js. The first is to import the fiber renderer instead of stack (actually, is there a better way to do this? should I copy the ReactTestRenderer-test for ReactTestFiberRenderer?), the rest are testing/skip/etc and will be backed out when done.

cc @spicyj

aweary · 2016-12-22T18:23:02Z

should I copy the ReactTestRenderer-test for ReactTestFiberRenderer?

👍 I think we'll want to keep the tests for the stack implementation of ReactTestRenderer for now

gaearon · 2016-12-22T18:31:57Z

src/renderers/testing/fiber/ReactTestFiberComponent.js

+
+var instanceCounter = 0;
+
+var ReactTestFiberComponent = {


Note: the separation between ReactDOMFiber and ReactDOMFiberComponent is just an artifact of how it was forked from ReactDOMComponent and that we still want to keep them in sync when possible. So feel free to abandon that convention (e.g. see ReactNoop.js)

sophiebits · 2016-12-22T20:37:11Z

should I copy the ReactTestRenderer-test for ReactTestFiberRenderer?

It would be fine to branch on renderer in the test file like the ReactART tests do.

iamdustan · 2016-12-23T13:56:18Z

Thanks for the feedback thus far.

Regarding refs I think I can reuse the Renderer.findHostInstance that already exists, though I don’t think I understand the value it is returning. For example:

    class Component extends React.Component {
      render() {
        return (
          <div className="purple">
            <div />
            <Child />
          </div>
        );
      }
    }

    class Child extends React.Component {
      render() {
        return (
          <div className="green" />
        );
      }
    }
    
    ReactTestRenderer.create(<Component />);
    const hostInstance = TestRenderer.findHostInstance(root);
    /* hostInstance ==>
{ type: 'div',
      children:
       [ { '$$typeof': Symbol(react.element),
           type: 'div',
           key: null,
           ref: null,
           props: {},
           _owner: [Object],
           _store: {} },
         { '$$typeof': Symbol(react.element),
           type: [Function: Child],
           key: null,
           ref: null,
           props: {},
           _owner: [Object],
           _store: {} },
         { type: 'div', children: null, props: {} },
         { type: 'div', children: null, props: [Object] } ],
      props: { className: 'purple' } }
*/

Is that expected? Why?

iamdustan · 2016-12-23T14:02:56Z

Second issue is if I try to call findHostInstance on the (currently passed) Fiber to a ref callback I always get it as in an unmounted state.

    class Component extends React.Component {
      render() {
        return (
          <div className="purple">
            <div />
            {/* this callback ref will throw */}
            <Child ref={fiber => console.log(ReactTestRenderer.findHostInstance(fiber)} />
          </div>
        );
      }
    }

    class Child extends React.Component {
      render() {
        return (
          <div className="green" />
        );
      }
    }
    ReactTestRenderer.create(<Component />);

// ref calback throws:
// Invariant Violation: Unable to find node on an unmounted component.

I would expect that to be mounted by the time the ref callback is called...

iamdustan · 2016-12-23T20:02:34Z

Actually, ignore everything I’ve said. I think I see a path forward.

iamdustan · 2016-12-24T04:05:28Z

Woohoo! Only 2 failing tests now!

I have ReactTestRenderer-test branching on the ReactDOMFeatureFlags useFiber switch now.

To support the createNodeMock function I needed to add a method to ReactFiberHostContext to support support hijacking the attachRef call in ReactFiberCommitWork. I’m a bit iffy about adding that since it seems intentional in the renderer API that that instances a renderer creates are exactly what the user gets in a ref.

With the two failing tests, I am curious if these are failing because the feature is incomplete or because behavior has changed subtly.

warns correctly for refs on SFCs

Is this warning still to be implemented? If yes I would suspect it to “just work” here without any additional effort.

supports updates when using refs

The ref callback is not being called yet on unmount. This is another situation where I would expect this to just work. Is this not yet implemented or do I need to track down a bug in this renderer?

supports error boundaries

The order of ilfecycles is different here. Based on watching the error boundary work between @acdlite and @gaearon I suspect that this may be expected.

Before

        'Boundary render',
        'Angry render',
        'Boundary render',
        'Boundary componentDidMount',

After

        'Boundary render',
        'Angry render',
        'Boundary componentDidMount',
        'Boundary render',

iamdustan · 2016-12-24T04:15:31Z

Just checked master. It looks like warns correctly for refs on SFCs is not implemented yet. That answers one of my questions.

gaearon · 2016-12-24T13:11:32Z

@iamdustan Want to help with implementing that warning in master as a separate PR?

gaearon · 2016-12-24T13:28:11Z

src/renderers/shared/fiber/ReactFiberCommitWork.js

@@ -86,7 +86,11 @@ module.exports = function<T, P, I, TI, C, CX>(
  function attachRef(current : ?Fiber, finishedWork : Fiber, instance : any) {
    const ref = finishedWork.ref;
    if (ref && (!current || current.ref !== ref)) {
-      ref(instance);
+      if (typeof config.getPublicInstance === 'function') {


Please destructure this from config earlier. We don't want to read that value every time. I think we could also make this required to keep contract strict.

gaearon · 2016-12-24T13:46:24Z

src/renderers/testing/ReactTestRendererFiber.js

+    parentHostContext : HostContext,
+    type : string,
+  ) : HostContext {
+    return {};


Please return the same object (emptyObject like in ReactNoop) so it doesn't push stack unnecessarily.

gaearon · 2017-01-09T23:12:37Z

Can you please update this now that the SFC warning is in?

iamdustan · 2017-01-10T03:43:13Z

The only failing test remaining is that it supports updates when using refs. I just copied that test to refs-test locally to see if the behavior already works in ReactDOMFiber with a slight change to account for null being passed on unmount (rather than the same node).

The test expects the ref to be called with ['div', 'div', 'span'] (the second div being on unmount), whilst the current behavior is to only be called with ['div', 'span'].

My biggest concern is that being called twice wasn’t necessarily an intentional decision before, but the test was added to assert the behavior and not regress accidentally. I’m not certain how much effort should be put into maintaining this because I think it would require changing ReactFiberCommitWorks detachRefIfNeeded to call the createNodeMock method in some capacity.

@spicyj what thoughts or advise do you have since you wrote the original implementation?

gaearon · 2017-01-10T13:04:51Z

src/renderers/testing/ReactTestRendererFiber.js

+    parentInstance.removeChild(child);
+  },
+
+  scheduleAnimationCallback: window.requestAnimationFrame,


I think this will throw in non-jsdom environment. Can you make it setTimeout? It seems like it wouldn't be used anyway, but at least we shouldn't throw.

gaearon · 2017-01-10T13:05:02Z

src/renderers/testing/ReactTestRendererFiber.js

+    rootContainerInstance : Container,
+  ) : boolean {
+    // console.log('finalizeInitialChildren');
+    // setInitialProperties(testElement, type, props, rootContainerInstance);


Please clean up the comments.

gaearon · 2017-01-10T13:05:31Z

src/renderers/testing/ReactTestRendererFiber.js

+        if (typeof child.toJSON === 'function') {
+          childrenJSON.push(child.toJSON());
+        } else if (typeof child.text !== 'undefined') {
+          childrenJSON.push();


Are pushing undefined? Why?

gaearon · 2017-01-10T13:06:02Z

src/renderers/testing/ReactTestRendererFiber.js

+  }
+
+  toJSON() {
+    // eslint-disable ignore the children


What are we ignoring specifically? Generally I'd like to avoid adding eslint ignores.

gaearon · 2017-01-10T13:06:10Z

src/renderers/testing/ReactTestRendererFiber.js

+  }
+
+  update(type, props) {
+    // console.log('update', type, props, this.children);


gaearon · 2017-01-10T13:10:04Z

src/renderers/testing/ReactTestRendererFiber.js

+      text : text,
+      id: instanceCounter++,
+      rootContainerInstance,
+      toJSON: () => isNaN(+inst.text) ? inst.text : +inst.text,


I'm not sure this is right. For example even "2" would become 2. Maybe this is unobservable implementation detail and we should just always use strings? Since that's what they get coerced to anyway.

good point. this was to make one of the tests pass, but I think to be correct I need to capture the type when creating the TextInstance and only coerce back to a number if it came in as a number.

I don't think you'd actually get a number though in createTextInstance? As far as I can see it's already coerced by Fiber code by then. I think it actually makes more sense than exposing this to the renderer, and I'm fine with divergent behavior here (always treating text as strings).

gaearon · 2017-01-10T13:11:50Z

src/renderers/testing/__tests__/ReactTestRenderer-test.js

@@ -317,6 +343,7 @@ describe('ReactTestRenderer', () => {
    ]);
  });

+  // this is only passing in Fiber because refs aren't actually working


Is this comment outdated? It’s not telling me much: are refs broken in Fiber? Are they broken specifically for test renderer? What is our plan to fix them? Is this within the scope of this PR?

outdated comment.

gaearon · 2017-01-10T13:13:08Z

src/renderers/testing/ReactTestRendererFiber.js

+  createNodeMock: Function;
+
+  constructor(rootID, createNodeMock) {
+    this.rootID = rootID;


I don't see rootID being used anywhere. Is it needed?

gaearon · 2017-01-10T13:13:59Z

src/renderers/testing/ReactTestRendererFiber.js

+    }
+    var container = new TestContainer('<default>', createNodeMock);
+    var root = TestRenderer.createContainer(container);
+    if (root) {


When is it null?

I don’t think ever, but flow was complaining that TestRenderer.createContainer may return null

You'd need to see why other renderers didn't need this. It probably inferred that OpaqueNode type can be null, maybe from some other method definition.

gaearon · 2017-01-10T13:16:47Z

src/renderers/testing/ReactTestRendererFiber.js

+  },
+
+  /* eslint-disable camelcase */
+  unstable_batchedUpdates() {


Can you just omit it? I don't think we want to expose it here.

Oh yeah, forgot about this one. The stack-based ReactTestRenderer exposes this currently..

Exposing but throwing isn't much better. :-)
Let's either make it work or remove it.

😇

...adding this to the PR checklist.

gaearon · 2017-01-10T13:43:47Z

src/renderers/shared/shared/__tests__/refs-test.js

+    }
+    ReactDOM.render(<Foo useDiv={true} />, container);
+    ReactDOM.render(<Foo useDiv={false} />, container);
+    expect(log).toEqual(['div', null, 'span']);


Ideally also unmount at the end and check we get another null?

oh whoops, didn’t mean to actually commit this. This was testing the behavior difference for refs between the test-renderer and DOM renderer re #8628 (comment)

gaearon · 2017-01-10T13:54:13Z

I think the existing test for updates might be checking accidental implementation details.

It's not testing refs themselves, it's testing calls of createNodeMock.
It was added by @aweary in e43aaab, not by @spicyj.

In particular, I don't see why it calls createNodeMock for div twice. It might just be a bug/inefficiency in the Stack version. Why would you need to mock a node for something you're unmounting?

aweary · 2017-01-10T15:01:00Z

Right now createNodeMock is always called when getPublicInstance is called, and when unmounting ReactOwner.removeComponentAsRefFrom calls it to see if the cached ref is equal to the current public instance.

We can try caching the mock node on the instance and only calling createNodeMock when the instance is being mounted/updated.

iamdustan · 2017-01-10T15:12:05Z

thanks @gaearon and @aweary. I added the caching and changed the test case accordingly in 087f1f6. All tests now pass.

Only remaining task is the PI public instance type parameter...

iamdustan · 2017-01-10T15:28:33Z

src/renderers/shared/fiber/ReactFiberCommitWork.js

@@ -463,7 +463,7 @@ module.exports = function<T, P, I, TI, C, CX, CI>(
    }
    const ref = finishedWork.ref;
    if (ref) {
-      const instance = getPublicInstance(finishedWork.stateNode);
+      const instance = (getPublicInstance(finishedWork.stateNode) : any);


the flow type for instance on master is any. Whilst adding the PI parameter does end up saying instance is PI, that fails flow due to ref expecting:

ref: null | (((handle : ?Object) => void) & { _stringRef: ?string }),

I suspect this could be improved, but for time constraints at the moment I simply dropped it back to equal the current inference.

gaearon · 2017-01-10T15:59:38Z

src/renderers/testing/stack/ReactTestRendererStack.js


  constructor(element: ReactElement) {
    this._currentElement = element;
    this._renderedChildren = null;
    this._topLevelWrapper = null;
    this._hostContainerInfo = null;
+    this._nodeMock = UNSET;


Could we just assign it here instead? We already know the element.

oh, would this need to be invalidated on receiveComponent?

Hmm, that's trickier. Probably not since nodes are supposed to be kept intact. I'm actually not sure the API is right now, maybe we should've just passed the type instead of the element. But what's done is done?

welp, I’ve updated it to on mountComponent because that is the earliest point we can do so (that is when hostContainerInfo is passed in)

gaearon · 2017-01-10T16:02:22Z

Ugh, GH collapsed my comment. Here it is: #8628 (comment).

gaearon · 2017-01-10T18:31:16Z

This is currently breaking react-test-renderer built package:

(No, we don't have automated tests for them.)

This is because ReactDOMFeatureFlags is in dom folder so doesn't become part of the build.

iamdustan · 2017-01-10T18:39:24Z

First two thoughts on how to fix this are:

add ReactDOMFeatureFlags to the src array of reactTestRenderer in the gulpfile
Create a react-test-renderer/fiber.js file for output and do some finagling to continue using ReactDOMFeatureFlags.useFiber for repo unit tests, but not break the build

gaearon · 2017-01-11T16:58:52Z

src/renderers/testing/ReactTestRendererFiber.js

@@ -28,7 +32,8 @@ type ReactTestRendererJSON = {|

 type Container = {|
  children: Array<Instance | TextInstance>,
-  createNodeMock: Function
+  createNodeMock: Function,
+  $$typeof: typeof CONTAINER_TYPE,


I think this could be just $$typeof: CONTAINER_TYPE?
Same below.

without the typeof I get the following:

src/renderers/testing/ReactTestRendererFiber.js:36 36: $$typeof: CONTAINER_TYPE, ^^^^^^^^^^^^^^ string. Ineligible value used in/as type annotation (did you forget 'typeof'?) 36: $$typeof: CONTAINER_TYPE, ^^^^^^^^^^^^^^ CONTAINER_TYPE

gaearon · 2017-01-11T17:00:59Z

This looks good to me. Thanks for sticking with it. 😄
I’ll merge later today.

gaearon · 2017-01-11T19:10:28Z

src/renderers/testing/ReactTestRendererFiber.js

+  ) : void {
+    const index = parentInstance.children.indexOf(child);
+    if (index !== -1) {
+      this.children.splice(index, 1);


What is this.children?

a bug. should be parentInstance.children.

gaearon · 2017-01-11T19:19:41Z

Congratulations. 😄

sebmarkbage · 2017-01-11T19:32:28Z

https://github.com/facebook/react/blob/master/src/renderers/shared/fiber/ReactFiberReconciler.js#L173 Should be updated to return PI.

sebmarkbage · 2017-01-11T19:33:54Z

src/renderers/shared/fiber/ReactFiberCommitWork.js

@@ -462,7 +463,7 @@ module.exports = function<T, P, I, TI, C, CX>(
    }
    const ref = finishedWork.ref;
    if (ref) {
-      const instance = finishedWork.stateNode;
+      const instance = getPublicInstance(finishedWork.stateNode);


This is not type safe for the case finishedWork.tag === ClassComponent.

how so? what can I do to rectify that?

finishedWork.stateNode on a a class component will be the instance of the class. That doesn't match the generic types I | TI. I think it only accidentally works on runtime now because you assume they won't have a .tag field with the string INSTANCE so they fallback.

You can make separate branches by switching on finishedWork.tag and only use getPublicInstance on the branch on HostComponent.

sebmarkbage · 2017-01-11T19:42:23Z

src/renderers/testing/ReactTestRendererFiber.js

+
+  useSyncScheduling: true,
+
+  getPublicInstance(inst) {


Hm. It's strange that you're allowed to avoid the type annotation here. It probably leads to some overly optimistic analysis by Flow. We should add a type annotation here. It's important to do in the renderers since otherwise the generic arguments can be inferred to be very weak.

Related, how can I type the createNodeMock function so PI is properly inferred?

facebook#8628 (comment)

See: facebook/react#8628 (comment) These are used for the internal context stack. See https://github.com/facebook/react/blob/2da35fcae888752948454dd04e9573cc7bdba8f5/src/renderers/shared/fiber/ReactFiberHostContext.js#L84-L102

facebook#8628 (comment)

@sebmarkbage

* Fix ReactFiberReconciler annotation to include `PI` #8628 (comment) * Make getPublicInstance type safe * attempting to trigger the issue @sebmarkbage described #8751 (comment) * Unify renderer-specific getPublicInstance with getRootInstance * Switch on fiber type HostComponent for getPublicRootInstance * Fix test that was too dynamic (and failing) * Use PI in reconciler public API * Prettier

* ReactTestRenderer move current impl to stack dir * ReactTestRenderer on fiber: commence! * ReactTestRenderer: most non-ref/non-public-instance tests are passing * Move ReactTestFiberComponent functions from Renderer to Component file * test renderer: get rid of private root containers and root Maps * TestRenderer: switch impl based on ReactDOMFeatureFlag.useFiber * ReactTestRenderer: inline component creation * ReactTestRenderer: return to pristine original glory (+ Fiber for error order difference) * TestRendererFiber: use a simple class as TestComponentInstances * Add `getPublicInstance` to support TestRenderer `createNodeMock` * Rename files to end. Update for `mountContainer->createContainer` change * test renderer return same object to prevent unnecessary context pushing/popping * Fiber HostConfig add getPublicInstance. This should be the identity fn everywhere except the test renderer * appease flow * Initial cleanup from sleepy work * unstable_batchedUpdates * Stack test renderer: cache nodeMock to not call on unmount * add public instance type parameter to the reconciler * test renderer: set _nodeMock when mounted * More cleanup * Add test cases for root fragments and (maybe?) root text nodes * Fix the npm package build Explicitly require the Stack version by default. Add a separate entry point for Fiber. We don't add fiber.js to the package yet since it's considered internal until React 16. * Relax the ref type from Object to mixed This seems like the most straightforward way to support getPublicInstance for test renderer. * Remove accidental newline * test renderer: unify TestComponent and TestContainer, handle root updates * Remove string/number serialization attempts since Fiber ensures all textInstances are strings * Return full fragments in toJSON * Test Renderer remove TestComponent instances for simple objects * Update babylon for exact object type syntax * Use $$typeof because clarity > punching ducks. * Minor Flow annotation tweaks * Tweak style, types, and naming * Fix typo

facebook-github-bot added GH Review: review-needed CLA Signed labels Dec 22, 2016

gaearon reviewed Dec 22, 2016

View reviewed changes

iamdustan force-pushed the fiber-test-renderer branch from 705386f to d143839 Compare December 24, 2016 03:48

gaearon reviewed Dec 24, 2016

View reviewed changes

iamdustan force-pushed the fiber-test-renderer branch from 11f3b34 to 6bc4167 Compare December 27, 2016 17:19

sebmarkbage mentioned this pull request Jan 3, 2017

[Fiber] Umbrella for remaining features / bugs #7925

Closed

iamdustan force-pushed the fiber-test-renderer branch 2 times, most recently from 595a489 to a63c10a Compare January 10, 2017 03:19

gaearon reviewed Jan 10, 2017

View reviewed changes

iamdustan changed the title ~~WIP: Fiber test renderer~~ Fiber test renderer Jan 10, 2017

iamdustan commented Jan 10, 2017

View reviewed changes

gaearon reviewed Jan 10, 2017

View reviewed changes

gaearon reviewed Jan 11, 2017

View reviewed changes

iamdustan force-pushed the fiber-test-renderer branch from 799e901 to 464b273 Compare January 11, 2017 17:06

iamdustan and others added 2 commits January 11, 2017 12:07

Use $$typeof because clarity > punching ducks.

464b273

Minor Flow annotation tweaks

32991b8

gaearon force-pushed the fiber-test-renderer branch from bad531c to 32991b8 Compare January 11, 2017 17:47

Tweak style, types, and naming

8410b0e

gaearon reviewed Jan 11, 2017

View reviewed changes

Fix typo

9a9276b

gaearon added semver-exempt and removed GH Review: review-needed labels Jan 11, 2017

gaearon added this to the 15-lopri milestone Jan 11, 2017

gaearon approved these changes Jan 11, 2017

View reviewed changes

gaearon merged commit 2da35fc into facebook:master Jan 11, 2017

iamdustan deleted the fiber-test-renderer branch January 11, 2017 19:29

sebmarkbage reviewed Jan 11, 2017

View reviewed changes

iamdustan added a commit to iamdustan/react that referenced this pull request Jan 11, 2017

Fix ReactFiberReconciler annotation to include PI

9d42ea0

facebook#8628 (comment)

iamdustan mentioned this pull request Jan 11, 2017

Fix ReactFiberReconciler annotation to include PI #8751

Merged

iamdustan added a commit to iamdustan/react that referenced this pull request Jan 11, 2017

Fix ReactFiberReconciler annotation to include PI

2b89f90

facebook#8628 (comment)

iamdustan mentioned this pull request Jan 12, 2017

Return same emptyObject manaflair/mylittledom#1

Merged

iamdustan added a commit to iamdustan/react that referenced this pull request Jan 17, 2017

Fix ReactFiberReconciler annotation to include PI

39a9cc7

facebook#8628 (comment)

iamdustan added a commit to iamdustan/react that referenced this pull request Jan 17, 2017

Fix ReactFiberReconciler annotation to include PI

48a92e0

facebook#8628 (comment)

iamdustan added a commit to iamdustan/react that referenced this pull request Jan 21, 2017

Fix ReactFiberReconciler annotation to include PI

c4bd356

facebook#8628 (comment)

iamdustan mentioned this pull request Feb 13, 2017

Add createComponentMock option to test renderer #8982

Closed

Fiber test renderer #8628

Fiber test renderer #8628

Conversation

iamdustan commented Dec 22, 2016 • edited Loading

aweary commented Dec 22, 2016 • edited Loading

Choose a reason for hiding this comment

sophiebits commented Dec 22, 2016

iamdustan commented Dec 23, 2016

iamdustan commented Dec 23, 2016

iamdustan commented Dec 23, 2016

iamdustan commented Dec 24, 2016

iamdustan commented Dec 24, 2016

gaearon commented Dec 24, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jan 9, 2017

iamdustan commented Jan 10, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jan 10, 2017 • edited Loading

aweary commented Jan 10, 2017 • edited Loading

iamdustan commented Jan 10, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jan 10, 2017

gaearon commented Jan 10, 2017

iamdustan commented Jan 10, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jan 11, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gaearon commented Jan 11, 2017

sebmarkbage commented Jan 11, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

iamdustan commented Dec 22, 2016 •

edited

Loading

aweary commented Dec 22, 2016 •

edited

Loading

gaearon commented Jan 10, 2017 •

edited

Loading

aweary commented Jan 10, 2017 •

edited

Loading

iamdustan commented Jan 10, 2017 •

edited

Loading