title: Errors when mocking firebase within a React app using Jest and React Testing Library
body: <p>I want to test a component which calls <code>firebase.auth().sendPasswordResetEmail()</code> on click, so I want to test that firebase is being called onClick, but am not sure how to implement - I don't want to call the api in a test.</p>
  
  <p>I would love some guidance on mocking/intercepting firebase calls in general.</p>
  
  <p>I am using React with Jest and React Testing Library.</p>
  
  <p>This is the component in question:</p>
  
  <pre><code>import React from 'react'
  import { withFirebase } from '../Firebase'
  
  interface PFProps {
    firebase: firebase.app.App
  }
  
  interface S {
    email: string
  }
  
  interface Error {
    message?: string
  }
  
  const PasswordForget = ({ firebase }: PFProps) =&gt; {
    const initialState = { email: '' }
    const stateReducer = (state: S, update: { [x: string]: string }) =&gt; ({
      ...state,
      ...update,
    })
    const [state, dispatch] = React.useReducer(stateReducer, initialState)
    const [error, setError] = React.useState&lt;Error&gt;()
  
    const isValid = () =&gt; validator.isEmail(state.email)
  
    const handleSubmit = (event: React.FormEvent) =&gt; {
      event.preventDefault()
  
      if (!isValid()) {
        return setError({ message: messages.emailIsInvalid })
      }
  
      firebase
        .auth()
        .sendPasswordResetEmail(state.email)
        .then(success =&gt; console.log(success))
        .catch(error =&gt; setError(error))
      dispatch(initialState)
    }
  
    const handleChange = ({
      currentTarget: { name, value },
    }: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
      setError(undefined)
      dispatch({ [name]: value })
    }
  
    return (
      &lt;&gt;
        &lt;form onSubmit={handleSubmit} data-testid="form" noValidate&gt;
          {error &amp;&amp; error.message &amp;&amp; &lt;FormErrorPanel message={error.message} /&gt;}
          &lt;Input
            type="email"
            name="email"
            data-testid="pwf-email"
            value={state.email}
            onChange={handleChange}
            placeholder="Enter your email address"
          /&gt;
          &lt;Button&gt;Reset password&lt;/Button&gt;
        &lt;/form&gt;
      &lt;/&gt;
    )
  }
  
  const PasswordForgetLink = () =&gt; (
    &lt;p&gt;
      &lt;Link to={ROUTES.PASSWORD_FORGET}&gt;Forgotten password&lt;/Link&gt;
    &lt;/p&gt;
  )
  
  export { PasswordForgetLink }
  export default withFirebase(PasswordForget)
  </code></pre>
  
  <p>This is how I am currently trying to mock firebase:</p>
  
  <pre><code>import React from 'react'
  import '@testing-library/jest-dom/extend-expect'
  import { render, cleanup, fireEvent } from '@testing-library/react'
  import { FirebaseContext } from '../../Firebase'
  import firebase from '../../Firebase'
  
  import PasswordForget from '../index'
  
  jest.mock('../../Firebase/firebase', () =&gt; {
    return {
      auth: jest.fn(() =&gt; ({
        sendPasswordResetEmail: jest.fn(() =&gt; Promise.resolve()),
      })),
    }
  })
  
  afterEach(cleanup)
  
  const setup = () =&gt; {
    const utils = render(
      &lt;FirebaseContext.Provider value={firebase}&gt;
        &lt;PasswordForget /&gt;
      &lt;/FirebaseContext.Provider&gt;,
    )
    const form = utils.getByTestId('form')
    const emailInput = utils.getByTestId('pwf-email') as HTMLInputElement
    const h1 = utils.getByText(/Forgotten Password/i)
    return {
      h1,
      form,
      emailInput,
      ...utils,
    }
  }
  
  test('should call sendPasswordResetEmail method when the form is submitted with a valid email', () =&gt; {
    const { form, emailInput } = setup()
    const email = 'peterparker@foo.com'
    fireEvent.change(emailInput, { target: { value: email } })
    expect(emailInput.value).not.toBeNull()
    fireEvent.submit(form)
    expect(firebase.auth().sendPasswordResetEmail).toHaveBeenCalledTimes(1)
  })
  </code></pre>
  
  <p>But I am getting the error: </p>
  
  <blockquote>
    <p>Expected mock function to have been called one time, but it was called zero times.</p>
  </blockquote>
  
  <p>Does anyone know what I am doing wrong?</p>
  
  <p>Many thaks</p>