使用 Firebase Auth 模拟器以编程方式创建用户

编程问答 2022-06-01

问题描述

我正在尝试使用 Firebase Auth 模拟器编写 Jest 测试并继续收到以下 CORS 错误。

console.error
    Error: Headers X-Client-Version forbidden
        at dispatchError (/Users/me/my-project/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:62:19)
        at validCORSPreflightHeaders (/Users/me/my-project/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:99:5)
        at Request.<anonymous> (/Users/me/my-project/node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:367:12)
        at Request.emit (events.js:315:20)
        at Request.onRequestResponse (/Users/me/my-project/node_modules/request/request.js:1059:10)
        at ClientRequest.emit (events.js:315:20)
        at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:641:27)
        at HTTPParser.parserOnHeadersComplete (_http_common.js:126:17)
        at Socket.socketonData (_http_client.js:509:22)
        at Socket.emit (events.js:315:20) undefined

测试很简单：

import { renderHook,act } from "@testing-library/react-hooks"
import faker from "faker"
import { useAuth,FirebaseProvider,firebase } from "./index"


const wrapper = ({ firebase,children }) => {
  return <FirebaseProvider firebase={firebase}>{children}</FirebaseProvider>
}

const createuser = ({ email = faker.internet.email(),password = faker.internet.password({ length: 6 }) } = {}) => {
  return firebase
    .auth()
    .createuserWithEmailAndPassword(email,password)
    .then(user => user)
}

const signUserIn = ({ email,password } = {}) => {
  return firebase
    .auth()
    .signInWithEmailAndPassword(email,password)
    .then(user => user)
}

describe("useAuth",() => {
  it("will return the user",async () => {
    const { result } = renderHook(() => useAuth(),{ wrapper,initialProps: { firebase } })
    const email = faker.internet.email()
    const password = faker.internet.password()
    await act(async () => {
      const user = await createuser({ email,password }) // this fails
      await signUserIn({ email,password }) //and so does this
    })
    expect(result.user).toEqual({ email,password })
  })
})

作为参考，索引文件：

const FirebaseProvider = ({ children,firebase }) => {
  const firestore = firebase.firestore()
  const auth = firebase.auth()

  if (useEmulator()) {
    firestore.useEmulator("localhost",8080)
    auth.useEmulator("http://localhost:9099/")
  }

  const value = { firestore,auth }

  return <FirebaseContext.Provider value={value}>{children}</FirebaseContext.Provider>
}

const throwError = hook => {
  throw new Error(`${hook} must be used within a FirebaseProvider`)
}

const useAuth = () => {
  const context = useContext(FirebaseContext)
  if (context === undefined) throwError("useAuth")

  const [user,setUser] = useState()

  useEffect(() => {
    const cleanup = context.auth.onAuthStateChanged(authUser => {
      authUser ? setUser(authUser) : setUser(null)
    })
    return () => cleanup()
  })

  return { ...context.auth,user }
}

我曾尝试使用实际模拟器使用的 REST 端点（如下），但它以同样的方式出错。

http://localhost:9099/identitytoolkit.googleapis.com/v1/projects/<my-project>/accounts

在使用 jest 时有没有办法让它运行？或者我是否需要使用模拟器 UI 创建帐户，将它们导出并在运行测试时重新导入？

我发现我可以使用下面的 REST 端点在测试中创建一个用户，但是它绕过了模拟器并创建了一个真正的用户。

https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=<api-key>

解决方法

更新 jsdom 版本 16.5.2

这个新版本现在支持 access-control-allow-headers 的通配符，所以更新到这个版本或使用它作为解决方案，对于使用 Create React App 创建的项目，解决了这个问题。

jsdom 16.5.2 之前的解决方案

该错误是由 jsdom 抛出的，因为它不支持 access-control-allow-headers 的通配符，但 firebase 使用通配符（请参阅此 issue for jsdom 和此 pull request related to firebase）。有两个开放的拉取请求可以解决此问题：https://github.com/jsdom/jsdom/pull/3073 和 https://github.com/jsdom/jsdom/pull/2867。

可以通过手动更改 node_modules 文件夹中的相关代码或使用 fork 作为 package.json 中的依赖项来解决此问题：

"jsdom": "silviot/jsdom#fix/allow-headers"

如果 jsdom 不是直接依赖项，那么您可以在顶级 package.json 中添加以下内容：

"resolutions": {
  "jsdom": "silviot/jsdom#fix/allow-headers"
}

如果使用 fork，jsdom 文件夹中会丢失一些自动生成的文件。这些可以通过在文件夹中运行 npm install 或 yarn install 来生成。要自动执行此操作，您可以将 prepare 脚本添加到 package.json：

"scripts": {
  "prepare": "cd node_modules/jsdom && yarn"
},
firebasefirebasefirebasefirebase-authenticationfirebase-toolsjestjsjsdomjsdom