question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cannot screenshot multiple stories with addDecorator

See original GitHub issue

First of all, need to say this is a great add-on. Thanks!

Issue: When looping over stories, addDecorator seems to get stuck after a single story. It will only generate the images for the one story.

As mentioned by @gcazaciuc in #3, it would be very handy not to have to decorate every story manually.

This does not work:

storiesOf('corp-site/atoms/Button', module)
  .addDecorator(withScreenshot(getScreenshotOptions))
  .add('with Black and Active', () => (
    <Button color="black" isActive>Button</Button>
  ))
  .add('with White and inactive, also inaccessible', () => (
    <Button color="white">Button</Button>
  ))
  .add('with Purple and inactive', () => (
    <Button color="purple">Button</Button>
  ))

It will only take screenshots of the first story: with Black and Active.

It would be great to be able to use the addDecorator globally within the config to take screenshots of all stories that are being imported and looped over.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:17 (9 by maintainers)

github_iconTop GitHub Comments

3reactions
alexeybondarenkocommented, Oct 24, 2017

@tsuyoshiwada okay 😀 I will try to fix it

2reactions
theKasheycommented, Apr 25, 2018

1.1.0-alpha.1 – a lot of screenshots are duplicated. I could see button for button story, checkbox, and even App story. It does not got updated. Using withScreenshot as a global decorator.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Global decorators don't work in storyshots when applied in ...
It works when I apply them via storiesOf(...).addDecorator, or globally in a story. However, global decorators seem to be ignored entirely when ...
Read more >
Rendered more hooks than during the previous render
The solution suggest to use addDecorator where with a simple FC we can preload the fonts and once they are loaded it can...
Read more >
Screenshot testing with React and Storybook | by Jesse Pinho
This way, it'll take screenshots of every single story. addDecorator(withScreenshot({ // A one-second delay ensures that fonts load before ...
Read more >
How to Screenshot an Instagram Story Without Getting Caught
Here are several methods for how to screenshot Instagram Stories without the risk of anyone being notified about it.
Read more >
Handling Flaky Tests - Loki · Visual Regression Testing
In some cases having a story of a component is useful for development ... as an animated GIF that cannot accurately be covered...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found