reactjs - 如何使用 RTL 对具有复杂 reducer 的组件进行集成测试？

Question

我想在我的应用程序中引入带有 React 测试库的集成测试，但我遇到了一些高级障碍。

文档中的示例很棒，但我觉得没有一个示例中 redux 状态非常复杂并且由多个 API 组成。

我有一个要测试的组件，但它需要的数据可能来自 8+ API，所有这些 API 都存储在 reducer 的不同部分。它的子组件也有自己的 redux 连接器，这些连接器来自 reducer 中的其他地方，由其他 API 调用补充。

这是可以进行集成测试的东西吗，我的意思是不要模拟道具，设置真正的减速器，并使用 MSW 拦截所有需要的 API 调用？（与模拟组件的道具并模拟其 redux 连接的子组件）。

我担心工程师需要了解的远远超过为这些类型的非常复杂的案例编写集成测试所需的知识。

一个玩具推特示例：

我有一个<Tweets/>渲染<Tweet/>子组件的父组件。

我有一个来自 /tweets api 的推文对象。我有一个来自 /users api 的用户对象。

推文对象

{
  body: 'Hello World',
  userId: 123
}

一个用户对象

{
  id: 123,
  name: 'John Smith'
}

推文.jsx

const mapState = (state) => ({
  tweets: selectTweets(state)
});

const Tweets = ({tweets}) => {
  return (
    tweets.map(tweet => (
      <Tweet tweet={tweet} />
    ))
  );
}

推文.jsx

const mapState = (state, {tweet}) => ({
  user: selectUserById(state, { id: tweet.userId })
});

const Tweet = ({user, tweet}) => {
  return (
    <div>
      <div>{ tweet.body }</div>
      <div>{ user.name }</div>
    </div>
  );
}

虽然我觉得这是一个相当人为的例子，但我已经可以想象集成测试的困难，Tweets因为我还必须了解它的孩子Tweet需要来自/users. 一旦应用程序变得更加复杂，也许他们的孩子Tweet需要他们自己的来自 redux 的数据，我觉得集成测试变得异常困难。

我错过了什么吗？或者在这种情况下，我是否需要模拟以减少我正在测试的范围？

标签： reactjsreduxreact-testing-library