Testing API in @stroybook/testing-react and @storybook/react

[ygkn]

Hi.

When importing stories and writing tests, I was importing composeStories from @storybook/react instead of @storybook/testing-react. Then I got the following type error in running play function of the composed story.

1. play function could be undefined.
2. the argument of the play function { canvasElement: container } is missing some properties.

code:

const { container } = render(<Success onSubmit={handleSubmit} />);

await Success.play({ canvasElement: container });

I do not get this error if I use composeStories imported from @storybook/testing-react as described in this document. I thought the composeStories function in @storybook/react should work as well and the type error is a bug, for the following reasons:

• comments on the source code of @storybook/react
• composeStory in @storybook/react works well
• type definitions in @storybook/testing-react and @storybook/react's one are similar

From the source code of @storybook/testing-react, it is thought that type errors can be eliminated by changing /lib/store/src/csf/testing-utils/index.ts as follows.

/**
 * T represents the whole ES module of a stories file. K of T means named exports (basically the Story type)
 * 1. pick the keys K of T that have properties that are Story<AnyProps>
 * 2. infer the actual prop type for each Story
 * 3. reconstruct Story with Partial. Story<Props> -> Story<Partial<Props>>
 */
export type StoriesWithPartialProps<TFramework extends AnyFramework, TModule> = {
  // @TODO once we can use Typescript 4.0 do this to exclude nonStory exports:
  // replace [K in keyof TModule] with [K in keyof TModule as TModule[K] extends ComposedStory<any> ? K : never]
  [K in keyof TModule]: TModule[K] extends ComposedStory<infer _, infer TProps>
-    ? AnnotatedStoryFn<TFramework, Partial<TProps>>
+    ? StoryFn<TFramework, Partial<TProps>>
    : unknown;
};

So I have two questions

1. are composeStories of @storybook/testing-react and @storybook/react different?
2. can I open a pull request for the above mentioned change that fixes a type error in @storybook/react's composeStories?

This is my environment:

• @storybook/react: 6.5.12
• @storybook/testing-react: 1.3.0
• TypeScript: 4.7.4

Thanks.

[ygkn]

This is resolved in 7.0