@storybook/testing-react type errors

[rexkenley]

Describe the bug
I am getting the following ts errors with my code while trying to use the new composeStories.

I was able to "fix" it by using casting, but I don't think this is right.

What should I do?

Storybook version: 6.4.4

[yannbf]

Hey @rexkenley thanks for opening this issue! Could you provide an example of how your stories look like? Thanks!

[robcaldecott]

I am seeing something very similar with with 6.4.

This story works (if I use Meta):

import { Meta, ComponentStory } from "@storybook/react";
import { Logo } from ".";

export default {
  component: Logo,
} as Meta;

const Template: ComponentStory<typeof Logo> = (args) => <Logo {...args} />;

export const Default = Template.bind({});
Default.args = {
  width: 200,
  fill: "#3C576B",
};

This story does not work (using ComponentMeta):

import { ComponentStory, ComponentMeta } from "@storybook/react";
import { Logo } from ".";

export default {
  component: Logo,
} as ComponentMeta<typeof Logo>;

const Template: ComponentStory<typeof Logo> = (args) => <Logo {...args} />;

export const Default = Template.bind({});
Default.args = {
  width: 200,
  fill: "#3C576B",
};

The test import looks like this:

import { render, screen } from "@testing-library/react";
import { composeStories } from "@storybook/testing-react";
import * as stories from "./Logo.stories";

// TS2345
const { Default } = composeStories(stories);

Full error when using ComponentMeta:

Argument of type 'typeof import("/Users/caldecor/Projects/storybook-64/src/Logo/Logo.stories")' is not assignable to parameter of type 'StoryFile'.
  Types of property 'default' are incompatible.
    Type 'ComponentMeta<({ height, width, fill }: LogoProps) => Element>' is not assignable to type 'Meta<Args>'.
      Type 'ComponentMeta<({ height, width, fill }: LogoProps) => Element>' is not assignable to type 'BaseAnnotations<ReactFramework, Args>'.
        Types of property 'decorators' are incompatible.
          Type 'DecoratorFunction<ReactFramework, LogoProps>[] | undefined' is not assignable to type 'DecoratorFunction<ReactFramework, Args>[] | undefined'.
            Type 'DecoratorFunction<ReactFramework, LogoProps>[]' is not assignable to type 'DecoratorFunction<ReactFramework, Args>[]'.
              Type 'DecoratorFunction<ReactFramework, LogoProps>' is not assignable to type 'DecoratorFunction<ReactFramework, Args>'.
                Types of parameters 'c' and 'c' are incompatible.
                  Type 'StoryContext<ReactFramework, Args>' is not assignable to type 'StoryContext<ReactFramework, LogoProps>'.
                    Type 'StoryContext<ReactFramework, Args>' is not assignable to type '{ component?: ComponentType<any> | undefined; subcomponents?: Record<string, ComponentType<any>> | undefined; parameters: Parameters; initialArgs: LogoProps; argTypes: StrictArgTypes<...>; }'.
                      Types of property 'initialArgs' are incompatible.
                        Type 'Args' is not assignable to type 'LogoProps'.ts(2345)

[rexkenley]

robcaldecott pretty much nailed it. After I implemented what he did, I got new ts errors.

[phenrique7]

I'm experienced the same type errors when I upgraded sb to 6.4. My workaround was to use Meta instead of ComponentMeta, as @robcaldecott reported.

[yannbf]

Hey @phenrique7 could you show the example of the component that fails? Is that component typed in any way or does it look like this?

// no types at all, just auto-inferred JSX.Element
const MyComponent = () => <div>HelloWorld</div>

[phenrique7]

@yannbf, I created a reproducible repo: https://github.com/phenrique7/storybook-testing-react-type-errors. Hope this can help.

[rexkenley]

@yannbf, I didn't make any changes other than applying the composeStories.

Here is the repo: https://github.com/rexkenley/rollupError
The story is here https://github.com/rexkenley/rollupError/tree/main/stories/components/Timesheet

[yannbf]

Thanks @phenrique7 and @rexkenley for the repros, that helps me a ton!!
I'll work on it likely tomorrow and release a fix as soon as possible, and make sure to test the fix on both your repos.

have a great weekend!

[yannbf]

Hey everyone, I released a fix in v1.2.1 that should address this issue.

The repros you provided were super helpful and I made sure to test in each one of them.

@rexkenley I noticed a few things in your repo and I'll make a PR explaining the correct usage of this library!

@phenrique7 I saw the easter egg there 😂 Muito obrigado!

[rexkenley]

@yannbf Thank you so much to fixing this so quickly. I am looking forward to the correct usage link.

[yannbf]

@yannbf Thank you so much to fixing this so quickly. I am looking forward to the correct usage link.

No worries, thanks for using the library!

I opened the PR at rexkenley/rollupError#1