Reactjs 如何使用RTL对带有复杂减速器的组件进行集成测试？

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

文档中的示例非常好，但我觉得没有一个示例中的redux状态非常复杂，并且是由多个api合成的

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

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

我担心工程师需要了解的远不止为这些类型的非常复杂的情况编写集成测试所需的内容

一个玩具推特示例：

我有一个父级

组件，用于呈现

子级

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

tweet对象

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

用户对象

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

Tweets.jsx

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

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

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>
  );
}

const-mapState=（state）=>({
tweets：选择tweets（状态）
});
常量Tweets=（{Tweets}）=>{
返回(
tweets.map（tweet=>(
))
);
}

Tweet.jsx

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

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

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>
  );
}

const-mapState=（state，{tweet}）=>({
用户：selectUserById（状态，{id:tweet.userId}）
});
常量Tweet=（{user，Tweet}）=>{
返回(
{tweet.body}
{user.name}
);
}

虽然我觉得这是一个相当做作的例子，但我已经可以想象集成测试

Tweets

的困难，因为我还必须了解它的子

Tweet

需要来自

/users

的数据。一旦应用程序变得更加复杂，Tweet的孩子们可能需要他们自己的redux数据，我觉得集成测试变得异常困难

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