title: How can I mock the window.alert method in jest?
body: <p>I have the following React component:</p>
  
  <pre><code>class Form extends React.Component {
  
     constructor(props) {
        super(props);
        this.state = this._createEmptyTodo();
     }
  
     render() {
  
        this.i18n = this.context;
  
        return (
           &lt;div className="form"&gt;
              &lt;form onSubmit={this._handleSubmit.bind(this)}&gt;
  
                 &lt;input
                    placeholder={this.i18n.placeholders.addTitle}
                    type="text"
                    value={this.state.title}
                    onChange={this._handleTitleChange.bind(this)}&gt;&lt;/input&gt;
  
                 &lt;textarea
                    placeholder={this.i18n.placeholders.addDescription}
                    value={this.state.description}
                    onChange={this._handleDescriptionChange.bind(this)}&gt;&lt;/textarea&gt;
  
                 &lt;button&gt;{this.i18n.buttons.submit}&lt;/button&gt;
              &lt;/form&gt;
           &lt;/div&gt;
        );
     }
  
     _handleTitleChange(e) {
        this.setState({
           title: e.target.value
        });
     }
  
     _handleDescriptionChange(e) {
        this.setState({
           description: e.target.value
        });
     }
  
     _handleSubmit(e) {
  
        e.preventDefault();
  
        var todo = {
           date: new Date().getTime(),
           title: this.state.title.trim(),
           description: this.state.description.trim(),
           done: false
        };
  
        if (!todo.title) {
           alert(this.i18n.errors.title);
           return;
        }
  
        if (!todo.description) {
           alert(this.i18n.errors.description);
           return;
        }
  
        this.props.showSpinner();
        this.props.actions.addTodo(todo);
        this.setState(this._createEmptyTodo());
     }
  
     _createEmptyTodo() {
        return {
           "pkey": null,
           "title": "",
           "description": ""
        };
     }
  }
  </code></pre>
  
  <p>And the related test:</p>
  
  <pre><code>const i18nContext = React.createContext();
  Form.contextType = i18nContext;
  
      describe('The &lt;Form&gt; component', () =&gt; {
  
         var wrapper;
         var showSpinner;
         var actions = {}
  
         beforeEach(() =&gt; {
            showSpinner = jest.fn();
            actions.addTodo = jest.fn();
            wrapper = mount(&lt;i18nContext.Provider value={i18n["en"]}&gt;
               &lt;Form
                  showModalPanel={showSpinner}
                  actions={actions} /&gt;
            &lt;/i18nContext.Provider&gt;);
         });
  
         test("validate its input", () =&gt; {
            window.alert = jest.fn();
            wrapper.find("button").simulate("click");
            expect(window.alert.mock.calls.length).toBe(1);//&lt;&lt;&lt; this FAILS!
         });
      });
  </code></pre>
  
  <p>This form, when the button gets clicked, it simply alerts a message using <code>alert</code>.</p>
  
  <p>Now when I run the test I get this:</p>
  
  <pre><code>expect(received).toBe(expected) // Object.is equality
  
  Expected: 1
  Received: 0
  </code></pre>
  
  <p>Which is a failure because the mock does not get called apparently. But I promise you that the form component does alert a message when clicking on its button. </p>
  
  <p>I suspect that, for some reasons, the mocked <code>window.alert</code> does not get used by the <code>Form</code> component when the click is performed programmatically using enzyme.</p>
  
  <p>Anyone?</p>