title: How to test onclick api call with react
body: <p>I have 3 react components and when the user clicks on USER_CARD in header then an api is called and the response is displayed in TwitterList component. I have no experience with unit testing, so what are the unit test needs to be done and how? I have read about enzyme and jest but not sure about the implementation.</p>
  
  <p>Fews things I understand here that I need to test the click and also check if the api is responding with any data or not.</p>
  
  <p>Please help me understand how to do this?</p>
  
  <pre><code>    import React ,{Component}from 'react'
  
      // Import all contianers here
      import Header from './containers/header'
      import TweetList from './containers/tweetlist'
  
      // Import all services here
      import Http from './services/http'
  
      import './App.css'
  
      class App extends Component {
  
        constructor() {
          super()
  
          this.state = {
            data: [],
            isTop: true,
            userName: ''
          }
        }
  
        _getUserTweets = (user) =&gt; {
          console.log(user)
          if (user !== undefined &amp;&amp; user !== '') {
            Http.get('/' + user)
            .then(response =&gt; {
              if (response.data.length &gt; 0) {
                this.setState((prevState) =&gt; {
                  return {
                    ...prevState,
                    data: response.data,
                    userName: user
                  }
                })
              }
            })
            .catch(error =&gt; {
              console.log(error)
            })
          } else {
            console.log('No user found!!')
          }
        }
  
        render() {
          const {data, userName} = this.state
          return (
            &lt;div className="app_container"&gt;
              &lt;Header getUserTweets={this._getUserTweets} /&gt;
              &lt;TweetList data={data} user={userName} /&gt;
            &lt;/div&gt;
          );
        }
      }
  
      export default App;
  
  
  
      import React, {Component} from 'react'
  
      class TweetList extends Component {
  
          constructor() {
              super()
  
              this.state = {
                  tweets: []
              }
          }
  
          componentWillReceiveProps(nextProps) {
  
              if (nextProps.data.length &gt; 0) {
                  this.setState((prevState) =&gt; {
                      return {
                          ...prevState,
                          tweets: nextProps.data
                      }
                  })
              }
          }
  
          render() {
              const {tweets} = this.state
              return (
                  &lt;div&gt;
                      {
                          tweets.length &gt; 0
                          &amp;&amp;
                          tweets.map((currentValue, index) =&gt; {
                              return (
                                  &lt;p&gt;{currentValue.full_text}&lt;/p&gt;
                              )
                          })
                      }
                  &lt;/div&gt;
              )
          }
      }
  
      export default TweetList
  
  
  
      import React, {Component} from 'react'
      import './style.css'
  
      const USER_CARD = ({userName, onClickHandler}) =&gt; {
          return (
              &lt;p onClick={() =&gt; onClickHandler(userName)}&gt;{userName}&lt;/p&gt;
          )
      }
  
      class Header extends Component {
  
          componentWillMount() {
              if (process.env.REACT_APP_USER_LIST !== undefined &amp;&amp; process.env.REACT_APP_USER_LIST.split(',').length &gt; 0) {
                  this.props.getUserTweets(process.env.REACT_APP_USER_LIST.split(',')[0])
              }
          }
  
          _getUserTweets = (userName) =&gt; {
              this.props.getUserTweets(userName)
          }
  
          render() {
              return(
                  &lt;div className="header_container"&gt;
                      {process.env.REACT_APP_USER_LIST !== undefined
                      &amp;&amp;
                      process.env.REACT_APP_USER_LIST.split(',').length &gt; 0
                      &amp;&amp;
                      process.env.REACT_APP_USER_LIST.split(',')
                      .map((currentValue, index) =&gt; {
                          return (
                              &lt;USER_CARD userName={currentValue} key={`user-card-${index}`}
                                  onClickHandler={this._getUserTweets} /&gt;
                          )
                      })}
                  &lt;/div&gt;
              )
          }
      }
  
      export default Header
  
  If the user click on the USER_CARD in Header component then we call an api to get the results.
  
  What are the different unit testing that I can do and how to do it? 
  </code></pre>