Though OP's approach has definite use cases, I'd recommend another approach in most instances: Break down your React rendering into two steps: "state->JSON", then "JSON->DOM".
So basically, try to come up with a JSON description for your UI that answers the question "If I created a UI that only consisted of JSON, but had the same information as my DOM UI, what would it look like?"
Chances are, 80% of your rendering code will be in the "state->JSON" part, and that part of the code is SUPER easy to unit test.
Plus, when the day comes you want to adopt ReactNative, you already have the perfect in-between data structures to add this, you simply need to write some extra JSON->Native code.
> Break down your React rendering into two steps: "state->JSON", then "JSON->DOM".
Er… that's exactly how React works in the first place, your "JSON" is react's "VDOM". The point of the shallow renderer is to perform a single level of rendering rather than recursively rendering all components to the final VDOM (so sub-components will appear as sub-components, not as their rendered vdom)
Could you give an example of this? Looking at my code it appears that the JSON would usually be the same as this.props (as long as the component is stateless).
Now there are some components which derive other properties in render(), but the majority of code in that method tends to be JSX (calls to React.createElement()).
What you call JSON is what I've usually heard called a ViewModel: a logical representation of the state of your view. I've found it very useful as well.
Thanks for this. Noticed whilst testing that renderIntoDocument in ReactTestUtils doesn't even render the ReactComponent into the DOM either and is due to be renamed. [1] Shallow rendering looks like the correctly renamed approach... I'll be updating my tests accordingly.
[+] [-] drcode|10 years ago|reply
So basically, try to come up with a JSON description for your UI that answers the question "If I created a UI that only consisted of JSON, but had the same information as my DOM UI, what would it look like?"
Chances are, 80% of your rendering code will be in the "state->JSON" part, and that part of the code is SUPER easy to unit test.
Plus, when the day comes you want to adopt ReactNative, you already have the perfect in-between data structures to add this, you simply need to write some extra JSON->Native code.
[+] [-] masklinn|10 years ago|reply
Er… that's exactly how React works in the first place, your "JSON" is react's "VDOM". The point of the shallow renderer is to perform a single level of rendering rather than recursively rendering all components to the final VDOM (so sub-components will appear as sub-components, not as their rendered vdom)
[+] [-] guscost|10 years ago|reply
Now there are some components which derive other properties in render(), but the majority of code in that method tends to be JSX (calls to React.createElement()).
[+] [-] curveship|10 years ago|reply
[+] [-] CrystalGamma|10 years ago|reply
[+] [-] mkohlmyr|10 years ago|reply
Simon, if you read this I regularly have the lyrics to one of your ancient tunes pop into my head to this day. Stephen Hawking Need Not Apply.
[+] [-] GordyMD|10 years ago|reply
[1] https://github.com/facebook/react/blob/master/src/test/React...
[+] [-] benhue|10 years ago|reply
[+] [-] dugmartin|10 years ago|reply