如何测试 Firebase 登录操作（React/Jest）

Posted 2023-03-08

【中文标题】如何测试 Firebase 登录操作（React/Jest）

【英文标题】：How to test Firebase login action (React/Jest)

【发布时间】：2018-07-05 02:59:11

【问题描述】：

我正在尝试创建一个测试来查看是否已调用 signIn，然后继续进行 success 和 error 功能测试。

我在这里使用firebase-mock 包： https://github.com/soumak77/firebase-mock/blob/master/tutorials/auth/authentication.md

以下是我的登录操作

// Sign in action
export const signIn = (email, password, redirectUrl = ROUTEPATH_DEFAULT_PAGE) => (dispatch) => 
  dispatch( type: USER_LOGIN_PENDING );

  firebase
    .then(auth => auth.signInWithEmailAndPassword(email, password))
    .catch((e) => 
      console.error('actions/Login/signIn', e);
      // Register a new user
      if (e.code === LOGIN_USER_NOT_FOUND) 
        dispatch(push(ROUTEPATH_FORBIDDEN));
        dispatch(toggleNotification(true, e.message, 'error'));
       else 
        dispatch(displayError(true, e.message));
        setTimeout(() => 
          dispatch(displayError(false, ''));
        , 5000);
        throw e;
      
    )
    .then(res => res.getIdToken())
    .then((idToken) => 
      if (!idToken) 
        dispatch(displayError(true, 'Sorry, there was an issue with getting your token.'));
      

      dispatch(onCheckAuth(email));
      dispatch(push(redirectUrl));
    );
;

我的测试：

import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import  MockFirebase  from 'firebase-mock';

// Login Actions
import  onCheckAuth, signIn  from 'actions';

// String Constants
import  LOGIN_USER_NOT_FOUND  from 'copy';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

let mockProps;

describe('login actions', () => 
  // console.log('MockFirebase', MockFirebase);
  // console.log('onCheckAuth', onCheckAuth);
  let mockAuth;

  beforeEach(() => 
    mockAuth = new MockFirebase();
    console.log('mockAuth: ==>', mockAuth);

    mockProps = 
      signIn: jest.fn(),
      signOut: jest.fn(),
      checkAuth: jest.fn(),
      createUser: jest.fn(),
      resetPassword: jest.fn(),
      verifyEmail: jest.fn()
    ;
  );

  it('signIn should be called', () => 
    const user = 
      email: '[e-mail]',
      password: 'abd123'
    ;

    signIn(user.email, user.password);
    console.log('signIn', signIn);

    expect(signIn).toHaveBeenCalled();
  );
);

错误信息

失败客户端/操作/登录/index.test.js ● 登录操作 › 应该调用登录

expect(jest.fn())[.not].toHaveBeenCalled()

jest.fn() 值必须是模拟函数或间谍。 已收到： 功能：[功能登录]

at Object.<anonymous> (client/actions/Login/index.test.js:71:29)

【参考方案1】：

我错误地模拟了 firebase 服务功能，下面是我开始工作的代码，但是在这里发布了一个新问题：How to test is code inside of thenable in jest test is getting called?

以下测试通过，但不确定store.dispatch 内的代码是否可以运行...

// Mock all the exports in the module.
function mockFirebaseService() 
  return new Promise(resolve => resolve(true));


// Since "services/firebase" is a dependency on this file that we are testing,
// we need to mock the child dependency.
jest.mock('services/firebase', () => new Promise(resolve => resolve(true)));

describe('login actions', () => 
  let store;

  beforeEach(() => 
    store = mockStore();
  );

  it('signIn should call firebase', () => 
    const user = 
      email: '[e-mail]',
      password: 'abd123'
    ;

    store.dispatch(signIn(user.email, user.password)).then(() => 
      expect(mockFirebaseService).toHaveBeenCalled();
    );
  );
);