Cypress sharing variables/alias between Hooks?

Question

So I have a pretty `before` and `beforeEach` function that runs before all tests. It looks something like this:

describe("JWT Authentication", function() {
  before(function() {
    // custom command runs once to get token for JWT auth
    // alias token as 'user' for further use
    cy.get_auth_token().as('user')
  })
  beforeEach(function() {
    // before each page load, set the JWT to the aliased 'user' token
    cy.visit("/", {
      onBeforeLoad(win) {
        // set the user object in local storage
        win.localStorage.setItem("token", this.user.token);
      }
    })
  })
  it("a single test...", function() {
   //do stuff
});

The custom command is also pretty simple:

Cypress.Commands.add("get_auth_token", () => {
    cy.request("POST", Cypress.env("auth_url"), {
        username: Cypress.env("auth_username"),
        password: Cypress.env("auth_password")
      })
        .its("body")
        .then(res => {
          return res;
        });
})

The custom command itself works and retrieves the token as expected. However when it comes to the beforeEach it has no idea what this.user.token is. Specifically not knowing what user is.

One option is of course calling the command in every beforeEach which is what the JWT Cypress recipe/example spec does. However this feels excessive because in my case I do not NEED to grab the token every test. I only need to grab it once for this set of tests.

So how can I share the token to the beforeEach hook with a Cypress custom command.

Answer 1

I ran a few tests, all the bits seem to work!

The following does not give you an answer, but may help you debug.

Passing token between before() and beforeEach()

Assume we have a user in before(), does it get to the onBeforeLoad() callback?

describe("JWT Authentication", function() {

  before(function() {
    const mockUser = { token: 'xyz' }; 
    cy.wrap(mockUser).as('user');
  })

  beforeEach(function() {
    cy.visit("http://example.com", {
      onBeforeLoad(win) {
        console.log(this.user.title);  // prints 'xyz'
      }
    })
  })
  it("a single test...", function() {
   //do stuff
  })
});

Is the custom command working

I can't find a generic mock for an Auth check, but any cy.request() that gets an object should be equivalent.

I'm hitting typicode.com and looking for the title property

describe("JWT Authentication", function() {

  Cypress.Commands.add("get_auth_token", () => {
    cy.request("GET", 'https://jsonplaceholder.typicode.com/todos/1')
      .its("body")
      .then(body => {
         console.log('body', body); // prints {userId: 1, id: 1, title: "delectus aut autem", completed: false}
         return body;
       });
  })

  before(function() {
    cy.get_auth_token()
      .then(user => console.log('user', user)) // prints {userId: 1, id: 1, title: "delectus aut autem", completed: false}
      .as('user')
  })

  beforeEach(function() {
    cy.visit("http://example.com", {
      onBeforeLoad(win) {
        console.log(this.user.title);  // prints 'delectus aut autem'
      }
    })
  })
  it("a single test...", function() {
   //do stuff
  })
});

Custom command

This shorter version also seems to work

Cypress.Commands.add("get_auth_token", () => {
  cy.request("GET", 'https://jsonplaceholder.typicode.com/todos/1')
    .its("body");
})