Preact: Fix hooks when used in stories, preact-kitchen-sink #14473
+159
−272
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue: #13928.
Also resolves #11145 as it fixes Preact 10.x snapshots.
What I did
preact-render-to-json
topreact-render-to-string
for rendering Jest snapshots in tests.client/preview/render.tsx
to render stories usingh()
so that hooks work.storyshots-core/src/frameworks/preact/renderTree.ts
to usepreact-render-to-string
withpretty: ' '
to output sensible HTML for snapshots.How to test
devDependencies
on Storybook were upgraded to10.x
but the kitchen sink app was kept as8.x
. Not sure if the preact kitchen sink app is currently being checked, but it will render now.Addons > Actions > Action only
story has been updated to use a state hook to demonstrate that issue Storybook Preact story rendering breaks when using hooks to declare state in stories #13928 is fixed.@storybook/preact
from npm since the runtime version of Storybook uses the consumer's version of preact, whichever is installed.