Jest / Storyshots测试组件中的响应元素

Posted 2023-02-20

我使用的是将有反应的用户界面与故事书和故事镜头结合在一起。我正在尝试了解如何通过故事书通过玩笑或故事镜头在Material-ui中测试响应元素

我的组件中有Hidden个元素，如下所示

<Hidden xsDown>
    displayText
</Hidden>

和大致类似的故事

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

我尝试过修改主题中的断点，这在通过故事书查看时会起作用。但是，无论我尝试了什么，Hidden元素都不会在快照中呈现。

我也尝试过不使用Hidden元素，并且如果className为true，则尝试使用display: none样式设置theme.breakpoints.down('xs')。这会在我的快照中生成元素，例如

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

但是此块中没有任何内容告诉我该元素正在xs屏幕上隐藏。

[似乎我应该能够以某种方式将xsDown元素中的Hidden切换为故事书中的true或false，以使Storyshot呈现或不呈现快照中的元素，但我没有运气来弄清楚。

我想我通常想知道大多数人如何通过玩笑来测试响应式UI。似乎我应该可以通过快照来完成此操作，但也许我缺少了一些内容。

感谢您的帮助

答案

目前，Storybook没有提供开箱即用的响应式UI测试库。