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

我不知道如何正确地使用google登录进行模拟firebase身份验证。我有以下代码：

simple.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));

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

import React，{Component}来自'React'；
从“firebase”导入*作为firebase
从“react router dom”导入{withRouter}；
类简单扩展组件{
使用Google（）登录{
var provider=new firebase.auth.GoogleAuthProvider（）；
//如何在模拟单击事件时模拟提供程序。
firebaseApp.auth（）.signInWithRedirect（提供程序）
}
render（）{
返回(
使用谷歌登录
);
}
使用路由器导出默认值（连接(
)（简单）；

simple.test.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));

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

const mockStore=configureMockStore（[thunk]）；
常量存储=mockStore（）；
描述（“”，（）=>{
测试（“模拟点击按钮”，（）=>{
const withProvider=(
);
const wrapper=mount（带提供程序）；
wrapper.find（'Button'）.simulate（'click'）；
});
});

---

如果您能提供示例帮助，我们将不胜感激。

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

simple.tsx

：

import React，{Component}来自'React'；
从“firebase”导入firebase；
从“react router dom”导入{withRouter}；
类简单扩展组件{
使用Google（）登录{
var provider=new firebase.auth.GoogleAuthProvider（）；
firebase.auth（）.signInWithRedirect（提供程序）；
}
render（）{
返回(
使用谷歌登录
);
}
}
使用路由器导出默认值（简单如任何）；

simple.spec.tsx

：

从“React”导入React；
从“酶”导入{mount}；
从“redux模拟存储”导入configureMockStore；
从“redux thunk”导入thunk；
从'react redux'导入{Provider}；
从“./simple”导入simple；
从“firebase”导入firebase；
const mockStore=configureMockStore（[thunk]）；
常量存储=mockStore（）；
常量FirebaseAuthProps={}；
jest.mock（'firebase'，（）=>{
const auth=jest.fn（）；
const mAuth={signInWithRedirect:jest.fn（）}；
//@ts忽略
auth.GoogleAuthProvider=jest.fn（）；
//@ts忽略
auth.auth=jest.fn（（）=>mAuth）；
返回{auth}；
});
描述（“”，（）=>{
之后（（）=>{
jest.resetAllMocks（）；
});
测试（'模拟单击按钮'，（）=>{
//@ts忽略
firebase.auth.mockImplementation（（）=>newfirebase.auth.auth（））；
const withProvider=(
);
const wrapper=mount（带提供程序）；
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）.tobeCalledTime（1）；
});
});

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

PASS src/stackoverflow/58554920/simple.spec.tsx（15.341s）
✓ 模拟点击按钮（82毫秒）
------------|----------|----------|----------|----------|-------------------|
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s|
------------|----------|----------|----------|----------|-------------------|
所有文件| 100 | 100 | 100 | 100 ||
simple.tsx | 100 | 100 | 100 | 100 ||
------------|----------|----------|----------|----------|-------------------|
测试套件：1个通过，共1个
测试：1项通过，共1项
快照：共0个
时间：17.245秒

---

源代码：

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

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({
凭证：{
providerId:'谷歌'，
},
用户：{
getIdToken:jest.fn（）.mockResolvedValue（'abc1234'），
},
其他用户信息：{
简介：{
电邮:'test@test.com',
姓名：“约翰·多伊”，
},
},
}),
});
auth.GoogleAuthProvider=类{
addScope=jest.fn（）；
};
返回{auth，analytics}；
});

你能告诉我你是如何导入firebase的吗？这里是我从firebase导入的：

import*作为firebase从“firebase”导入的。

我读过官方文件，但我搞不懂。你能分享你的测试代码吗？有什么错误吗？仅供参考：我使用了

jest.clearalmocks（）

而不是

jest.resetAllMocks（））

否则，它会继续返回

未定义的

，用于我的模拟。