Chaining commands that return a "promise" in beforeEach

[Nxtra]

I want to do some setup before I start executing my e2e tests.

Example:
An application where clubs can organize competitions for members to enroll in.

I want to test the page to enroll in a competition.

BeforeEach
Before running a test I need to setup a Club. And a competition created by that Club.
(Hence we will need to chain these requests).

However I cannot get it working. Here is the code that runs in beforeEach:

  describe("Give a Club and a Competition of this club", () => {
    let createdClub;
    let createdCompetition;

    beforeEach(() => {
      makeNewClub().then((c)=> createdClub = c)
      makeNewCompetition(createdClub).then((comp) => createdCompetition = comp)
    });
...
})

This does not work, so I tried chaining it somehow:

    beforeEach(() => {
      makeNewClub(c).then((c) => {
        createdClub = c
        makeNewCompetition(c.id)
      }).then((comm) => (createdCompetition = comm));;
    });

This doesn't work either.

Important to know. You need authorization for the calls to makeNewClub and makeNewCompetition:

commands.js

Cypress.Commands.add("login", () => {
  return Auth.signIn(username, password); // return a promise
});

club.util.js

export const makeNewClub = () => {
  return cy.login().then((cognitoUser) => { 
  ...
   return axios.post(...)
  })
}

How can a properly chain the calls from makeNewClub and makeNewCompetition

[bahmutov]

You can use cy.wrap to make Cypress test wait for your promise to finish. But I don't understand from your examples what is not working. The red flag to me is this:

 beforeEach(() => {
    makeNewClub().then((c)=> createdClub = c)
    makeNewCompetition(createdClub).then((comp) => createdCompetition = comp)
 });

Notice how makeNewCompetition(createdClub) runs immediately, but createdClub is undefined. and is only set inside the .then callback? That's your problem, should be

 beforeEach(() => {
    makeNewClub().then((c)=> {
      createdClub = c
      makeNewCompetition(createdClub).then((comp) => createdCompetition = comp)
    })
 });

[Nxtra]

Yes originally I tried to do it with async / await. So the first option with await in front of the makeNewClub and makeNewCompetition. I am indeed looking for an alternative.

When I tried it with .then I ran into an odd behavior that I cannot yet explain. Somehow makeNewCompetitionreturns the logged in user (from cy.login) and not the competition! While I am sure that in makeNewCompetition I am returning the competition (hence the cy.log below)
Using the following:

enrollement.tests.js

let createdClub, createdCompetion

 beforeEach(() => {
    makeNewClub().then((c)=> {
      cy.log("created club: ", c")
      createdClub = c
      makeNewCompetition(c).then((comp) => {
          cy.log(comp) // when I log this data it contains the user (the logged in user from cy.login)
          createdCompetition = comp
       })
    })
 });

competition.util.js

export const makeNewCompetion = (club) => {
  return cy.login().then((cognitoUser) => { 
  ...
   return axios.post(...).then((res)=>{
      cy.log(res); // when I log this data it contains the created competition data!
      return res.data;
      })
  })
}

club.util.js

export const makeNewClub = () => {
  return cy.login().then((cognitoUser) => { 
  ...
   return axios.post(...).then(res=> res.data)
  })
}

command.js

Cypress.Commands.add("login", () => {
  return Auth.signIn(username, password); //return promise
});

This has been keeping me up for weeks :D