Problem with race condition on custom command

My app makes an XHR request on load and saves the response in my redux store. I have added a middleware so that Cypress can listen to the redux update.

In my Cypress tests, I want a generic command where I can attach a listener and do some logic based on the redux action. This is what I have so far:

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    });  });  

This seems to be prone to the race condition where MY_ACTION can be triggered (as a result of cy.visit();) before the listener is attached. I tried the following too, but it doesn't work since the unresolved promise prevents the visit from running:

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

---

Is there a way to have custom commands return a promise without having to be resolved before resuming execution?

https://stackoverflow.com/questions/66495985/problem-with-race-condition-on-custom-command March 06, 2021 at 12:17AM