模拟 firebase 模块后模拟 firebase auth 方法的实现 [英] Mock implementation of firebase auth methods after mocking the firebase module

问题描述

我想更改 jest.mock 中方法的实现，以便我可以检查我的应用程序对不同边缘情况的反应，所以我这样做了，但是 typescript 不允许我模拟 firebase.auth().currentUser 方法......我在下面显示我的代码和错误

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)
    })
  })

我得到的错误

 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 ?

推荐答案

您需要模拟 firebase.auth 方法及其返回值作为 currentUser.

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

例如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: '[e-mail]', uid: 1, emailVerified: true },
    });
    const actual = App.getLoggedInUser();
    expect(actual).toEqual({
      email: '[e-mail]',
      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

源代码:https://github.com/mrdulin/react-apollo-graphql-starter-kit/tree/master/stackoverflow/61408137

这篇关于模拟 firebase 模块后模拟 firebase auth 方法的实现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！