no ts suggestion for play func. with csf next

[meeshan-dev]

@dosu, i am not getting ts suggestions for canvas and userEvent

export const Default = meta.story({
  play: async ({ canvas, userEvent }) => {},
});

[dosubot[bot]]

You won't get TypeScript suggestions for canvas and userEvent in your play function unless you do two things:

1. Add import 'storybook/test'; somewhere in your project (just once, not in every file). This enables the correct types for those parameters and unlocks intellisense for Testing Library methods in the play function context.
   Details & explanation

2. For best TypeScript inference with CSF Next, define your stories using the StoryObj<typeof meta> pattern, like this:

import type { Meta, StoryObj } from '@storybook/react'; // or your framework

const meta = {
  component: MyComponent,
} satisfies Meta<typeof MyComponent>;
export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  play: async ({ canvas, userEvent }) => {
    // canvas and userEvent now have full TS support
  },
};

See the official example

If you use meta.story({ play }) directly, you may not get the same level of type inference. Try the pattern above and make sure you're on Storybook 9.x for the latest typing improvements. If you still don't see suggestions, double-check your TypeScript config and that your Storybook packages are up to date.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[meeshan-dev]

by importing import { expect } from 'storybook/test' ts suggestion works