Skip to content

Instantly share code, notes, and snippets.

@screener-io
Created Mar 25, 2020
Embed
What would you like to do?
Storybook + Screener Steps with Hooks Example
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>
)]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment