Jest/Storyshots test responsive elements in my components

Question

I am using react material ui combined with storybook and storyshots. I am trying to understand how I can test responsive elements in material-ui with jest or storyshots via storybook

I have Hidden elements in my components like the following

<Hidden xsDown>
    {displayText}
</Hidden>

and stories that look roughly like

storiesOf("Card", module)
    .addDecorator(muiTheme(myTheme))
    .add("options bar", () => (
        <Card {...someProps}/>
    ));

I have tried modding the breakpoints in my theme, which has an effect when viewing through storybook. However no matter what I have tried, the Hidden element never renders in my snapshots.

I have also tried not using the Hidden element and tried className styles to set display: none if theme.breakpoints.down('xs') is true. This produces the element in my snapshot like

<h6
   className="MuiTypography-root CardOptions-label-1170 MuiTypography- 
 subtitle2"
>
   View Route
</h6>

but nothing in this block tells me that the element is being hidden on xs screens.

It seem like I should be able to somehow toggle xsDown in the Hidden element to be true or false in storybook to have storyshot render or not render the element in my snapshot, but I am having no luck figuring that out.

I guess in general I am just wondering how most people are testing responsive UIs with jest. It seems like I should be able to accomplish this with snapshots but maybe I am missing something.

Thanks for your help

Answer 1

At the moment Storybook does not provide a responsive UI testing library out of the box.

However, you can use an additional library such as Chroma (company behind Storybook) or React screenshot test.

Which one you choose really depends on other factors.

Read more on Chroma: https://blog.hichroma.com/responsive-ui-component-testing-6d38b7e89dd4