如何解决使用 Firebase Auth 模拟器以编程方式创建用户
我正在尝试使用 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"
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。