Reactjs 如何模拟Firebase身份验证方法？（反应，测试库）_Reactjs_Firebase_Jestjs_Mocking_React Testing Library

Reactjs 如何模拟Firebase身份验证方法？（反应，测试库）

reactjs firebase jestjs

Reactjs 如何模拟Firebase身份验证方法？（反应，测试库）,reactjs,firebase,jestjs,mocking,react-testing-library,Reactjs,Firebase,Jestjs,Mocking,React Testing Library,我有以下组成部分： import React from "react"; import Firebase from "../../Firebase"; const SignOutButton = () => ( <button type="button" onClick={() => Firebase.auth().signOut()}> Sign Out </button> ); export default SignOutButton;

我有以下组成部分：

import React from "react";
import Firebase from "../../Firebase";

const SignOutButton = () => (
  <button type="button" onClick={() => Firebase.auth().signOut()}>
    Sign Out
  </button>
);

export default SignOutButton;

在signburatton.test中，我有：

import React from "react";
import { render, cleanup, fireEvent } from "@testing-library/react";
import SignOutButton from "../.";
import Firebase from "../../../Firebase";
import { authMock } from "../../../../setupTests";
// @ts-ignore
Firebase.auth = authMock;

describe("<SignOutButton />", () => {
  afterEach(cleanup);

  it("calls Firebase signOut on click", async () => {
    const { getByText } = render(<SignOutButton />);
    const button = getByText("Sign Out");

    fireEvent.click(button);

    expect(Firebase.auth().signOut).toHaveBeenCalled();
  });
});

从“React”导入React；
从“@testing library/react”导入{render，cleanup，firevent}”；
从“./”导入标识栏；
从“../../../Firebase”导入Firebase；
从“../../../../setupTests”导入{authMock}”；
//@ts忽略
Firebase.auth=authMock；
描述（“，（）=>{
每次之后（清理）；
它（“单击时调用Firebase注销”，异步（）=>{
const{getByText}=render（）；
const button=getByText（“注销”）；
fireEvent。单击（按钮）；
期望（Firebase.auth（）.signOut）.tohavebeencall（）；
});
});

我的测试结果预期调用为1，但收到0

我做错了什么

谢谢大家!

您的测试存在以下问题：

将

Firebase.auth

方法替换为

authMock

后，应导入

signexputton

组件。否则，

Firebase.auth

方法是原始版本，而不是模拟版本。您可以使用

console.log（Firebase.auth）

进行检查

您应该为

Firebase.auth

方法的返回值返回相同的引用。否则，断言将失败

完整的单元测试解决方案：

signexputton.tsx

：

从“React”导入React；
从“/Firebase”导入Firebase；
console.log（Firebase.auth）；
console.log（'应该保持对authObject:'的相同引用，Firebase.auth（）==Firebase.auth（））；
const signburgatton=（）=>(
Firebase.auth（）.signOut（）}>
退出
);
导出默认签名；

firebase.ts

：

导出默认值{
auth（）{
log（'auth real implementation'）；
归还这个；
},
异步签出（）{
log（'signOut real implementation'）；
},
};

setupTests.ts

：

const authObjectMock={
createUserAndRetrieveDataWithEmailAndPassword:jest.fn（（）=>Promise.resolve（true）），
sendPasswordResetEmail:jest.fn（（）=>Promise.resolve（true）），
使用EmailandPassword登录并检索数据：jest.fn（（）=>Promise.resolve（true）），
fetchSigningMethodForemail:jest.fn（（）=>Promise.resolve（true）），
签出：jest.fn（（）=>{
承诺。决心（真实）；
}),
onAuthStateChanged:jest.fn（），
当前用户：{
sendEmailVerification:jest.fn（（）=>Promise.resolve（true）），
},
};
const authMock=jest.fn（（）=>authObjectMock）；
导出{authMock}；

signexputton.test.tsx

：

从“React”导入React；
从'@testing library/react'导入{render，cleanup，firevent}；
从“/Firebase”导入Firebase；
从“/setupTests”导入{authMock}；
//@ts忽略
Firebase.auth=authMock；
描述（“”，（）=>{
每次之后（清理）；
它（'单击时调用Firebase注销'，异步（）=>{
const signburatton=（等待导入（'./signburatton'）。默认值；
const{getByText}=render（）；
const button=getByText（“注销”）；
fireEvent。单击（按钮）；
期望（Firebase.auth（）.signOut）.tohavebeencall（）；
});
});

单元测试结果和覆盖率报告：

 PASS  src/stackoverflow/58562583/SignOutButton.test.tsx
  <SignOutButton />
    ✓ calls Firebase signOut on click (76ms)

  console.log src/stackoverflow/58562583/SignOutButton.tsx:382
    { [Function: mockConstructor]
      _isMockFunction: true,
      getMockImplementation: [Function],
      mock: [Getter/Setter],
      mockClear: [Function],
      mockReset: [Function],
      mockRestore: [Function],
      mockReturnValueOnce: [Function],
      mockResolvedValueOnce: [Function],
      mockRejectedValueOnce: [Function],
      mockReturnValue: [Function],
      mockResolvedValue: [Function],
      mockRejectedValue: [Function],
      mockImplementationOnce: [Function],
      mockImplementation: [Function],
      mockReturnThis: [Function],
      mockName: [Function],
      getMockName: [Function] }

  console.log src/stackoverflow/58562583/SignOutButton.tsx:386
    should keep same reference to authObject: true

-------------------|----------|----------|----------|----------|-------------------|
File               |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
-------------------|----------|----------|----------|----------|-------------------|
All files          |    63.64 |      100 |    36.36 |       60 |                   |
 SignOutButton.tsx |      100 |      100 |      100 |      100 |                   |
 firebase.ts       |       25 |      100 |        0 |       25 |             3,4,7 |
 setupTests.ts     |       50 |      100 |    28.57 |    44.44 |        2,3,4,5,11 |
-------------------|----------|----------|----------|----------|-------------------|
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        3.943s

通过src/stackoverflow/58562583/signexputton.test.tsx
✓ 单击时呼叫Firebase注销（76毫秒）
console.log src/stackoverflow/58562583/signexputton.tsx:382
{[函数：mockConstructor]
_isMockFunction:true，
getMockImplementation:[函数]，
mock:[Getter/Setter]，
mockClear:[函数]，
mockReset:[函数]，
mockRestore:[函数]，
mockReturnValueOnce:[函数]，
mockResolvedValueOnce:[函数]，
mockRejectedValueOnce:[函数]，
mockReturnValue:[函数]，
mockResolvedValue:[函数]，
mockRejectedValue:[函数]，
mockImplementationOnce:[函数]，
mockImplementation:[函数]，
mockReturnThis:[函数]，
mockName:[函数]，
getMockName:[函数]}
console.log src/stackoverflow/58562583/signexputton.tsx:386
应保持对authObject的相同引用：true
-------------------|----------|----------|----------|----------|-------------------|
文件|%Stmts |%Branch |%Funcs |%Line |未覆盖行|s|
-------------------|----------|----------|----------|----------|-------------------|
所有文件| 63.64 | 100 | 36.36 | 60 ||
Signburgatton.tsx | 100 | 100 | 100 | 100 | 100 ||
firebase.ts | 25 | 100 | 0 | 25 | 3,4,7|
设置测试。ts | 50 | 100 | 28.57 | 44.44 | 2,3,4,5,11|
-------------------|----------|----------|----------|----------|-------------------|
测试套件：1个通过，共1个
测试：1项通过，共1项
快照：共0个
时间：3.943s