How to use RTL to do integration testing on component with complex reducer?

Viewed 199

I want to introduce integration testing with React Testing Library into my app, but I'm running into some high-level roadblocks.

The examples in documentation are great, but I feel like there isn't an example where the redux state is very complicated and is hydrated from several APIs.

I have a component I want to test, but the data it needs comes from probably 8+ APIs, all stored in different parts of the reducer. Its child components also have their own redux connectors that come from other places in the reducer which are hydrated by other API calls.

Is this something that can be integration tested, and by that I mean not mocking the props, setting up a real reducer, and using MSW to intercept all the API calls needed? (vs mocking the props of the component and mocking its redux connected child components).

I am concerned that an engineer would need to understand far more than what should be necessary to write an integration test for these types of very complicated cases.

A toy Twitter example:

I have a parent <Tweets/> component that renders <Tweet/> children.

I have a tweet object that comes from the /tweets api. I have a user object that comes from the /users api.

A tweet object

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

A user object

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

Tweets.jsx

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

const Tweets = ({tweets}) => {
  return (
    tweets.map(tweet => (
      <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>
  );
}

Although I feel this is a fairly contrived example, I can already imagine difficulties integration testing Tweets since I must also understand that its child Tweet requires data from /users. Once the app comes more complex, where perhaps the children of Tweet need their own data from redux, I feel like integration testing becomes unreasonably difficult.

Am I missing something? Or in cases like this, do I need to mock in order to decrease the scope of what I am testing?

0 Answers
Related