title: React/Enzyme Component functions are not updating the state
body: <p>I have a component that works on localhost. If you input a letter of a champion, the onInputHandler(input) changes the state of the component into a valid champion's name. Unfortunately, when I am testing with enzyme, the state of a component never changes (stays default). I would be glad for any advice. When I set this.statechampionsList with an array, the result is the same. Normally the array is filled with getChampionsList() after componentDidMount().</p>
  
  <pre><code>        export class ChooseChampion extends React.Component {
      constructor() {
          super();
          this.state = {
              championSelected: "Choose champion",
              championsList: []
          };
  
          this.onInputHandler = this.onInputHandler.bind(this);
          this.getFilteredChampion = this.getFilteredChampion.bind(this);
      }
  
      componentDidMount() {
          this.getChampionsList();
      }
  
      getChampionsList = () =&gt; {
          fetch('/champions-list')
              .then(res =&gt; res.json())
              .then(champions =&gt; this.setState({ championsList: champions }))
      }
  
      onInputHandler(event) {
          if (event.target.value === "") {
              this.setState({
                  championSelected: "Choose champion"
              });
          } else {
              const input = event.currentTarget.value;
              const filteredChampion = this.getFilteredChampion(input)
              this.setState({
                  championSelected: filteredChampion
              });
          }
      }
  
      getFilteredChampion(input) {
          let oneFilteredChampion = this.state.championsList.find(champion =&gt; champion.toLowerCase().includes(input.toLowerCase()))
          if (oneFilteredChampion) {
              return oneFilteredChampion;
          } else {
              return "Wrong name!"
          }
      }
  
      render() {
          return (
              &lt;div className="choose-champion-container"&gt;
  
                  &lt;div className="role-and-caption inactive"&gt;
                      &lt;img className="role-icon" src={require(`../assets/images/${this.props.lane}_icon.png`)} alt={this.props.lane} /&gt;
                      &lt;span className="role-caption"&gt;{this.props.lane}&lt;/span&gt;
                  &lt;/div&gt;
  
                  &lt;div className="champion-avatar-and-caption"&gt;
                      &lt;ChampionAvatar currentChampion={this.state.championSelected} championsList={this.state.championsList} /&gt;
                      &lt;ChampionCaption currentChampion={this.state.championSelected} championsList={this.state.championsList} /&gt;
                  &lt;/div&gt;
  
                  &lt;div className="search-container"&gt;
                      &lt;button type="submit" className="search-button"&gt;&lt;img src={SearchIcon} className="search-icon" alt="Search" /&gt;&lt;/button&gt;
                      &lt;input type="text" placeholder="Find champion..." name="search" onInput={this.onInputHandler} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      };
  }
  </code></pre>
  
  <p>Here is my testing statement:</p>
  
  <pre><code>const lanes = ["Top", "Jungle", "Middle", "Bottom", "Support"]
  const app = &lt;ChooseChampion lane={lanes[Math.floor(Math.random() * (5))]} /&gt;;
  
  it('Should change the state after change the input value', () =&gt; {
    const newValue = 'Ahri';
    const wrapper = mount(app);
    const input = wrapper.find('input');
  
    input.value = newValue;
  
    wrapper.update();
    expect(input.value).toEqual(newValue);
    expect(wrapper.state('championSelected')).toEqual(newValue);
  });
  </code></pre>