javascript - Firebase 模拟器可以用于与 React 前端的集成测试吗?

标签 javascript reactjs firebase jestjs firebase-tools

我有一个简单的 React 前端应用程序,它使用 Firebase 进行身份验证和 Firestore(https://jlowen-netflix.netlify.app/ 如果其他上下文有用)。我将 Firebase 作为我的顶级应用程序的上下文提供,并监听 Auth 中的更改以将用户重定向到已登录的内容。

我想测试从匿名到注册再到登录的端到端用户工作流程。我已经安装了 Firebase CLI 以及 Firebase 模拟器。我可以通过访问本地主机上的模拟器 UI 来验证模拟器是否正确运行。当我为 Create-React-App 启动开发服务器 (npm start) 时,我还可以验证应用程序是否与模拟器 Hook 。我在 Emulator UI 中创建了一个测试用户,并且能够按预期登录。

当我尝试让它在 Jest 中呈现时,我的身份验证监听器自定义 Hook 会尝试在 firebase 初始化之前访问 firebase 上下文中的 auth() 方法。

 TypeError: Cannot read property 'auth' of undefined

       9 |   // As recommended by Firebase - need to set up subscription
      10 |   useEffect(() => {
    > 11 |     const listener = firebase.auth().onAuthStateChanged((authUser) => {
         |                               ^
      12 |       console.log(`Firebase detected auth change: ${authUser}`)
      13 |       if (authUser) {
      14 |         localStorage.setItem("authUser", JSON.stringify(authUser))

      at src/hooks/use-auth-listener.js:11:31

我似乎无法解决我在 Jest 中遇到的某种异步问题,但在已部署的应用程序中并未发生。

我是 React 和 Jest 的新手,所以如果我能提供更多信息,请告诉我!

最佳答案

很遗憾,您的错误似乎与您的主要问题无关。您显示的错误是您忘记了 importrequire 来自某处的 firebase 。阅读 firebase package docs并在文件顶部添加如下内容:

var firebase = require('firebase');

我也有兴趣将 firebase 应用程序连接到本地模拟器,所以如果我想通了,我会编辑这个答案。同时.. 为错误的希望感到抱歉。

关于javascript - Firebase 模拟器可以用于与 React 前端的集成测试吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65691925/

相关文章:

javascript - Angular 过滤

javascript - 现在有必要配置React.js环境(Webpack,Babel)吗?

javascript - 如何在列表中显示时更改 JSON 数据的值?

javascript - 如何将这些值操作为相关的列 id?

node.js - 从 axios 获取对象数组并使用返回值调用另一个 axios 函数并将输出附加到第一个结果

reactjs - 来自 "react"的 ReactFragment 是什么意思?

android - Firebase 消息 “E/FirebaseCrash: Failed to initialize crash reporting”

java - 上传图片后在 Firebase 中如何获取 Url?

javascript - 使用 Firestore 查询发送值

javascript - Backbone.js 模板示例