Feat : emulate string outside text error

[pierrezimmermannbam]

Summary

Throw errors when strings are rendered outside Text to simulate native behaviour (#1032 )

On initial render we make a first check and then using a React.Profiler we perform a new check on each update by using the screen object to access the instance. The check at mount is done directly in the render method because the screen object is not updated yet with the render result. In the onRender prop of the React.Profile we verify that the phase is update before performing a check so it doesn't run on mount.
I also had to refactor a bit the render function so that this behavior would only affect the rendering of components and not of hooks because in the case of hooks the instance is not defined in the screen object, which resulted in errors on update.

Test plan

I added a test case for rendering, rerendering and updating with fireEvent and checked each time that it threw the expected error

[mdjastrzebski]

Added some initial comments.

[mdjastrzebski]

I've added a request for some addtional test, I have a hunch that we won't be able to simulate that perfectly until we solve #967 .

[mdjastrzebski]

The PR seems to be almost ready. We still need to pick meaningful render option name for it. I would suggest to prefix it with experimentalXxx, where xxx is whatever name we will choose. That way we could release it to the users, inform them that it's kinda new so might still be some unexpected errors, and also give us ability to fix them without releasing major version, as typically in OSS experimental features breaking changes are not considered breaking change for the whole dependency. @pierrezimmermannbam @AugustinLF @thymikee Wdyt?

[pierrezimmermannbam]

I changed the implementation to use toJSON, the validation should work fine for every case now, what remains to be done is deciding the name for the option and customizing the error message so that it's clearer. I don't know about logging a part of the tree but I'd say adding the string that is being rendered outside a Text component would be a good start. As for the name of the option, experimentalValidateStringsRenderedInText as suggested by @mdjastrzebski looks good to me

[pierrezimmermannbam]

Also there is a small issue when running tests, the React.Profiler logs errors so there are outputs of errors from the tests. This could be fixed by overriding console.error in the tests that trigger errors so that it doesn't do anything. It's not ideal though, maybe there is a better way to do this ?

[AugustinLF]

Also there is a small issue when running tests, the React.Profiler logs errors so there are outputs of errors from the tests. This could be fixed by overriding console.error in the tests that trigger errors so that it doesn't do anything. It's not ideal though, maybe there is a better way to do this ?

I'd say it's fair in this case to override console.error and add an explicit filter for the error containing <Profiler> component or something like that

[pierrezimmermannbam]

Also there is a small issue when running tests, the React.Profiler logs errors so there are outputs of errors from the tests. This could be fixed by overriding console.error in the tests that trigger errors so that it doesn't do anything. It's not ideal though, maybe there is a better way to do this ?

I'd say it's fair in this case to override console.error and add an explicit filter for the error containing <Profiler> component or something like that

I have overriden console.error in the tests that logged errors so that it doesn't log errors from the Profiler

[mdjastrzebski]

Awesome work @pierrezimmermannbam ! Seems like your nearing to the end. I really like you were able to use JSON tree to run the assertion code.

On major thing that brings my attention is the complexity around render/renderComponent function. I have suggest an approach that would allow us to use the original render while having a separeterenderWithValidateStrings, instead of current more complex flow.

[AugustinLF]

Stellar work! Really looking forward using that.

[mdjastrzebski]

Suggested change

	test(`it should throw
	- when one of the children is a text
	- and the parent is not a Text component`, () => {
	test(`it should throw when one of the children is a text and the parent is not a Text component`, () => {

[mdjastrzebski]

```suggestion when a string is rendered within a fragment rendered outside a Text`, () => {

[mdjastrzebski]

I've extracted the tests into separate render-stringValidation.test.tsx file, as the original render.test.tsx got pretty long. I've also replaced error snapshots/inline snapshots with cleaner toThrow checks.

[mdjastrzebski]

Awesome work @pierrezimmermannbam! Merging it 🚀

[mdjastrzebski]

🎉 This PR is included in version 11.2.0 🎉