Mock implementation of firebase auth methods after mocking the firebase module

Question

I want to change the implementation of the methods inside jest.mock so i can check how my app reacts to different edge cases so i did this, However typescript is not letting me mock firebase.auth().currentUser method ... i am showing my code and error below

app.js

import firebase from 'firebase/app'
import 'firebase/auth'
import './Init'

const App = {
getLoggedInUser: () => {
    const currentUser = firebase.auth().currentUser
    if (currentUser) {
      return {
        email: firebase.auth().currentUser.email,
        userId: firebase.auth().currentUser.uid,
        isEmailVerified: firebase.auth().currentUser.emailVerified
      }
    } else {
      return undefined
    }
  },
  isAuthenticated: () => {
    return !!((App.getLoggedInUser() && App.getLoggedInUser().isEmailVerified === true))
  },
}
export default App

app.spec.ts

import myAuthenticationPlugin from 'authenticationPlugin/App'
import firebase from 'firebase/app'

jest.mock('firebase/app', () => {
  const userCredentialMock = {
    user: {
      sendEmailVerification: jest.fn()
    }
  }
  return {
    auth: jest.fn().mockReturnThis(),
    currentUser: {
      email: 'test',
      uid: '123',
      emailVerified: true
    },
    signInWithEmailAndPassword: jest.fn(),
    createUserWithEmailAndPassword: jest.fn(() => userCredentialMock),
    sendPasswordResetEmail: jest.fn(),
    signOut: jest.fn(),
    onAuthStateChanged: jest.fn(),
    initializeApp: jest.fn()
  }
})

  describe('Test for isAuthenticated ()', () => {
    afterEach(() => {
      jest.resetAllMocks()
    })
    it('The API should return a boolean value telling us, If the user is authenticated to access the resources or not', () => {
      expect(myAuthenticationPlugin.isAuthenticated()).toBe(true)
    })

    firebase.auth().currentUser = jest.fn(() => {
      return {
        email: 'test',
        uid: '123',
        emailVerified: false
      }
    })

    it('Check false', () => {
      expect(myAuthenticationPlugin.isAuthenticated()).toBe(false)
    })
  })

Error i get

 FAIL  tests/unit/App.spec.ts
  ● Test suite failed to run

    TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    tests/unit/App.spec.ts:44:5 - error TS2740: Type 'Mock<{ email: string; uid: string; emailVerified: boolean; }, []>' is missing the following properties from type 'User': delete, emailVerified, getIdTokenResult, getIdToken, and 31 more.

    44     firebase.auth().currentUser = jest.fn(() => {
           ~~~~~~~~~~~~~~~~~~~~~~~~~~~

I am confused now as to how to proceed with testing different edge cases for my App is there someway around this ?

Answer 1

You need to mock firebase.auth method and its return value as the currentUser.

E.g. app.ts:

import firebase from 'firebase/app';

const App = {
  getLoggedInUser: () => {
    const currentUser = firebase.auth().currentUser;
    if (currentUser) {
      return {
        email: currentUser.email,
        userId: currentUser.uid,
        isEmailVerified: currentUser.emailVerified,
      };
    } else {
      return undefined;
    }
  },
  isAuthenticated: () => {
    return !!(App.getLoggedInUser() && App.getLoggedInUser()!.isEmailVerified === true);
  },
};
export default App;

app.test.ts:

import App from './app';
import firebase from 'firebase/app';

jest.mock('firebase/app', () => {
  return {
    auth: jest.fn(),
  };
});

describe('61408137', () => {
  it('should return user', () => {
    (firebase.auth as jest.Mocked<any>).mockReturnValueOnce({
      currentUser: { email: 'example@gmail.com', uid: 1, emailVerified: true },
    });
    const actual = App.getLoggedInUser();
    expect(actual).toEqual({
      email: 'example@gmail.com',
      userId: 1,
      isEmailVerified: true,
    });
  });

  it('should return undefined', () => {
    (firebase.auth as jest.Mocked<any>).mockReturnValueOnce({});
    const actual = App.getLoggedInUser();
    expect(actual).toBeUndefined();
  });
});

unit test results with coverage report:

 PASS  stackoverflow/61408137/app.test.ts (9.822s)
  61408137
    ✓ should return user (3ms)
    ✓ should return undefined (1ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |    87.5 |       50 |      50 |    87.5 |                   
 app.ts   |    87.5 |       50 |      50 |    87.5 | 17                
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        11.683s

source code: https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/61408137