3 ways to add Screener Steps to a React component in Storybook Component Story Format

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,
};

// Add steps by wrapping component with Screener tag
export const ButtonState1 = () =>
  <Screener steps={new Steps()
    .click('.selector')
    .snapshot('name')
    .end()
  }>
    <Button>hello</Button>
  </Screener>;

// Add steps by wrapping story with Screener tag in decorator
export const ButtonState2 = () => <Button>hello</Button>;
ButtonState2.decorators = [
  story =>
    <Screener steps={new Steps()
      .click('.selector')
      .snapshot('name')
      .end()
    }>
      {story()}
    </Screener>
];

// add steps without Screener tag in decorator
export const ButtonState3 = () => <Button>hello</Button>;
ButtonState3.decorators = [
  story => ({
    ...story,
    steps: new Steps()
      .click('.selector')
      .snapshot('name')
      .end()
  })
];