我正在使用结合故事书和故事镜头的反应材料 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 的。似乎我应该能够通过快照来完成此任务,但也许我遗漏了一些东西。
谢谢你的帮助