Question

我已经成功地模拟了测试该应用程序的几种方法。我最近的工作涉及在应用程序启动时发出GET请求。

export const requestSettings = () =>
  dispatch => {
    console.log('Requesting settings');

    const url = urls.SETTINGS_HTTP;
    axios.get(url)
      .then(res => {
        console.log('response from axios');
        return dispatch(updateSettingsFromBackend(res.data));
      })
      .catch((e) => {
        console.log('axios error', e, e.config);
        return dispatch(reportError('Request for initial settings failed.'));
      });
  };

在赛普拉斯中，我模拟了此路由，该路由允许我运行所有测试（因为否则它们将在每次测试开始时针对失败的HTTP请求失败）：

// commands.js
const urls = buildUrls(Cypress.env()); // we don't have the window yet
const settingsHttpUrl = urls.SETTINGS_HTTP;
const initialSettingsForTest = { ...defaultSettingsState, displayProgressIndicator: true };
const initialPayloadForTests = _createSettingsApiPayload(initialSettingsForTest);

Cypress.Commands.add("mockGetSettings", (code: number = 200) =>
  cy.route({
    method: 'GET',
    url: settingsHttpUrl,
    status: code,
    response: code === 200 ? initialPayloadForTests : {},
  }));

Cypress.Commands.add("mockPutSettings", (code: number) =>
  cy.route({
    method: 'PUT',
    url: settingsHttpUrl,
    status: code,
    response: {},
  }));

// the tests
describe('updating settings (requestParameterChange)', () => {
    beforeEach(() => {
      cy.mockGetSettings(200);
      cy.visitSettings();
    });

   ...

这很好。

我的最新分支涉及等待发出此初始请求，直到收到特定的websocket消息为止。在我的赛普拉斯测试中，我能够调度该websocket处理程序以使序列继续执行并最终调用相同的GET端点。通过后端运行，我可以在实时应用程序中执行此操作。实现在那里。

但是，在这个分支中，我的模拟只是不起作用！在后端打开的情况下，该功能起作用（这意味着它在撞击真正的后端，而不是模拟），而在后端掉下来的情况下，它失败了（因为未击中模拟）。

describe('Settings Page', () => {
  beforeEach(() => {
    cy.server();
    cy.clock();
  });

  describe('initial state', () => {
    beforeEach(() => {
      cy.mockGetSettings(200).as('getRequest');
      cy.visitSettings();
    });

    it('starts in a waiting state, with no settings.', () => {
      cy.contains('Waiting for settings...');
    });

    it.only('requests the settings when it receives a FIRMM status message', () => {
      const message = { data: JSON.stringify({ status: 10 }) } as MessageEvent;
      cy.dispatch(handleStatusMessage(message));
      cy.wait('@getRequest');
    });

（顺便说一下，请注意本文前面的mockPutSettings命令，它确实起作用。）

cy.wait('@getRequest')失败，

CypressError：超时重试：cy.wait（）超时，等待5000ms的第一个请求到路由：“ getRequest”。从未发生过请求。

Chrome控制台显示：GET http://localhost:5000/settings/ net::ERR_EMPTY_RESPONSE

实际上，将应用程序本身排除在等式之外也会失败：

    it('requests the settings when it receives a FIRMM status message', () => {
      cy.visit(url);
      cy.wait('@getRequest');
    });

在赛普拉斯窗口中，我们可以看到正在创建/设置路线，但是没有被点击。

发生了什么事？

PS。 axios-mock-adapter可以做到这一点：

function mockGet() {
  // ... setup of constants as before ...
  return new MockAdapter(axios).onGet(settingsHttpUrl).reply(() => {
    console.log('MOCK AXIOS HIT');
    return [200, initialPayloadForTests];
  });
}

describe('Settings Page', () => {
  beforeEach(() => {
    cy.server();
    cy.clock();
    mock = mockGet();
  });

  afterEach(() => {
    mock.restore();
  });

测试正常，响应到来，MOCK AXIOS HIT打印到控制台。但是，mock.history.get为空。

赛普拉斯与Reactjs中的路由不匹配

0 个答案: