title: enzyme testing - can't find button
body: <p>I have a fairly basic react component in a React app. I want to test that the "submitted" portion of the state changes from false to true when the form is submitted. Not particularly hard. But the enzyme test seems unable to find the button. Not sure if it has to do with the if/else statement. </p>
  
  <p>Here is the component: </p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import { questionSubmit } from '../actions/users';
  import { getCurrentUser, clearMessage } from '../actions/auth';
  
  export class AnswerForm extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              submitted: false
          }
      }
  
      handleFormSubmit(event) {
          event.preventDefault();
          this.setState({ submitted: true });
          this.props.dispatch(questionSubmit(this.answerInput.value, this.props.currentUsername));
          this.answerInput.value = '';
      }
  
      handleNextButton() {
          this.setState({ submitted: false });
          this.props.dispatch(getCurrentUser(this.props.currentUsername))
      }
  
      render() {
          let nextButton;
          let form;
          let message = &lt;p&gt;{this.props.message}&lt;/p&gt;
          if (this.state.submitted) {
              nextButton = &lt;button className="button-next" onClick={() =&gt; this.handleNextButton()}&gt;Next&lt;/button&gt;;
          }
          else {
              form = 
              &lt;form onSubmit={e =&gt; this.handleFormSubmit(e)}&gt;
                  &lt;input className="input-answer" ref={input =&gt; this.answerInput = input}
                      placeholder="Your answer" /&gt;
                  &lt;button id="button-answer" type="submit"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;;
          }
  
          return (
              &lt;div&gt;
                  &lt;p&gt;{this.props.message}&lt;/p&gt;
                  {form}
                  {nextButton}
              &lt;/div&gt;
          )
      }
  }
  
  export const mapStateToProps = (state, props) =&gt; { 
      return {
          message: state.auth.message ? state.auth.message : null, 
          currentUsername: state.auth.currentUser ? state.auth.currentUser.username : null,
          question: state.auth.currentUser ? state.auth.currentUser.question : null
      }
  }
  
  export default connect(mapStateToProps)(AnswerForm); 
  </code></pre>
  
  <p>Here is the test: </p>
  
  <pre><code>import React from 'react'; 
  import {AnswerForm} from '../components/answer-form'; 
  import {shallow, mount} from 'enzyme'; 
  
  describe('&lt;AnswerForm /&gt;', () =&gt; {
      it('changes submitted state', () =&gt; {
          const spy = jest.fn(); 
          const wrapper = mount(&lt;AnswerForm dispatch={spy}/&gt; );
          wrapper.instance(); 
          expect(wrapper.state('submitted')).toEqual(false);
          const button = wrapper.find('#button-answer');
          button.simulate('click') 
          expect(wrapper.state('submitted')).toEqual(true); 
      }); 
  }); 
  </code></pre>
  
  <p>I get this error when I try running this test: </p>
  
  <pre><code>   expect(received).toEqual(expected)
  
      Expected value to equal:
        true
      Received:
        false
  
        at Object.it (src/tests/answer-form.test.js:24:44)
            at &lt;anonymous&gt;
        at process._tickCallback (internal/process/next_tick.js:188:7)
  </code></pre>
  
  <p>Any ideas? It's a pretty straight shot other than the if statement. Not sure what is going on here. </p>