Is an await required for getByRole in Interaction tests?

[hakshu25]

I have introduced a storybook in a react + vite environment with the following command.

pnpm dlx storybook@latest init

In the boilerplate Page.stories.ts created, I see the following. getByRole does not return a Promise I think, so is this an unnecessary await?

const loginButton = await canvas.getByRole('button', {
    name: /Log in/i,
});

Package version

"@storybook/addon-essentials": "^7.3.2",
"@storybook/addon-interactions": "^7.3.2",
"@storybook/addon-links": "^7.3.2",
"@storybook/addon-onboarding": "^1.0.8",
"@storybook/blocks": "^7.3.2",
"@storybook/react": "^7.3.2",
"@storybook/react-vite": "^7.3.2",
"@storybook/testing-library": "^0.2.0"

Page.stories.ts

import type { Meta, StoryObj } from '@storybook/react';
import { within, userEvent } from '@storybook/testing-library';

import { Page } from './Page';

const meta = {
  title: 'Example/Page',
  component: Page,
  parameters: {
    // More on how to position stories at: https://storybook.js.org/docs/react/configure/story-layout
    layout: 'fullscreen',
  },
} satisfies Meta<typeof Page>;

export default meta;
type Story = StoryObj<typeof meta>;

export const LoggedOut: Story = {};

// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
export const LoggedIn: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const loginButton = await canvas.getByRole('button', {
      name: /Log in/i,
    });
    await userEvent.click(loginButton);
  },
};

[yannbf]

Hey there @hakshu25! Thanks for writing this out.

The types should be correct – any of the Storybook testing utilities are promises. They wrap the original functionality (testing-library, jest, etc), instrument them and turn them into promises. Here's a more detailed explanation regarding why promises are needed:
storybookjs/jest#39 (comment)

[hakshu25]

@yannbf
I understand very well. Thank you!