[Bug]:使用@storybook/react的composeStories函数无法处理具有必需属性的组件,

x7rlezfr  于 5个月前  发布在  React
关注(0)|答案(9)|浏览(72)

描述bug

这实际上是 storybookjs/testing-react#4 的回归,影响了迁移到使用 @storybook/react 的用户。

重现问题

  • 无响应*

系统信息

npmPackages:
    @storybook/addon-a11y: ^7.0.0-alpha.54 => 7.0.0-alpha.54
    @storybook/addon-actions: ^7.0.0-alpha.54 => 7.0.0-alpha.54
    @storybook/addon-docs: ^7.0.0-alpha.54 => 7.0.0-alpha.54
    @storybook/addon-essentials: ^7.0.0-alpha.54 => 7.0.0-alpha.54
    @storybook/addon-links: ^7.0.0-alpha.54 => 7.0.0-alpha.54
    @storybook/addon-storysource: ^7.0.0-alpha.54 => 7.0.0-alpha.54
    @storybook/node-logger: ^7.0.0-alpha.54 => 7.0.0-alpha.54
    @storybook/react-vite: 7.0.0-alpha.54 => 7.0.0-alpha.54

其他上下文

您可以像解决 storybookjs/testing-react#4 一样解决此问题,并使用 composeStory

可能的修复方案

我还没有完全测试过这个,我的 TypeScript 知识也不太好,但对我来说问题在于 Store_CSFExports 类型中的 Args 的使用。
storybook/code/lib/types/src/modules/composedStory.ts
第19行至第23行的代码:
| | exporttypeStore_CSFExports<TRendererextendsRenderer=Renderer>={ |
| | default: ComponentAnnotations<TRenderer,Args>; |
| | __esModule?: boolean; |
| | __namedExportsOrder?: string[]; |
| | }; |
也许修复方法是允许在这里将 Args 作为泛型:

type Store_CSFExports<TRenderer extends Renderer = Renderer, TArgs extends Args = Args> = {
    default: ComponentAnnotations<TRenderer, TArgs>;
    __esModule?: boolean;
    __namedExportsOrder?: string[];
};

并更新 composeStories 为:

function composeStories<TModule extends Store_CSFExports<ReactRenderer, ComponentProps>>(
  csfExports: TModule,
  projectAnnotations?: ProjectAnnotations<ReactRenderer>
)

但不确定这会产生什么影响

ymzxtsji

ymzxtsji1#

@kasperpeulen ,我们有时间可以看一下这个吗?

gojuced7

gojuced73#

大家好,这不应该被添加到https://github.com/orgs/storybookjs/projects/8/views/1中吗?
我认为这应该成为7.0版本的阻止因素,否则我们所有使用.playcomposeStories的人都会有破坏性的经验。

ktecyv1j

ktecyv1j4#

我们将致力于改进composeStories,作为7.1的一部分。

j13ufse2

j13ufse25#

我们最近不是已经解决了这个问题吗?

xfb7svmp

xfb7svmp6#

这对我来说已经不是问题了。
它可能已经在 7aa0042 上修复了。

mbzjlibv

mbzjlibv7#

感谢确认@csantos1113!cc @yannbf

nxowjjhe

nxowjjhe8#

当使用装饰器时,此问题仍然存在,版本为8.0.8
Hello.tsx

const Hello = (props: { text: string }) => <div>{props.text}</div>;

export default Hello;

Hello.stories.tsx

import { Meta, StoryObj } from '@storybook/react';
import Hello from '../Hello';

export default {
  title: 'Hello',
  component: Hello,
  decorators: [
    (Story, { parameters }) => (
      <div style={{ color: `${parameters.color}` }}>
        <Story />
      </div>
    )
  ]
} satisfies Meta<typeof Hello>;

type Story = StoryObj<typeof Hello>;

export const HelloStory: Story = {};
HelloStory.storyName = 'Hello';
HelloStory.args = {
  text: 'Hello World'
};
HelloStory.parameters = {
  color: 'blue'
};

Hello.test.tsx

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

const { HelloStory } = composeStories(stories);

test('Hello World renders', () => {
  render(<HelloStory />);
  expect(screen.getByText('Hello World')).toBeVisible();
});

这在Hello.test.tsx中抛出错误。

Property 'HelloStory' does not exist on type 'Omit<StoriesWithPartialProps<ReactRenderer, Store_CSFExports<ReactRenderer, any>>, keyof Store_CSFExports>'.

当将Hello.tsx中的prop更改为非必需时,错误消失。

相关问题