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

x7rlezfr 于 4个月前发布在 React

关注(0)|答案(9)|浏览(52)

描述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>
)

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

storybook

来源：https://github.com/storybookjs/storybook/issues/20026

9条答案

按热度按时间

ymzxtsji1#

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

赞(0）回复(0）举报 4个月前

zengzsys2#

听起来不错！

赞(0）回复(0）举报 4个月前

gojuced73#

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

赞(0）回复(0）举报 4个月前

ktecyv1j4#

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

赞(0）回复(0）举报 4个月前

j13ufse25#

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

赞(0）回复(0）举报 4个月前

xfb7svmp6#

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

赞(0）回复(0）举报 4个月前

mbzjlibv7#

感谢确认@csantos1113!cc @yannbf

赞(0）回复(0）举报 4个月前

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更改为非必需时，错误消失。

赞(0）回复(0）举报 4个月前

ssgvzors9#

CC @kasperpeulen

赞(0）回复(0）举报 4个月前

我来回答

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

描述bug

重现问题

系统信息

其他上下文

可能的修复方案

9条答案

相关问题

热门标签

最新问答