Question

我有一个轮播组件，正在用Jest和Enzyme测试。该组件接收任何类型的元素作为子元素。在touchMove事件中，根据触摸的方向，活动的孩子也会相应地更改。

是否有一种方法可以在不依赖于实现的情况下测试组件的行为？

Answer 1

您可以执行以下操作：将子级包装在容器中，然后在活动容器中设置active className。

// inside your carousel component's render function
{this.props.carouselItems.map((child, i) => 
  <div 
    className={
      'container' + 
      (i === this.state.activeIndex ? ' active' : '')
    }
  >
    {child}
  </div>
)}

然后，在执行各种操作/状态更改时，使用选择器，用酶验证正确的容器具有active类。

这样，无论子级组件到底是什么都没有关系，您已经从针对特定子级的具体实现中抽象出了“活动性”测试。

请注意，上述使用CSS类的代码只是一个非常简单的示例-您也可以通过对容器组件使用active属性，甚至将其传递给容器组件，以更“反应”的方式对组件进行操作child做某事，等等。无论您的用例需要什么。重要的概念是，您需要以某种方式将每个child的容器组件标记为“活动”，以便酶可以测试它而不必测试child本身的任何具体实现。

还请注意，单元测试本质上确实在某种抽象级别上测试实现细节。他们必须。使用此方法，您可以在子组件的特定实现之上进行抽象，但是您仍然仅基于此容器组件模式测试“活动性”的具体机制。如果该active类因为CSS损坏而无法执行任何操作，或者您的child的使用方式损坏了怎么办？

在测试UI组件时，单元测试的用途非常有限，因为从根本上讲，您不能超出测试具体实现细节的范围。即使使用诸如Jest快照之类的工具，您也只是在查看标记是否匹配，而不是首先查看标记是否正确或在不同浏览器中是否正确显示。对于UI，您确实需要将单元测试与自动化功能结合在一起，当然还要进行手动测试，以确保您确实在测试该组件是否适用于 user 。

有没有办法测试React Component子项中的更改

1 个答案: