使用 Cypress 和 Yjs Websocket 服务器后端测试 React 应用程序

Question

您好，我正在使用 React 和 Yjs 开发一个协作工具。有问题的工具是一个电子表格，我想做一些端到端测试来证明其正确性。我打算使用 cypress 来执行此操作，但由于某种原因，我在打开应用程序时遇到问题，因为某些原因它无法连接到 websocket 服务器，该服务器是 Yjs 数据的提供者。打开任何其他浏览器时，连接工作正常，但使用 cypress 时，它会给我错误消息：

Firefox cannot establish a connection to the Server ws://localhost:1234/spreadsheetData

在电子表格组件的打字稿文件中，我建立了与 websocket 服务器的连接，如下所示：

const yDoc = new Y.Doc();
const websocketProvider = new WebsocketProvider(
    'ws://localhost:1234',
    'spreadsheetData',
    yDoc
);


const yMap = yDoc.getMap<Map<Cell>>('spreadsheet');
const yColumns = yDoc.getArray<string>('columns');
const yRows = yDoc.getArray<string>('rows');

然后我在组件本身中正常使用 Yjs。我使用的是基本的 cypress 配置，因为我刚刚开始，对它了解不多。我的 cypres.config.ts 文件如下所示：

import { defineConfig } from "cypress";

export default defineConfig({
    e2e: {
        setupNodeEvents(on, config) {
        },
    },
});

我用来启动应用程序和 cypress 的命令是：

npx y-websocket-server
npm run dev
npm run cypress:open

"cypress:open": "cypress open"
"dev": "concurrently --kill-others \" vite --host\" \"vite --host\""

我在启动 cypress 时是否做错了什么，或者配置文件中是否缺少某些内容以使其能够访问 websocket 服务器？预先感谢您的帮助！

Answer 1

由于有服务器正在启动，您可能需要使用 start-server-and-test 包来确保服务器在测试开始运行之前已启动。

启动服务器，等待URL，然后运行测试命令；测试结束后，关闭服务器

{
   "scripts": {
       "start-server": "npm start",
       "test": "mocha e2e-spec.js",
       "ci": "start-server-and-test start-server http://localhost:8080 test"
   }
}

"ci"

脚本使用服务器脚本、要等待的 URL 和测试脚本的参数来调用包。赛普拉斯的例子是这里

唯一的问题是，URL 是

http:\\

而不是

ws:\\

，但是这个问题 Websocket support #298 给出了 websockets 的可能语法。

Websocket是tcp，wait-on库支持等待tcp。我能够使用语法

tcp:3000

等待端口 3000 上的 Websocket 来完成此操作

start-server-and-test start-websocket tcp:3000 run-tests

所以，对于你的命令，我会尝试：

{
  "scripts": {
    "start-server": "npx y-websocket-server",
    "dev": "concurrently --kill-others \" vite --host\" \"vite --host\"",
    "cypress:open": "cypress open",
    "ci": "start-server-and-test start-server tcp:5174 'dev && cypress:open'"
  }
}

不幸的是我无法运行c demo，所以我没有检查语法是否正确。如果您仍然遇到问题并且可以指出一个有效的

React/Yjs

存储库，我可以进一步检查。