React Redux 应用程序集成测试的最佳实践？

Question

我正在尝试为 React-Redux 应用程序设置测试。包括 Redux Docs, and the main contributor to react-testing-library 在内的大多数资源都主张将重点放在集成测试上，并且应尽可能将 Redux 代码视为实现细节。这很酷，但我在实践中很难做到这一点。

我在集成测试中发现的大多数示例都设置了一个组件，您可以在其中观察直接单元中的效果。但是在我的应用程序的几个地方，我有一些组件可以将调度发送到我的商店，这会导致在应用程序的另一部分重新呈现。为了说明我的问题，我在下面制作了一个简化的组件树，我想单击 AddToListButton 以将 Element1 添加到 List。

如果 Redux 是一个实现细节，我如何实际测试单击按钮会导致更新而不渲染（或多或少）整个应用程序？我了解如何进行单元测试和端到端测试，但不确定如何实施集成测试。

<App>
  <Search>
    <SearchResult>
      <Element1>
        <AddToListButton /> //I WANT TO TEST THIS BUTTON
      </Element1>
      <Element2>
        <AddToListButton />
      </Element2> 
    </SearchResult>
  </Search>
  <List>
    <Element1 /> // WHEN THE BUTTON IS PRESSED THE ELEMENT SHOULD GO HERE
  </List>
</App>

Answer 1

您实际上会渲染（或多或少）整个应用程序 - 或者至少渲染所有涉及的组件。这几乎就是集成测试的重点。

与端到端测试的唯一区别是不涉及其他服务，您可以也可以只对应用程序的某些部分进行集成测试，但这并不意味着您仅对应用程序的某些部分进行集成测试。

React Redux 应用程序集成测试的最佳实践？

Best practice for integration testing in React Redux app?

reactjs

redux

react-testing-library