Jest/Storyshots тестирует адаптивные элементы в моих компонентах

Question

Я использую реагирующий материал в сочетании с сборником рассказов и историями. Я пытаюсь понять, как я могу тестировать адаптивные элементы в материале-интерфейсе с помощью шутки или сюжетов с помощью сборника рассказов

у меня есть Hidden элементы в моих компонентах, таких как следующие

<Hidden xsDown>
    {displayText}
</Hidden>

и истории, которые выглядят примерно как

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

Я попытался изменить точки останова в своей теме, что оказывает влияние при просмотре в сборнике рассказов. Однако независимо от того, что я пытался, Hidden элемент никогда не отображается в моих снимках.

Я также пытался не использовать Hidden элемент и попытался className стили для установки display: none если theme.breakpoints.down('xs') правда. Это производит элемент в моем снимке, как

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

но ничто в этом блоке не говорит мне, что элемент скрыт на xs экраны.

Похоже, я должен быть в состоянии как-то переключаться xsDown в Hidden элемент должен быть истинным или ложным в сборнике рассказов, чтобы рендеринг в сторишот выполнялся или не отображался элемент в моем снимке, но мне не повезло с этим разобраться.

Я думаю, в общем, мне просто интересно, как большинство людей с шуткой тестируют адаптивные интерфейсы. Кажется, что я должен быть в состоянии сделать это с помощью снимков, но, возможно, я что-то упустил.

Спасибо за вашу помощь

Answer 1

На данный момент Storybook не предоставляет библиотеку адаптивного тестирования пользовательского интерфейса из коробки.

Однако вы можете использовать дополнительную библиотеку, такую ​​как Chroma (компания, стоящая за Storybook) или тест снимков экрана React.

Какой из них вы выберете, действительно зависит от других факторов.

Подробнее о Chroma: https://blog.hichroma.com/responsive-ui-component-testing-6d38b7e89dd4