title: How to mock or assert whether window.alert has fired in React & Jest with typescript?
body: <p>I am using jest tests to test my React project written in #typescript created with Create React App. I'm using <code>react-testing-library</code>. I have a form component which shows an <code>alert</code> if the form is submitted empty. I wanted to test this feature (maybe) by spying/mocking the <code>window.alert</code> but it doesn't work.</p>
  
  <p>I tried using <code>jest.fn()</code> as suggested in many SO answers but that's not working too.</p>
  
  <pre><code>window.alert = jest.fn();
  expect(window.alert).toHaveBeenCalledTimes(1);
  </code></pre>
  
  <p>Here's how I implemented it: Form.tsx</p>
  
  <pre><code>async handleSubmit(event: React.FormEvent&lt;HTMLFormElement&gt;) {
     // check for errors
      if (errors) {
          window.alert('Some Error occurred');
          return;
      }
  }
  </code></pre>
  
  <p>Here's how I built the React+Jest+react-testing-library test: Form.test.tsx</p>
  
  <pre><code>it('alerts on submit click', async () =&gt; {
    const alertMock = jest.spyOn(window,'alert'); 
    const { getByText, getByTestId } = render(&lt;Form /&gt;)
    fireEvent.click(getByText('Submit'))
    expect(alertMock).toHaveBeenCalledTimes(1)
  })
  </code></pre>