Feature: emulate "Text strings must be rendered within a component." error

[mdjastrzebski]

Describe the Feature

React Native renderer throws error when string is rendered outside of Text component, e.g. directly under View or other native component. It seems that React Test Renderer that we use does not throw a similar error in this situation, which may lead to missed errors that RNTL could capture in tests.

This feature would emulate that behaviour by throwing error whenever string value is rendered outside of Text component.

Possible Implementations

As a first step we could analyse render tree after initial render and look for string children prop that are not children of Text component.

Then we would have to figure out a way to react to subsequent re-renders to trigger the validation again. Maybe a custom act wrapper that would invoke the validation.

Related Issues

This feature request is based on #556

[pierrezimmermannbam]

Hey @mdjastrzebski, I'd be happy to help, I'll send a pr soon

[mdjastrzebski]

@pierrezimmermannbam awesome! Please do :-)

[pierrezimmermannbam]

I've started to work on it, I've completed the first step but I'm having some difficulties for generalizing the behavior.
The custom act wrapper would have been nice as it is supposed to wrap all updates but there is an issue which is that we need access to the instance in order to perform the check. I thought it could be accessed through the screen object but then again there are some issues : during render the screen object has not yet been updated and on unmount it is not defined anymore. I could ignore the error of screen being undefined in act and call the method manually in the render function but I'm not sure it's good, it seems pretty complicated and not easily understandable.
My other idea would be to call the method in the rerender and the render method which are defined on the render where we have access to the instance and to use the screen object in the fireEvent method to make the check (I believe screen should always be defined when using fireEvent ?). This is not ideal as there are three distinct calls to the method but I think it's still better than the other solution and way easier to understand.
So far I haven't thought of a better solution, @mdjastrzebski what's your opinion ?

[mdjastrzebski]

@pierrezimmermannbam Indeed finding a proper hook is rather difficult. Maybe we could wrap rendered user component inside 'React.Profiler' which has 'onRender' event that should be called after each render anywhere among its descendants. At this moment the component tree should probably be already updated, but we need to check that.

If this works we may also analyze how exactly 'React.Profiler' works in order fine tune that solution.

[pierrezimmermannbam]

@mdjastrzebski using a Profiler worked ! I opened a pr

[mdjastrzebski]

Resolved by #1070