TypeScript errors when re-using `play` functions. | Storybook | Page 1

radiant solstice Mar 9, 2023, 10:08 AM

#

The documentation mentions re-using play functions for interactions testing like this:

play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    // Runs the FirstStory and Second story play function before running this story's play function
    await FirstStory.play({ canvasElement });
    await SecondStory.play({ canvasElement });
    await userEvent.type(canvas.getByTestId('another-element'), 'random value');
  },

Although when I do exactly that, there is a TS error:

Argument of type '{ canvasElement: any; }' is not assignable to parameter of type 'PlayFunctionContext<ReactRenderer, {}>'.
  Type '{ canvasElement: any; }' is missing the following properties from type 'StoryIdentifier': componentId, title, kind, id, and 3 more.ts(2345)

I tried passing ...rest but that did not help either (attached screengrabs for more info)

smoky warren Mar 9, 2023, 12:09 PM

#

radiant solstice The documentation mentions re-using play functions for interactions testing like...

How are you typing your stories and default export?

radiant solstice Mar 9, 2023, 12:33 PM

#

@smoky warren

type StoryFSM = StoryObj<typeof FSMView>;

export default {
  component: FSMView,
} as Meta<typeof FSMView>;

export const SwitchesToBuilder: StoryFSM = {

smoky warren Mar 9, 2023, 12:35 PM

#

Are you using TS 4.9?

radiant solstice Mar 9, 2023, 12:36 PM

#

Yeah

smoky warren Mar 9, 2023, 12:37 PM

#

I wonder if it would help if you took this approach: https://storybook.js.org/blog/improved-type-safety-in-storybook-7/

Storybook Blog

Improved type safety in Storybook 7

CSF3 syntax combined with TypeScript satisfies gives you stricter types and an improved developer experience

radiant solstice Mar 9, 2023, 12:37 PM

#

Hmmm i had to stop using satisfies because jest complained

#

But let me try if it fixes this issue

smoky warren Mar 9, 2023, 12:39 PM

#

You may need to update a few other packages, depending on what you use.

radiant solstice Mar 9, 2023, 12:50 PM

#

@smoky warren changed it to

const meta = {
  component: FSMView,
} satisfies Meta<typeof FSMView>;

export default meta;

#

smoky warren Mar 9, 2023, 12:50 PM

#

And the stories should change to reference meta now too, right?

radiant solstice Mar 9, 2023, 12:50 PM

#

no change afaics

#

how?

smoky warren Mar 9, 2023, 12:51 PM

#

type Story = StoryObj<typeof meta>;

const base: Story = {

radiant solstice Mar 9, 2023, 12:51 PM

#

stories are just using StoryObj<typeof ....>

#

ah

#

ok sorry I missed that one in the docs

#

the error is different now

#

Argument of type '{ canvasElement: HTMLElement; }' is not assignable to parameter of type 'PlayFunctionContext<ReactRenderer, { [x: string]: any; }>'.
  Type '{ canvasElement: HTMLElement; }' is missing the following properties from type 'StoryIdentifier': componentId, title, kind, id, and 3 more.ts(2345)

smoky warren Mar 9, 2023, 12:52 PM

#

I wonder if you need to take the whole context argument and provide it. So, like:

#

play: async (context) => {
    const canvas = within(context.canvasElement);

    // Runs the FirstStory and Second story play function before running this story's play function
    await FirstStory.play(context);
    await SecondStory.play(context);
    await userEvent.type(canvas.getByTestId('another-element'), 'random value');
  },

radiant solstice Mar 9, 2023, 12:53 PM

#

lets try

#

wouldn't that be the same as supplying rest tho?

smoky warren Mar 9, 2023, 12:53 PM

#

Yeah you could do that too, either way.

radiant solstice Mar 9, 2023, 12:54 PM

#

yeah that fixes it

#

so the documentation needs to be updated

smoky warren Mar 9, 2023, 12:54 PM

#

Can you point to where you saw this?

radiant solstice Mar 9, 2023, 12:54 PM

#

sure

#

i cant find it

#

it was there an hour ago

#

is it possible it got hotfixed?

#

i cant find the whole page tbh

#

no idea why

#

it was about reusing the play function

smoky warren Mar 9, 2023, 12:58 PM

#

@balmy storm @quaint zephyr do you know where we document re-using play functions in other stories? It sounds like there might be a problem with it.

radiant solstice Mar 9, 2023, 12:59 PM

#

got it!

#

geez I am dense 🙂

#

https://storybook.js.org/docs/react/writing-stories/play-function

Play function

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

#

this actually

#

https://storybook.js.org/docs/7.0/react/writing-stories/play-function

Play function

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It’s open source and free.

smoky warren Mar 9, 2023, 1:00 PM

#

I think you mean https://storybook.js.org/docs/react/writing-stories/play-function#composing-stories

radiant solstice Mar 9, 2023, 1:00 PM

#

if you go to TS you can see

// Runs the FirstStory and Second story play function before running this story's play function
    await FirstStory.play({ canvasElement });
    await SecondStory.play({ canvasElement });

smoky warren Mar 9, 2023, 1:01 PM

#

Would you mind terribly creating a github issue, and tagging @balmy storm and myself on it? Our github handles are the same as here.

#

I'd like to track it, and make sure we fix it.

#

Even better would be a PR. 😉

radiant solstice Mar 9, 2023, 1:01 PM

#

sure thing

#

@smoky warren this would have to be changed to satisfies too

#

const meta: Meta<typeof MyComponent> = {
  title: 'MyComponent',
  component: MyComponent,
};

smoky warren Mar 9, 2023, 1:03 PM

#

Did you check if it works without the satisfies change?

#

Was that needed?

radiant solstice Mar 9, 2023, 1:04 PM

#

I tried that before

#

let me try again

#

just fo sho

#

ok so it works without, as long as the stories are typed as typeof meta

#

so this needs to change

#

type Story = StoryObj<typeof MyComponent>;

#

in the docs

#

but I lost intellisense it looks like

smoky warren Mar 9, 2023, 1:06 PM

#

yeah that's the downside without satisfies

radiant solstice Mar 9, 2023, 1:08 PM

#

i dont have intellisense even with satisfies for some reason

#

args have no type

smoky warren Mar 9, 2023, 1:09 PM

#

Share what you have?

radiant solstice Mar 9, 2023, 1:09 PM

#

oh wait

#

that's my mistake I think

#

yeah I incorreclty exported my component, all is well

#

even typeof meta works fine

#

it has to be like

const meta = {
  component: FSMView,
} as Meta<typeof FSMView>;

not

const meta: Meta<typeof FSMView> = {
  component: FSMView,
}

#

though

radiant solstice Mar 9, 2023, 1:28 PM

#

@smoky warren do I need an issue or is PR enough?

smoky warren Mar 9, 2023, 1:33 PM

#

A PR is great, thanks

radiant solstice Mar 9, 2023, 1:37 PM

#

So - there seems to be no bug at all

#

well - it depends on how one exports their component

#

I exported mine without any type

#

and that introduced this issue

#

but if you export the component properly (say React.FC<Props>)

#

it works fine

smoky warren Mar 9, 2023, 1:39 PM

#

did you type your props?

radiant solstice Mar 9, 2023, 1:39 PM

#

i did - but I did not export purely the component

smoky warren Mar 9, 2023, 1:39 PM

#

I think most people don't use React.FC, I prefer to avoid that.

radiant solstice Mar 9, 2023, 1:39 PM

#

the file actually exports

export default compose(
  withGlobalOptionsConsumer(),
  withMessageHandler(),
  withMapperConsumer()
)(FSMView);

#

which introduced the issue

smoky warren Mar 9, 2023, 1:39 PM

#

ok, that's a bit more complex, yea

radiant solstice Mar 9, 2023, 1:40 PM

#

export default compose(
  withGlobalOptionsConsumer(),
  withMessageHandler(),
  withMapperConsumer()
)(FSMView) as React.FC<IFSMViewProps>;
``` fixes it

smoky warren Mar 9, 2023, 1:40 PM

#

So, if you export a normal component, does it work without providing all the context to the play function?

radiant solstice Mar 9, 2023, 1:40 PM

#

hmmm let me check

#

no

#

but at least the props work

#

Argument of type '{ canvasElement: HTMLElement; }' is not assignable to parameter of type 'PlayFunctionContext<ReactRenderer, IFSMViewProps>'.
  Type '{ canvasElement: HTMLElement; }' is missing the following properties from type 'StoryIdentifier': componentId, title, kind, id, and 3 more.ts(2345)

smoky warren Mar 9, 2023, 1:42 PM

#

Alright, so we should change that part no matter what it seems

radiant solstice Mar 9, 2023, 1:42 PM

#

so we did find one issue

#

everything else is OK

#

should I use typeof meta or typeof component then?

smoky warren Mar 9, 2023, 1:44 PM

#

I guess keep it the same as the old way for now. I guess there's going to have to be an effort to add / update all the examples to the new satisfies approach at some point.

#

(i.e. use typeof component)

radiant solstice Mar 9, 2023, 1:45 PM

#

aight cool

#

@smoky warren https://github.com/storybookjs/storybook/pull/21517

GitHub

Updated TS documentation for re-using play functions by Foxhoundn ·...

The current documentation introduces typescript errors when the rest of the context object is not passed to the re-used play functions. Hi @IanVS & @jonniebigodes.

What I did
Added rest of th...

#

oh crap - it needs to be updated for JS as well

#

or does it?

smoky warren Mar 9, 2023, 1:51 PM

#

Well, it's just a type error, so it's probably okay the way it was before for JS

radiant solstice Mar 9, 2023, 1:51 PM

#

it doesnt I guess

#

ok but isn't it confusing?

#

one example is using just { canvasElement }, the other passes ...rest too

#

it would confuse me if I checked that

smoky warren Mar 9, 2023, 1:52 PM

#

Sure, feel free to make them consistent.

#

Is good if one uses args or something, anyway

radiant solstice Mar 9, 2023, 1:53 PM

#

you want me to rename rest? I guess ...context would be the best?

smoky warren Mar 9, 2023, 1:53 PM

#

Yeah, or honestly I'd probably use the approach I suggested, of calling the whole thing context, and destructuring what is needed in the play function itself

radiant solstice Mar 9, 2023, 1:54 PM

#

ok sure thing

#

Done - https://github.com/storybookjs/storybook/pull/21517/files

GitHub

Updated TS documentation for re-using play functions by Foxhoundn ·...

The current documentation introduces typescript errors when the rest of the context object is not passed to the re-used play functions. Hi @IanVS & @jonniebigodes.

What I did
Added rest o...

smoky warren Mar 9, 2023, 2:00 PM

#

Thanks! I added the labels it needs and requested a review from the right person. Appreciate the submission!

balmy storm Mar 9, 2023, 2:08 PM

#

@radiant solstice I just saw the notification and I'll take a look at it tomorrow morning my time and follow up with on it. Sounds good?

radiant solstice Mar 9, 2023, 2:09 PM

#

@balmy storm as you wish mate, it's not a blocking issue or anything for me 🙂 thanks

balmy storm Mar 9, 2023, 2:09 PM

#

No need to thank whatsoever, appreciate you taking the time to help out with the documentation 🙏

radiant solstice Mar 9, 2023, 2:10 PM

#

Absolutely - can you also check if this screenshot is correct?
#documentation message

#

it seems that it could use a different one, with actual interaction controls there

balmy storm Mar 9, 2023, 2:15 PM

#

@radiant solstice the assets (images, videos) are getting reworked by our Design team. These were left in as placeholders to demonstrate the behavior. Nonetheless I'll check and relay the feedback back. Sounds good?

radiant solstice Mar 9, 2023, 2:15 PM

#

Sounds good 🙂

quaint zephyr Mar 9, 2023, 2:26 PM

#

Thanks for the PR!
I think @urban quarry eslint plugin also warns when you don't pass the whole context.

urban quarry Mar 9, 2023, 2:28 PM

#

yup!

#

https://github.com/storybookjs/eslint-plugin-storybook is your friend ❤️

GitHub

GitHub - storybookjs/eslint-plugin-storybook: 🎗Official ESLint plug...

🎗Official ESLint plugin for Storybook. Contribute to storybookjs/eslint-plugin-storybook development by creating an account on GitHub.

radiant solstice Mar 9, 2023, 5:41 PM

#

I am eslint free and would like to keep it that way for as long as I can 😁

smoky warren Mar 9, 2023, 5:45 PM

#

eslint is great, why would you avoid it?

#TypeScript errors when re-using `play` functions.