Question

我正在使用结合了故事书和故事镜头的React ui。我试图了解如何通过故事书通过玩笑或故事情节来测试Material-UI中的响应元素

我的组件中有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切换为故事书中的true或false，以使storyshot呈现或不呈现快照中的元素，但是我正在没办法弄清楚。

我想通常来说，我只是想知道大多数人如何用笑话来测试响应式UI。看来我应该可以用快照来完成此操作，但也许我遗漏了一些东西。

感谢您的帮助

Answer 1

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

但是，您可以使用其他库，例如Chroma（Storybook背后的公司）或React screenshot test。

您选择的哪一个确实取决于其他因素。