如何系统测试实时反应多人游戏？

Question

我正在开发一个实时多人棋盘游戏，使用 node 和 socket.io 作为后端，react + redux 作为前端。这是我第一次做这种类型的项目，即实时和多人游戏。

我不确定如何最好地进行集成/系统测试。我怎样才能真正实现自动旋转，比如 10 个前端并让它们一起玩游戏？我应该为此使用测试框架吗？如果是，哪一个是不错的选择？为什么？

Answer 1

我发现这个问题与同一个问题。我已经找到了一种工作方式，我猜你现在也有，但是其他人会遇到：

关于术语的说明：可以使用 mount() 对 Jest + 酶等反应进行集成测试。我是根据寻找端到端/验收测试来回答这个问题的，在这种测试中，您实际上是从用户的角度来测试您的产品（这里是在网站上浏览）。

因为这是从用户的角度来看，我相信你使用 React 是无关紧要的。

那么，如何做到这一点？有many JS testing options。该资源可以帮助您了解您可能想要选择的测试包。您需要模拟实际浏览器的东西。

在调查上述资源中列出的一些选项时，我发现：

• TestCafe 进行 not support 多页测试。
• WebdriverIO 同时执行support 多个浏览器。
• Puppeteer 会同时处理多个页面 support。

编辑：我最初建议使用噩梦。但是，在运行多个测试（意外超时、Electron 实例未正确关闭）时，我遇到了一些不稳定的行为，并且研究了其他一些选项。但我会保留这些信息以供参考：

我选择了nightmare，因为它被宣传为简单。

下面是一个示例测试，使用 Jest 和 nightmare（以及一些草率的 TypeScript）。该网站有一个按钮来结束玩家的回合，并且有一个标题表明轮到谁了。我将模拟单击该按钮并确保标题按预期更改。另请注意，您需要在这些测试期间运行您的开发服务器和前端。

import * as Nightmare from 'nightmare';


let nightmare1: Nightmare;
let nightmare2: Nightmare;

beforeEach(async () => {
  nightmare1 = new Nightmare({ show: true })
  nightmare2 = new Nightmare({ show: true })
  await nightmare1
    .goto('http://127.0.0.1:3000');
  await nightmare2
    .goto('http://127.0.0.1:3000');
});

afterEach(async () => {
  await nightmare1.end();
  await nightmare2.end();
});

it('sockets turn changes via End Turn button', async () => {
  expect.assertions(6);

  // Both display the same player's turn ("Red's Turn")
  const startingTurnIndicator1 = await nightmare1
    .evaluate(() => document.querySelector('h1').innerText);
  const startingTurnIndicator2 = await nightmare2
    .evaluate(() => document.querySelector('h1').innerText);
  expect(startingTurnIndicator1).toBe(startingTurnIndicator2);

  // Both change ("Blue's Turn")
  const oneClickTI1 = await nightmare1
    .click('button')
    .evaluate(() => document.querySelector('h1').innerText)
  const oneClickTI2 = await nightmare2
    .evaluate(() => document.querySelector('h1').innerText);
  expect(oneClickTI1).toBe(oneClickTI2);
      expect(oneClickTI1).not.toBe(startingTurnIndicator1);

  // Both change back ("Red's Turn")
  const twoClickTI2 = await nightmare2
    .click('button')
    .evaluate(() => document.querySelector('h1').innerText)
  const twoClickTI1 = await nightmare1
    .evaluate(() => document.querySelector('h1').innerText);
  expect(twoClickTI1).toBe(twoClickTI2);
  expect(twoClickTI1).toBe(startingTurnIndicator2);
  expect(twoClickTI1).not.toBe(oneClickTI1);
});

我不确定这个测试中的实际代码有多好，但它可以工作。