How to set test name at addon-interactions?

[soromii]

How to set test name at addon-interactions?
Is it available in beta version?
like this post. thanks

https://storybook.js.org/blog/interaction-testing-sneak-peek/

[TommasoAmici]

I'd be interested in this too, but looking at the source code of @storybook/addons-interactions this is not possible, I guess it was just a mock up?

[zyxneo]

From the documentation https://storybook.js.org/docs/essentials/interactions

Use step description.

// Form.stories.ts|tsx
...
export const Submitted: Story = {
  play: async ({ args, canvasElement, step }) => {
    const canvas = within(canvasElement);
 
    await step('Enter credentials', async () => {
      await userEvent.type(canvas.getByTestId('email'), 'hi@example.com');
    });
 
    await step('Submit form', async () => {
      await userEvent.click(canvas.getByRole('button'));
    });
  },
};

[Stan-Stani]

https://storybook.js.org/docs/writing-tests/interaction-testing#group-interactions-with-the-step-function

[Stan-Stani]

Came here through google so going to leave this for others in 2025+ using Vitest: https://storybook.js.org/docs/writing-tests/integrations/vitest-addon#how-do-i-customize-a-test-name

How do I customize a test name?

By default, the export name of a story is mapped to the test name. To create a more descriptive test description, you can provide a name property for the story. This allows you to include spaces, brackets, or other special characters.
Example.stories.js|ts

export const Story = {
name: 'custom, descriptive name'
};