Typing issue in Storybook 6.4

[Meemaw]

Describe the bug There seems to be some typing issues related to the GlobalConfig and Storybook's builtin types (https://github.com/storybookjs/testing-react/blob/main/src/types.ts#L14)

I think the issue is in decorators specifically. Is there any reason why the types from storybook are not used, e.g. the DecoratorFn[] that `storybook exports.

[yannbf]

Hey @Meemaw thanks for opening this issue! Do you have a minimal reproduction repo so I can try out?

The reason for using the internal "GlobalConfig" type is because there was no such thing in previous versions of Storybook. I'm not sure it's consolidated yet in 6.4. @tmeasday do you think we can just use WebProjectAnnotations from @storybook/preview-web?

[tmeasday]

@yannbf -- I suppose so. I'm wondering how the user would actually use that type though?

Technically in @storybook/preview-web you take a ModuleExports (theoretically anything) from a preview.js and pass it through composeConfigs in order to get a WebProjectAnnotations. I guess it is probably OK to cast directly given that function doesn't really do any normalisation.

[Meemaw]

This is a minimal reproducing preview.tsx file:

import { DecoratorFn } from "@storybook/react"

export const decorators: DecoratorFn[] = [
  (story, context) => {
    return story(context)
  },
]

And then trying to set this with a setGlobalConfig from @storybook/testing-react results in a following Typescript error:

Argument of type 'typeof import("/Users/test/Workspace/test/test-next/.storybook/preview")' is not assignable to parameter of type 'GlobalConfig'.
  Types of property 'decorators' are incompatible.
    Type 'DecoratorFunction<StoryFnReactReturnType>[]' is not assignable to type '((story: () => StoryFnReactReturnType, context: StoryContext) => StoryFnReactReturnType)[]'.
      Type 'DecoratorFunction<StoryFnReactReturnType>' is not assignable to type '(story: () => StoryFnReactReturnType, context: StoryContext) => StoryFnReactReturnType'.
        Types of parameters 'c' and 'context' are incompatible.
          Type 'StoryContext' is not assignable to type 'StoryContext<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
            Type 'StoryContext' is not assignable to type '{ hooks: unknown; viewMode: ViewMode; originalStoryFn: StoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>; }'.
              Types of property 'originalStoryFn' are incompatible.
                Type 'StoryFn<AnyFramework, Args>' is not assignable to type 'StoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
                  Type 'LegacyStoryFn<AnyFramework, Args>' is not assignable to type 'StoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
                    Type 'LegacyStoryFn<AnyFramework, Args>' is not assignable to type 'LegacyStoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
                      Types of parameters 'context' and 'context' are incompatible.
                        Type 'StoryContext<ReturnTypeFramework<StoryFnReactReturnType>, Args>' is not assignable to type 'StoryContext<AnyFramework, Args>'.
                          Type 'StoryContext<ReturnTypeFramework<StoryFnReactReturnType>, Args>' is not assignable to type '{ hooks: unknown; viewMode: ViewMode; originalStoryFn: StoryFn<AnyFramework, Args>; }'.
                            Types of property 'originalStoryFn' are incompatible.
                              Type 'StoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>' is not assignable to type 'StoryFn<AnyFramework, Args>'.
                                Type 'LegacyStoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>' is not assignable to type 'StoryFn<AnyFramework, Args>'.
                                  Type 'LegacyStoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>' is not assignable to type 'LegacyStoryFn<AnyFramework, Args>'.
                                    Types of parameters 'context' and 'context' are incompatible.
                                      Type 'StoryContext<AnyFramework, Args>' is not assignable to type 'StoryContext<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
                                        Type 'StoryContext<AnyFramework, Args>' is not assignable to type '{ hooks: unknown; viewMode: ViewMode; originalStoryFn: StoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>; }'.
                                          Types of property 'originalStoryFn' are incompatible.
                                            Type 'StoryFn<AnyFramework, Args>' is not assignable to type 'StoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
                                              Type 'LegacyStoryFn<AnyFramework, Args>' is not assignable to type 'StoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
                                                Type 'LegacyStoryFn<AnyFramework, Args>' is not assignable to type 'LegacyStoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
                                                  Types of parameters 'context' and 'context' are incompatible.
                                                    Type 'StoryContext<ReturnTypeFramework<StoryFnReactReturnType>, Args>' is not assignable to type 'StoryContext<AnyFramework, Args>'.
                                                      Type 'StoryContext<ReturnTypeFramework<StoryFnReactReturnType>, Args>' is not assignable to type '{ hooks: unknown; viewMode: ViewMode; originalStoryFn: StoryFn<AnyFramework, Args>; }'.
                                                        Types of property 'originalStoryFn' are incompatible.
                                                          Type 'StoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>' is not assignable to type 'StoryFn<AnyFramework, Args>'.
                                                            Type 'LegacyStoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>' is not assignable to type 'StoryFn<AnyFramework, Args>'.
                                                              Type 'LegacyStoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>' is not assignable to type 'LegacyStoryFn<AnyFramework, Args>'.
                                                                Types of parameters 'context' and 'context' are incompatible.
                                                                  Type 'StoryContext<AnyFramework, Args>' is not assignable to type 'StoryContext<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
                                                                    Type 'StoryContext<AnyFramework, Args>' is not assignable to type '{ hooks: unknown; viewMode: ViewMode; originalStoryFn: StoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>; }'.
                                                                      Types of property 'originalStoryFn' are incompatible.
                                                                        Type 'StoryFn<AnyFramework, Args>' is not assignable to type 'StoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
                                                                          Type 'ArgsStoryFn<AnyFramework, Args>' is not assignable to type 'StoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
                                                                            Type 'ArgsStoryFn<AnyFramework, Args>' is not assignable to type 'ArgsStoryFn<ReturnTypeFramework<StoryFnReactReturnType>, Args>'.
                                                                              Type 'unknown' is not assignable to type 'StoryFnReactReturnType'.ts(2345)
                                                                              ```

