1

我正在使用结合故事书和故事镜头的反应材料 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为真或假，以便在我的快照中渲染或不渲染该元素，但我没有运气弄清楚这一点。

我想总的来说，我只是想知道大多数人是如何用玩笑来测试响应式 UI 的。似乎我应该能够通过快照来完成此任务，但也许我遗漏了一些东西。

谢谢你的帮助

4

1 回答 1

0

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

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

你选择哪一个真的取决于其他因素。

阅读有关色度的更多信息：https ://blog.hichroma.com/responsive-ui-component-testing-6d38b7e89dd4

于 2019-11-17T12:21:25.517 回答