Implement createNodeMock for ReactTestRenderer

[aweary]

This lets users pass in an optional testOptions object as the second argument to ReactTestRenderer.create that allows for custom mocking behavior. As of now that only includes createNodeMock, which accepts the current element and should return a mock ref object.

The testOptions is stored on the component instance so it doesn't leak between instances.

cc @gaearon @spicyj

[aweary]

Not sure how this would be typed, is there a better way to type an object that looks like a DOM node?

[gaearon]

Looks fine to me.

[coveralls]

Coverage increased (+0.01%) to 87.243% when pulling d7bd655 on Aweary:mock-dom-instance into a70acb3 on facebook:master.

[aweary]

FYI this has some issues with refs rendered by nested components, still working that out

[aweary]

Hmm, I'm not sure how I can efficiently provide access to the mockConfig to children at an arbitrary depth. I can walk the render tree and attach it to each instance, but that's not very efficient.

[gaearon]

I haven't looked at the diff in detail but I think you can make it have a custom transaction (like server rendering does). Then you can read the config from the transaction since it's threaded all the way down.

An alternative is to put context on TopLevelWrapper but this is probably more hacky.

[aweary]

Yeah I tried TopLevelWrapper first, but it's not actually set on all instances. It only seems to be set on instances at the top of the render tree. I'll give the transaction approach a try.

[gaearon]

Context should propagate downwards too so it must be something else. Regardless transaction seems to be a better approach.

[aweary]

For _topLevelWrapper you can see in ReactTestMount that it's only set on the top-level _renderedComponent. So that might just be another separate issue we should address.

I'll look into the transactional approach today 👍

[gaearon]

Does _topLevelWrapper field matter? I don't think that field is important for context propagation. Context is passed down through ReactCompositeComponent and afaik this should work any number of composites down.

[aweary]

Oh, no, sorry I was just responding to

An alternative is to put context on TopLevelWrapper but this is probably more hacky.

[aweary]

One issue I see with trying to use the transaction to propagate the mock config, is that ReactTestComponent.prototype.getPublicInstance doesn't seem to have access to any transaction object.

[gaearon]

Let's pass it in there?

[gaearon]

Actually it should be easier to save mock config from transaction in mountComponent as an instance field. Then access it anytime. Would that work?

[aweary]

Let's pass it in there?

ReactRef doesn't currently have access to transaction, but I suppose it could be threaded in from ReactReconcilier.

Actually it should be easier to save mock config from transaction in mountComponent as an instance field. Then access it anytime. Would that work?

Does it make sense to use the transaction as a host for instance-specific config? To make this work we'd have to call injectReconcileTransaction every time ReactTestRenderer.create is called, since mockConfig implementation can diff between calls.

Also, Is there a guarantee that transaction passed to mountComponent will always be the transaction type that we inject in create? If we have sequential create calls it seems like we may have a potential race condition where the next transaction type is injected before the first's mountComponent method is called.

Global injection makes this tricky 😄

[gaearon]

Maybe I misunderstand how it works but I thought transaction is created on every root mount. For example server rendering creates a transaction (passing makeStaticMarkup, a config just like getMockRef) on every renderToStringImpl call. I don't see any injection being done there, transaction is just passed as an argument to root reconciler call. Can we do the same here?

[aweary]

I'm probably the one misunderstanding, but from what I can see it injects the transaction class in ReactTestRenderer:

ReactUpdates.injection.injectReconcileTransaction(
  ReactTestReconcileTransaction
);

Then the actual transaction object is constructed from the object pool every time it's needed, which is on mount and on update

  var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
  var image = transaction.perform(
    mountComponentIntoNode,
    null,
    componentInstance,
    transaction
  );
  ReactUpdates.ReactReconcileTransaction.release(transaction);

but the way ReactServerRenderingTransaction works with makeStaticMarkup is that makeStaticMarkup is actually passed to the getPooled call every time the transaction is created. So even though the transaction is recreated from an injected global class, it gets that call-specific config every time. So I think we can just do the same here! I'll give that a try.

[gaearon]

Dynamic injection is a mess. Sorry.

[aweary]

Yes it is, and no sorry needed 🤘 It's at the very least a fun challenge

[aweary]

@gaearon @spicyj updated it to createNodeMock 👍

[gaearon]

Great job.
Leaving the honor of pressing "Squash and Merge" to you 😄