Comments (15)
I have been doing just that in my current project using jest-serializer-html-string to serialize the html correctly
if that interests anyone I can put together a small boilerplate but should be fairly straightforward, just @developit example + jest snapshotSerializer config
from preact-render-to-string.
@ruyadorno jest-serializer-html-string doesn't seem to match jest's rendering behaviour. Jest is more like the jsx renderer, which has the advantage of clearer diffs on attribute changes. Because each attribute is a single line it's much easier to see which ones are removed and added when multiple attribute changes are made for a single component.
I love your package though, keep up the good work 👍
from preact-render-to-string.
@ruyadorno thanks for sharing your solution
from preact-render-to-string.
Just came across this thread, my fork of preact-render-to-string renders to JSON: preact-render-to-json and is compatible with Jest and React testing frameworks.
from preact-render-to-string.
@conorhastings That would be awesome - I've been pondering the best approach myself. Right now the renderer doesn't use an intermediary, so it's straight to string concat. I think the simplest approach would be to add a { json:true }
option added that builds up objects instead of strings. It might end up being quite a few branches in the code though, not sure what to do about that. I guess another option would be to always render to Objects first, then if { json:true }
isn't passed do the xml/html stringification, but that'd make this two-pass, which would be quite a bit worse performance.
from preact-render-to-string.
that would be very useful @ruyadorno
from preact-render-to-string.
@ruyadorno great job 👍
our project(https://github.com/ant-design/ant-design-mobile) use jest snapshot test, if preact can works with jest snapshot test, then we will be more confident to use preact replace react
from preact-render-to-string.
I know you all have seen it in twitter but I'll leave the boilerplate link here for future reference:
https://github.com/ruyadorno/preact-jest-snapshot-test-boilerplate
from preact-render-to-string.
@ruyadorno @developit seems like the render result is consistent, but html string is not serialized as the same way of enzyme-to-json
ant-design/ant-design-mobile#1306
from preact-render-to-string.
@ruyadorno
as ant-design/ant-design-mobile#1306 ci result shownd,
The problem is jest-serializer-html-string not place html attribute at new line, so the react snapshot not be consistent with preact snapshot, I will create a PR to fix this.
from preact-render-to-string.
the difference is whether put each prop on a separate line.
from https://github.com/adriantoine/enzyme-to-json#user-content-serializer:
This is inspired by jest-serializer-enzyme, I first added a note to jest-serializer-enzyme but I then realised that the output is different, so it is not retro compatible with enzyme-to-json because it's using Enzyme debug helper which doesn't put each prop on a separate line.
from preact-render-to-string.
@paranoidjk ah - you probably want to use the JSX string renderer:
import preactRender from 'preact-render-to-string/jsx';
preactRender(<foo a="b" c="d">bar</foo>)
/*
<foo
a="b"
c="d"
>
bar
</foo>
*/
from preact-render-to-string.
@paranoidjk yeah, even though it might be valid html, it's def not the standard way html is usually rendered, I'd rather stick with the default options from the html beautifier within jest-serializer-html-string as that would make more sense for most people (including me).
from preact-render-to-string.
Trying to think of the slimmest way to produce JSON output from the string renderer. It's the same flow, just seems awkward to have to have that many branches.
from preact-render-to-string.
@nathancahill Posting this here, as you don't have issues enabled on your repo: preact-render-to-json doesn't work with hooks, because of preactjs/preact#1373
from preact-render-to-string.
Related Issues (20)
- Behavior for falsy data attributes not same as preact.
- 5.2.5 breaks server side rendering of @preact/signals HOT 2
- renderToString with {pretty: true} causes undesirable newlines with text nodes HOT 1
- Rendering asynchronous component throws an error HOT 9
- Meta charset not rendered as expected HOT 1
- Void elements have whitespace at closing
- Using effects from @preact/signals causes memory leak HOT 2
- CommonJS bundle broken for v6 HOT 1
- unpkg package seems failed HOT 2
- Unable to import shallowRender from preact-render-to-string/jsx due to TypeScript type errors
- preact and htm function does not return html when ssr rendered from mjs file HOT 3
- xlink:href becomes xlink::href
- `options._diff` not called for implicit Fragments HOT 2
- `preact/debug` warnings not thrown because `vnode.__k` is not set
- Stream Rendering Roadmap HOT 1
- Invalid nesting detection with `preact/debug` HOT 1
- Incorrect jsx type definition HOT 2
- HTML Entity encoding in Script Tags HOT 4
- renderToStringAsync seems to be unexported
- null is being removed when used as value in dangerouslySetInnerHTML html HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preact-render-to-string.