1

我正在使用 Jest + Storyshots 来测试我的(React)web 应用程序,但即使我在故事中指定了不同的视口,组件也始终呈现在 1024 像素宽的视口中。我是在错误地使用 Storybook 还是一个(已知的)错误?目前我无法正确测试响应组件。

故事的代码:

const Template: Story<MyComponentProps> = (args) => (
    <MyComponent{...args} />
);

export const Mobile = Template.bind({});
Mobile.parameters = {
    viewport: {
        viewports: mobileViewports,
        defaultViewport: 'iPhone5',
    },
};

视口示例:

export const iPhone5 = {
    name: 'iPhone 5/SE',
    styles: {
        width: '320px',
        height: '568px',
    },
    type: 'mobile',
};

我的故事镜头配置:

initStoryshots({
    test: multiSnapshotWithOptions({
        createNodeMock: (element: unknown) => element,
    }),
    stories2snapsConverter: new Stories2SnapsConverter({
        snapshotsDirName: './__snapshots__',
    }),
});
4

0 回答 0