Skip to content

Instantly share code, notes, and snippets.

@screener-io
Created Sep 9, 2021
Embed
What would you like to do?
3 ways to add Screener Steps to a React component in Storybook Component Story Format
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()
})
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment