Question

我正在构建一个响应式类别栏，将所有不可见的类别放在下拉列表中。所有这些类别名称都具有非固定宽度（取决于文本）。我正在使用Jest＆amp;用于测试的酶。

基本上，组件需要做的是计算所有不适合可见栏的类别，并填充一个名为invisibleCategories的组件状态的数组来填充下拉数据。

哪种单元测试更好？由于逻辑数据和状态取决于可视环境，因此我不确定设置测试的正确方法。您是否将组件安装在固定宽度div（即1000px）中，设置类别列表（即类别1，类别2，长类别3，短4 ...），知道哪些类别应该在给定环境中可见，测试一下吗？或者有一个更动态的模式来测试依赖于可视化数据的逻辑？

Answer 1

我不知道是否可以通过Jest完成类似的事情，希望其他人可以在Jest中提供解决方案，但我认为这种类型的所有测试框架都有限制，当涉及到它时它们可以做什么ui。

您可以考虑使用除Jest之外的其他测试框架，该框架专门用于测试UI。我喜欢storybook，它的想法是为你的组件创建一堆测试用例。然后，您点击测试，观察它们并确保它们看起来都正确。它不是自动化的，但是快速确保没有任何组件在视觉上损坏是非常有帮助的。

在你的例子中，你会像这样创建一个“故事”：

storiesOf('CategoryBar', module)
.add('Few items', () => (
  <CategoryBar>
    <Item/> <Item/>
  </Category>
))
.add('To many items', () => (
  <CategoryBar>
    <Item/> <Item/> <Item/> <Item/>
  </CategoryBar>
))

然后，您将在故事书应用程序中获得两个选项卡，可用于快速确保一切按预期工作。

抱歉，我没有办法在Jest中这样做。

如何单元测试依赖于可视数据的React组件

1 个答案: