Trouble/Weirdness with accessing aliased values in this context

[dikkadev]

Hey everyone, I've been running into an issue with Cypress Component Testing that I can't seem to figure out.

What do I mean?

I'm trying to set up some aliases in a beforeEach hook using cy.wrap().as(), and then access these aliased values in my tests using the this context. However, when I log this in my tests, the aliased values are undefined.

Here's a simplified version of my code where I'm facing this issue:

beforeEach(function() {
    let someObject = { foo: 'bar' };

    cy.mount(SomeComponent).then((wrapper) => {
        wrapper.component.ngOnInit();
        cy.wrap(wrapper.component).as('component');
        cy.wrap(someObject).as('someObject');
    });
});

it('should access aliases', function() {
    cy.log(this.component);
    cy.log(this.someObject);
});

In this example, both this.component and this.someObject are logged as undefined, and trying to access a property on this.component throws an error because this.component is undefined.

However, I have another example where the aliased values are logged as undefined, but I can still access properties on them in my tests:

beforeEach(function() {
    let someObject = { foo: 'bar' };

    cy.mount(AnotherComponent).then((wrapper) => {
        wrapper.component.ngOnInit();
        cy.wrap(wrapper.component).as('component');
        cy.wrap(someObject).as('someObject');
    });
});ci

it('should access aliases', function() {
    cy.log(this.component);  // Logs undefined
    cy.log(this.someObject);  // Logs undefined
    cy.log(this.component.foo);  // Logs 'bar', even though this.component was logged as undefined
});

In this second example, this.component and this.someObject are logged as undefined, just like in the first example. However, I can still access this.component.foo in my test, and it correctly logs 'bar'.

What I tried so far

I've tried a number of things to resolve this issue, but nothing seems to work. Here's a summary of what I've tried:

1. Using cy.then() after setting up the aliases: I thought that maybe the aliases weren't fully resolved when I was trying to access them, so I tried using cy.then() after setting up the aliases. This allowed me to log the correct values inside the then function, but the aliases were still undefined in the actual tests.

beforeEach(function() {
    let someObject = { foo: 'bar' };

    cy.mount(SomeComponent).then((wrapper) => {
        wrapper.component.ngOnInit();
        cy.wrap(wrapper.component).as('component');
        cy.wrap(someObject).as('someObject');
    }).then(function() {
        cy.log(this.component);  // Logs the correct value
        cy.log(this.someObject);  // Logs the correct value
    });
});

it('should access aliases', function() {
    cy.log(this.component);  // Logs undefined
    cy.log(this.someObject);  // Logs undefined
});

2. Using a before hook instead of a beforeEach hook: I also tried using a before hook instead of a beforeEach hook, thinking that there might be an issue with how the this context was being handled between tests. However, this didn't change the behavior either - the aliases were still undefined in the tests.

3. Using cy.get('@alias').then() to access the aliased values: I tried using cy.get('@alias').then() to access the aliased values, which did allow me to access the correct values in the tests. However, this approach is not ideal for us. It makes the tests less readable and more difficult to maintain. If we can't get the this context working consistently across all test suites, we're considering using a Jasmine-like style where we use a variable scoped in the describe block that is written and read, even though this is not idiomatic Cypress.

beforeEach(function() {
    let someObject = { foo: 'bar' };

    cy.mount(SomeComponent).then((wrapper) => {
        wrapper.component.ngOnInit();
        cy.wrap(wrapper.component).as('component');
        cy.wrap(someObject).as('someObject');
    });
});

it('should access aliases', function() {
    cy.get('@component').then(function(component) {
        cy.log(component);  // Logs the correct value
    });

    cy.get('@someObject').then(function(someObject) {
        cy.log(someObject);  // Logs the correct value
    });
});

Despite these attempts, I'm still facing the same issue - the aliases are undefined when I log them and when I try to access them in my tests, except in some cases where I can still access properties on the aliased values in my tests, even though they are logged as undefined.