我正在使用 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__',
}),
});