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

Posted 2023-02-19

【中文标题】Jest/Storyshots 测试我的组件中的响应式元素

【英文标题】：Jest/Storyshots test responsive elements in my components

【发布时间】：2019-12-22 08:25:02

【问题描述】：

我正在使用结合了故事书和故事镜头的反应材料 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 屏幕上。

似乎我应该能够以某种方式在故事书中将 Hidden 元素中的 xsDown 切换为 true 或 false 以在我的快照中渲染或不渲染该元素，但我没有运气弄清楚这一点出去。

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

感谢您的帮助

【参考方案1】：

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

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

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

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