Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Storybook hooks support in portable stories #29574

Open
Tracked by #29088
yannbf opened this issue Nov 8, 2024 · 0 comments
Open
Tracked by #29088

Add Storybook hooks support in portable stories #29574

yannbf opened this issue Nov 8, 2024 · 0 comments

Comments

@yannbf
Copy link
Member

yannbf commented Nov 8, 2024

Currently, portable stories are not compatible with Storybook hooks from @storybook/preview-api. This makes it hard for users who have stories like so to use the Storybook Test feature:

import { useArgs } from '@storybook/preview-api'
export const Default = {
  args: {
    value: true,
  },
  render: function Render() {
    const [{ value }, updateArgs] = useArgs()
    const onValueChange = () => updateArgs({ value: !value })

    return <button onClick={onValueChange}>The value is {JSON.stringify(value)}</button>
  },
  play: async({ canvas }) => {
    const button = await canvas.findByText('The value is true')
    await expect(button).toBeInTheDocument()
    await userEvent.click(button)
    await expect(await canvas.findByText('The value is false')).toBeInTheDocument()
  }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: No status
Development

No branches or pull requests

1 participant