[Bug]: Canvas types only exist if `storybook/test` is imported

[yannbf]

Describe the bug

As can be seen here:

Reproduction link

https://stackblitz.com/edit/github-8sdhkcnj?file=src%2Fstories%2FButton.stories.ts&preset=node

Reproduction steps

import type { Meta, StoryObj } from '@storybook/react-vite';

// By commenting this out, the type error in line 22 will stop.
// import { fn } from 'storybook/test';

import { Button } from './Button';

const meta = {
  title: 'Example/Button',
  component: Button,
} satisfies Meta<typeof Button>;

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

export const Default: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
  play: async ({ canvas }) => {
    canvas.getByRole('button');
  },
};

[dosubot]

This happens because the TypeScript types for the canvas object in Storybook play functions are only extended with Testing Library methods (like getByRole) when you import from storybook/test somewhere in your project. Without this import, the canvas type is empty and you'll get type errors when using those methods.

To resolve this, add the following import anywhere in your project (it doesn't need to be in every story file):

import 'storybook/test';

This will extend the canvas type globally and remove the type errors for Testing Library queries in your play functions. More details are available in this discussion.

To reply, just mention @dosu.

---

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

[yannbf]

Closing as duplicate of #32689