无法使用 cypress 使用 firestore 本地模拟器测试应用程序

Question

我有一个用 vue 和 firebase/firestore 构建的应用程序。我使用 firebase 模拟器进行本地开发，并尝试将我的开发工作流程与 cypress 集成。但是，如果我从浏览器访问该应用程序，我会在 cypress 中收到错误消息。

Firebase CLI 版本为 7.9.0，Cypress 版本为“^3.8.0”

我用于加载所有内容的 npm 脚本如下：

"start": "firebase emulators:exec --only firestore \"npm run dev:appandtest\"",
"dev:appandtest": "concurrently -n \"app,test\" -c \"bgYellow.black,bgWhite.black\" \"npm:dev:app\" \"npm:dev:test\"",
"dev:app": "webpack-dev-server --config build/webpack.dev.js",
"dev:test": "npx cypress open", 

本地服务器在端口 9000 上运行，而 firebase 模拟器在端口 8080 上运行。

事情运行后，如果我从普通浏览器访问应用程序，一切都很好，如此屏幕所示。

普通的

然后我尝试使用此代码运行基本的柏树测试

    describe('The Home Page', function () {
      it('successfully loads', function () {
        cy.visit('/');
      });
    });

我收到以下错误消息：

    [2019-12-14T15:29:24.725Z]  @firebase/firestore: Firestore (6.6.2): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
    This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

    error.ts:166 Uncaught (in promise) FirebaseError: Failed to get document because the client is offline.
        at new FirestoreError (http://localhost:9000/bundle.js:11739:149)
        at Object.next (http://localhost:9000/bundle.js:16734:8)
        at next (http://localhost:9000/bundle.js:16725:4704)
        at http://localhost:9000/bundle.js:16430:411

我也截图了： buggy

我试图研究答案，但找不到答案。在此先感谢您的帮助。

Answer 1

这个问题的解决方案，至少现在，是启用ExperimentalForceLongPolling，如下所示：

// NOTE: do NOT put this in production.
firebase.firestore().settings({ experimentalForceLongPolling: true })

重要提示：这是一项实验性功能，您应该使用环境变量对其进行一些条件检查。您不应该在生产环境中使用它。

最好在此处描述其原因：

Firestore 的 Web SDK 的默认行为是使用 WebChannel 的流模式。客户端制作看起来像 XHR 的东西，但随后服务器会将响应保持打开状态 60 秒，并在该时间窗口内发送尽可能多的服务器启动的响应。

ExperimentForLongPolling 选项强制服务器对每个请求只发送一个响应。

而在这里：

这与我们在 cypress 中使用的解决方法相同。我认为潜在的问题是 Cypress 正在拦截所有网络流量，因此它可以监视甚至有时会模拟。但是，firestore 使用的 webchannel 协议对同一个 http 请求有多个回复。赛普拉斯代码无法处理这个问题，只会转发第一个回复并忽略其余的回复。