preactjs / preactjs/preact-render-to-string

Shallow rendering and parameter object serialization

Open
#256 2 comments 0 reactions 0 assignees View on GitHub

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="{&quot;test&quot;:&quot;1234&quot;}" />

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.