I'm using Jest + Storyshots to test my (React) webapp, but the components are always rendered in a 1024px-wide viewport, even if I specify a different viewport in the story. Am I using Storybook the wrong way or is it a (known) bug ? Currently I can't test responsive components properly.
The code for a story:
const Template: Story<MyComponentProps> = (args) => (
<MyComponent{...args} />
);
export const Mobile = Template.bind({});
Mobile.parameters = {
viewport: {
viewports: mobileViewports,
defaultViewport: 'iPhone5',
},
};
An example of viewport:
export const iPhone5 = {
name: 'iPhone 5/SE',
styles: {
width: '320px',
height: '568px',
},
type: 'mobile',
};
My storyshot config:
initStoryshots({
test: multiSnapshotWithOptions({
createNodeMock: (element: unknown) => element,
}),
stories2snapsConverter: new Stories2SnapsConverter({
snapshotsDirName: './__snapshots__',
}),
});