Storyshots don't respect viewport's width

641 Views Asked by At

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__',
    }),
});
0

There are 0 best solutions below