Storybook + Screener Steps with Hooks Example

button.stories.js

import React from 'react';
import { Button } from '@storybook/react/demo';
import Screener, {Steps} from 'screener-storybook/src/screener';

export default {
  title: 'Button',
  component: Button,
};

export const Text = () => <Button>Hello Button</Button>;

// Hooks example
export const Emoji = () => {
  const [state, setState] = React.useState(5);
  return (
    <Button onClick={() => setState(state + 1)}>
      <span role="img" aria-label="so cool">
        😀 😎 👍 💯
      </span>
    </Button>
  );
};

// Add decorator with Screener steps and wrap storyFn in try/catch
Emoji.story = {
  decorators: [storyFn => (
    <Screener steps={new Steps()
        .click('.selector')
        .snapshot('name')
        .end()
      }>
      {(() => {
        try { return storyFn(); } catch(e) {}
      })()}
    </Screener>
  )]
};