addons-actions: option to return something

[christophehurpeau]

Is your feature request related to a problem? Please describe.

We have stories with callbacks that should return Promise.

storiesOf('Some Form', module).add('Default', () => (
  <Form initialValues={{}} onSubmit={action('Submit')} />
));

Form onSubmit prop: onSubmit: Promise<void>;

Describe the solution you'd like

Option to specify a return value, either with a function or directly the value we want to return ?

storiesOf('Some Form', module).add('Default', () => (
  <Form initialValues={{}} onSubmit={action('Submit', { returnValue: Promise.resolve() )} />
));

storiesOf('Some Form', module).add('Default', () => (
  <Form initialValues={{}} onSubmit={action('Submit', { getReturnValue: (values) => Promise.resolve() )} />
));

I'm not sure about the naming

Describe alternatives you've considered

• Allowing onSubmit return type to accept void.
• custom handler it works but it is not pretty

<Form initialValues={{}} onSubmit={() => {
    action("Create temporary event")();
    return Promise.resolve();
  }} />

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

reopening #11290 as it is still an issue and requested by several people

[shilman]

In recent version of Storybook (8.x, probably even late 7.x), the recommended way to use actions has changed.

https://storybook.js.org/docs/essentials/actions

You can do:

import { fn } from '@storybook/test';

const meta: Meta<typeof Button> = {
  component: Button,
  args: { onClick: fn() },
};

Since fn is a vitest spy you can use mockReturnValue, mockResolvedValue, etc.

https://vitest.dev/api/mock

Does that solve your use case?

[christophehurpeau]

The nice thing about action was that there was a log when the callback was called. I guess we should now test the output, so yes, it does solve the issue. Thank you

[shilman]

The fn thing automatically logs to the action panel too! So I think we've got you covered. Thanks for your patience on this, I wish I'd remembered about this issue when we introduced the feature last year.