自定义命令中的争用条件问题

Question

我的应用程序在加载时发出XHR请求，并将响应保存在我的redux存储中。我添加了一个中间件，这样Cypress就可以收听redux更新了。

在我的Cypress测试中，我需要一个泛型命令，其中我可以附加一个侦听器，并根据redux操作执行一些逻辑。到目前为止，这就是我所拥有的：

commands.js

Cypress.Commands.add('onReduxAction', actionType => 
  new Cypress.Promise(resolve => {
    cy.on('emit:reduxAction', ({action} => {
      if (action.type === actionType) {
        resolve(action.type);
      }
    });
  });
);

spec.js

before(() => {
  cy.visit();
  cy.onReduxAction('MY_ACTION').then(data => {
    // some logic
  });
});

这似乎很容易在连接侦听器之前触发MY_ACTION (作为cy.visit();的结果)的竞争条件。我也尝试了以下几种方法，但由于未解决的承诺阻止了访问的运行，所以它不起作用：

cy.onReduxAction('MY_ACTION').then(data => {
  // some logic
});
cy.visit();

是否有一种方法可以让自定义命令返回承诺，而不必在恢复执行之前解决？

Answer 1

简单的回答是，使用一个简单的函数来设置一个正在进行的事件侦听器.

如果您使用自定义命令为您提供全局可用的东西，则Cypress的建议是只在需要时导入助手函数。或者可以将它们添加到Cypress全局(只要名称不冲突)。

cypress/support/helpers.js

export const onReduxAction = (actionType) => {
  return new Cypress.Promise(resolve => {
    cy.on('emit:reduxAction', ({action}) => {
      if (action.type === actionType) {
        resolve(action.type);
      }
    })
  })
}

测试

import { onReduxAction } from '../support/helpers.js';

before(() => {
  onReduxAction('MY_ACTION').then(data => {
    // some logic
  });
  cy.visit();
})

来自医生-承诺

Cypress是感知承诺的，所以如果您从命令(如.then() )内部返回一个承诺，则Cypress 将在这些承诺解决之前不会继续。

与自定义命令相同，该命令返回一个Chainable，它期望一个具体(已解析)的主题传递到下一个命令。

我很想知道您是如何发送cy.on('emit:reduxAction', ...)正在接收的事件的，它的印象是我们仅限于这里列出的事件( 事件目录 )。

您还可以通过将访问和侦听器与onBeforeLoad事件相协调来使其工作。

cy.visit('http://example.com', {                // start the page load
  onBeforeLoad: () => {                         // set up listener ahead of loading
    cy.on('emit:reduxAction', ({action}) => {
      if (action.type === actionType) {
        // some logic
      }
    })
  }
})

Answer 2

Steve的回答(使用JS函数)更好，但只是为了说明如何愚弄Cypress：

如果您将承诺包装在一个对象中，Cypress将不会承认它是一个承诺，因此不会等待它解决。

Cypress.Commands.add('onReduxAction', actionType => {
  const promise = new Cypress.Promise(resolve => {
    cy.on('emit:reduxAction', ({action}) => {
      if (action.type === actionType) {
        resolve(action.type);
      }
    });
  });
  return { promise }
});

cy.onReduxAction('MY_ACTION').then(promiseWrapper => {  // Cypress then method
  promiseWrapper.promise.then(data => {                 // Promise then method
    // some logic
  })
});

cy.visit('');