[yannbf]

Hey @Meemaw thanks a lot for providing a minimal repro. The problem should be fixed in v1.2.2. Could you try that out? Thanks!

[chodorowicz]

I still get this error in @storybook/testing-react 1.2.4 and @storybook/react 6.4.9

[chodorowicz]

I've reproduced the issue in this minimal CodeSandbox https://codesandbox.io/s/awesome-bohr-2n4kfw?file=/src/Test.spec.tsx

[majagrubic]

Can confirm the error is still there with @storybook/testing-react 1.2.4 and @storybook/react 6.5.5.

[juunone]

it is still type error with @storybook/react": "^6.5.10" @storybook/testing-react": "^1.3.0"

[yannbf]

Hey there! I wanted to thank you for using @storybook/testing-react!

@storybook/testing-react has been promoted to a first-class Storybook functionality in Storybook 7. This means that you no longer need this package, and this package will not be worked on anymore (especially regarding Storybook 6, unless there are security issues). Instead, you can import the same utilities, but from the @storybook/react package. Additionally, the internals of composeStories and composeStory have been revamped, so the way a story is composed is way more accurate, and it's possible this issue doesn't happen there anymore.

Please do the following:

1. Upgrade to Storybook 7 if you haven't already
2. Uninstall @storybook/testing-react
3. Update your imports from @storybook/testing-react to @storybook/react

// Component.test.jsx
- import { composeStories } from '@storybook/testing-react';
+ import { composeStories } from '@storybook/react';

// setup-files.js
- import { setProjectAnnotations } from '@storybook/testing-react';
+ import { setProjectAnnotations } from '@storybook/react';

For now, I'll be closing this issue. Please, if even after migrating, you are still experiencing issues, report them in the Storybook monorepo.

Thank you so much for this journey!