preactjs / preactjs/preact-render-to-string
Shallow rendering and parameter object serialization
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 726
- Forks
- 101
- Avg merge
- 3d 6h
- Merged PRs (30d)
- 6
Description
We're currently working on creating unit tests and as a starter, we're trying to snapshot the components using renderToString with shallow set to true.
The problem is that a object passed as parameter to a child component will be rendered as string "[object Object]", simplified example:
export default function MyComponent {
return (<WrapperComponent param1={{ test: '1234' }} />);
}
generates ==>
<WrapperComponent param1="[object Object]" />
As far as I can trace it, it's because the default JS serializing is used for a simple JS object (done in src/util.js -> encodeEntities). We're using typescript and got the parameter typed, but that doesn't help us because I don't think you can override the toString method for that one. Changing everything to classes / functions and override the toString is really a no-go because it adds tons of extra code. Any way provide a callback or something that objects are serialized with (for example) JSON.stringify so we get something like:
<WrapperComponent param1="{"test":"1234"}" />
Note: I really want to test using the renderToString function and not enzyme or any other jest snapshot serializer, because that just doesn't render the components in exactly the same way this module does.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/util.js and encodeEntities, then trace how renderToString handles component parameters. Compare the current [object Object] output with the requested escaped JSON form; done means the rendering path has an agreed serialization behavior for object parameters, with coverage for this case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100