You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I have a super simple component which renders perfectly in Storybook 5.2. It uses the CSF format and the "name" property so that I can use a different name from the variable name of the named export.
In CSF, the default name for a story is its exported variable name with spaces inserted before camelcase letters or numbers. In this case Error404 is converted to Error 404, but the name I really want is "404 Error" since that is its common terminology. I can't use export const 404Error because that is invalid JavaScript. Fortunately, CSF allows you to override the default export name with the [export var].story.name property.
This option works great inside Storybook. Unfortunately, it causes Loki to fail to make a screenshot saying:
❯ Pages/Error
✖ 404 Error
→ Failed with "Unable to get position of selector "#root > *". Review the
`chromeSelector` option and make sure your story doesn't crash.
…
If I remove the Error404.story.name property, then Loki is able to generate a screenshot without error.
The text was updated successfully, but these errors were encountered:
JohnAlbin
changed the title
CSF stories using the "name" parameter always fail
CSF stories using the "story.name" property always fail
Dec 7, 2019
Update: I just noticed I have another story with TODO.story = { name: "@TODO"} and that renders fine with Loki.
So perhaps it's the use of a space in the name that cause Loki to fail? Edit: Nope. @TODO got converted to TODO which matches the original exported variable name. That just means that most (but not all) stories with [var name].story.name will fail under Loki.
I have a super simple component which renders perfectly in Storybook 5.2. It uses the CSF format and the "name" property so that I can use a different name from the variable name of the named export.
In CSF, the default name for a story is its exported variable name with spaces inserted before camelcase letters or numbers. In this case
Error404
is converted toError 404
, but the name I really want is "404 Error" since that is its common terminology. I can't useexport const 404Error
because that is invalid JavaScript. Fortunately, CSF allows you to override the default export name with the[export var].story.name
property.This option works great inside Storybook. Unfortunately, it causes Loki to fail to make a screenshot saying:
If I remove the
Error404.story.name
property, then Loki is able to generate a screenshot without error.The text was updated successfully, but these errors were encountered: