将赛普拉斯与“模拟插座”配合使用

Question

我正在尝试将mock-sockets与Cypress一起使用，在onBeforeLoad块中的cy.visit()的{​​{1}}钩子中设置了模拟。我可以进行一项测试，但是当模拟设置在下一个beforeEach上运行时，我得到一个错误beforeEach。

正在测试的代码：

（从我的React应用的A mock server is already listening on this url中调用）

componentDidiMount

柏树测试

  subscribeToSettings(url: string): W3CWebSocket {
    let settingsSubscription = new W3CWebSocket(url);
    settingsSubscription.onopen = () => console.log('WebSocket Client Connected (settings)');
    settingsSubscription.onclose = () => console.log('WebSocket Client Disconnected (settings)');
    settingsSubscription.onmessage = (message: MessageEvent) => this.handleSettingsMessage(message);
    return settingsSubscription;
  }

  /**
   * Handler for websocket settings messages, which updates the local settings values.
   * @param message the websocket message
   */
  handleSettingsMessage(message: MessageEvent) {
    const updatedValues = JSON.parse(message.data);
    console.log('A message was received on the settings channel.', updatedValues);
    this.props.updateSettingsFromBackend(updatedValues);
  }

这是我控制台中的日志：

import { Server } from 'mock-socket'
import { defaultSettingsState } from "../../src/reducers/settings.reducer";
import { _createSettingsApiPutPayload } from "../../src/actions/settings.actions";

describe('mock socket method 1', () => {
  let mockSocket;
  let mockServer;
  beforeEach(() => {
    cy.visit('/', {
      onBeforeLoad(win: Window): void {
        // @ts-ignore
        cy.stub(win, 'WebSocket', url => {
          mockServer = new Server(url)
          mockServer.on('connection', socket => {
            console.log('mock socket connected');
            mockSocket = socket;
          });
          mockSocket = new WebSocket(url);
          return mockSocket
        });
      },
    });
  });

  afterEach(() => {
    mockSocket.close()
    mockServer.stop()
  });

  it('gets a message', () => {
    cy.contains('SETTINGS').click()
    const object = _createSettingsApiPutPayload(defaultSettingsState)
    mockSocket.send(JSON.stringify(object));
    cy.contains('Motion threshold')
  });
  it('gets another message', () => {
    cy.contains('SETTINGS').click()
    const object = _createSettingsApiPutPayload(defaultSettingsState)
    mockSocket.send(JSON.stringify(object));
    cy.contains('Motion threshold')
  });
});

我想知道这是否与第二个调用有关，该第二个调用是针对某个神秘网址的。

（注意：即使在第一次测试中，在WebSocket Client Connected (settings) mock socket connected at url ws://localhost:8702/PM_Settings A message was received on the settings channel. {…} mock socket connected at url ws://localhost:3000/sockjs-node/949/mhuyekl3/websocket The development server has disconnected. Refresh the page if necessary. Uncaught Error: A mock server is already listening on this url 末尾调用cy.contains('SETTINGS').click()也不可行。即使我将我的应用设置为在设置页面上启动（而不是从测试内部单击它），即使我们已经在beforeEach上单击SETTINGS也不起作用。所以有点奇怪）

这些柏树日志可能也有帮助：

Answer 1

只有当我将服务器停在nan存根中时，它才对我有用：

WebSocket

我可能错了，但是我猜cy.stub(window, 'WebSocket', url => { if (mockServer) { mockServer.stop(); } mockServer = new Server(url); mockServer.on('connection', socket => { mockSocket = socket; }); mockSocket = new WebSocket(url); return mockSocket; }); 或afterEach是异步的，这就是为什么模拟服务器在新的init之前无法停止的原因