使用Google登录jest测试Firebase身份验证

Question

我不知道如何开玩笑模拟Firebase身份验证与谷歌登录正确。我有以下代码：

易于理解的tsx

import React, { Component } from 'react';
import * as firebase from 'firebase'
import { withRouter} from 'react-router-dom';

class simple extends Component {

  signInWithgoogle() {
    var provider = new firebase.auth.GoogleAuthProvider();
    // how to mock provider when simulate click event.
    firebaseApp.auth().signInWithRedirect(provider)

  }

  render() {
    return (
      <div>
        <button onClick={this.signInWithgoogle.bind(this)}>
          Login with Google
        </button>
      </div>

    );
  }
export default withRouter(connect(
)(simple));

易于理解的测验tsx

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

describe('<simple />', () => {
    test("simulate click button", () =>{
        const withProvider = (
            <Provider store={store}>
                <simple.WrappedComponent {...FirebaseAuthProps} />
            </Provider>
        );

        const wrapper = mount(withProvider);
        wrapper.find('Button').simulate('click');
    });
});

如有任何帮助，请举例说明？

Answer 1

如果您决定将Firebase Auth与Firebase Analytics结合使用，我还有一个类似的解决方案：

js prettyprint-override">jest.mock('firebase/app', () => {
  const analytics = jest.fn().mockReturnValue({
    logEvent: jest.fn(),
  });

  const auth: any = jest.fn().mockReturnValue({
    signInWithRedirect: jest.fn(),
    getRedirectResult: jest.fn().mockResolvedValue({
      credential: {
        providerId: 'Google',
      },
      user: {
        getIdToken: jest.fn().mockResolvedValue('abc1234'),
      },
      additionalUserInfo: {
        profile: {
          email: '[e-mail]',
          name: 'John Doe',
        },
      },
    }),
  });

  auth.GoogleAuthProvider = class {
    addScope = jest.fn();
  };

  return { auth, analytics };
});

Answer 2

Typescript命名空间是编译和类型擦除之后的某种JS函数。当然，在了解了这一点之后，您可以将属性分配给JS函数。以下是解决方案：

简单。tsx：

import React, { Component } from 'react';
import firebase from 'firebase';
import { withRouter } from 'react-router-dom';

class simple extends Component {
  signInWithgoogle() {
    var provider = new firebase.auth.GoogleAuthProvider();
    firebase.auth().signInWithRedirect(provider);
  }

  render() {
    return (
      <div>
        <button onClick={this.signInWithgoogle.bind(this)}>Login with Google</button>
      </div>
    );
  }
}

export default withRouter(simple as any);

简单。规格tsx：

import React from 'react';
import { mount } from 'enzyme';
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import simple from './simple';
import firebase from 'firebase';

const mockStore = configureMockStore([thunk]);
const store = mockStore();
const FirebaseAuthProps = {};

jest.mock('firebase', () => {
  const auth = jest.fn();
  const mAuth = { signInWithRedirect: jest.fn() };
  // @ts-ignore
  auth.GoogleAuthProvider = jest.fn();
  // @ts-ignore
  auth.Auth = jest.fn(() => mAuth);
  return { auth };
});

describe('<simple />', () => {
  afterEach(() => {
    jest.resetAllMocks();
  });
  test('simulate click button', () => {
    // @ts-ignore
    firebase.auth.mockImplementation(() => new firebase.auth.Auth());
    const withProvider = (
      <Provider store={store}>
        <simple.WrappedComponent {...FirebaseAuthProps} />
      </Provider>
    );

    const wrapper = mount(withProvider);
    expect(wrapper.find('button').text()).toBe('Login with Google');
    wrapper.find('button').simulate('click');
    expect(firebase.auth.GoogleAuthProvider).toBeCalledTimes(1);
    expect(firebase.auth).toBeCalledTimes(1);
    expect(firebase.auth().signInWithRedirect).toBeCalledTimes(1);
  });
});

100%覆盖率的单元测试结果：

 PASS  src/stackoverflow/58554920/simple.spec.tsx (15.341s)
  <simple />
    ✓ simulate click button (82ms)

------------|----------|----------|----------|----------|-------------------|
File        |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
------------|----------|----------|----------|----------|-------------------|
All files   |      100 |      100 |      100 |      100 |                   |
 simple.tsx |      100 |      100 |      100 |      100 |                   |
------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        17.245s

源代码：https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58554920