有没有办法测试 React Component children 的变化

Question

我有一个轮播组件，我正在使用 Jest 和 Enzyme 对其进行测试。该组件接收 children 任何类型的元素。在 touchMove 事件中，根据触摸的方向，活动 child 会相应更改。

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

Answer 1

您可以做一些事情，例如将 children 包裹在容器中，然后在活动容器上设置 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>
)}

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

这样，children 组件实际上是什么并不重要，您已经从具有特定 children 的具体实现中抽象出 'activeness' 的测试。

请注意上面使用 CSS classes 的代码只是一个非常简单的示例 - 您还可以通过使用 [=11] 以更 'React' 的方式使用组件=] prop 到容器组件，甚至将它传递给 child 来做一些事情，等等。无论你的用例需要什么。重要的概念是，您以某种方式为 'activeness' 标记每个 child 的容器组件，以便 Enzyme 可以对其进行测试，而无需测试 child 本身的任何具体实现。

另请注意，单元测试本质上是在某种抽象级别上测试实现细节。他们必须。使用此方法，您可以在 child 组件的特定实现级别之上进行抽象，但您仍然只是基于此容器组件模式测试 'activeness' 的具体机制。如果 active class 只是因为 CSS 坏了，或者你的 child 使用它的方式坏了，怎么办？

在测试 UI 组件时，单元测试的用处非常有限，因为您基本上无法超越具体实现细节的测试。即使使用 Jest 快照之类的东西，您也只是在查看标记是否匹配，而不是标记是否首先正确或在不同浏览器中正确显示。对于 UI，您确实需要将单元测试与自动化功能测试结合起来，当然还有手动测试，以真正确保您确实在测试该组件是否适用于用户。

有没有办法测试 React Component children 的变化

Is there a way to test change in children of React Component

children

reactjs

jestjs

enzyme