Fixture Documentation example is non functional due to preprocessing of 'this'

[stevenalanstark]

Please reference the documentation page here:

https://docs.cypress.io/api/commands/fixture.html#Accessing-Fixture-Data

Current behavior:

from the documentation, I should be able to reference this.usersJSON, but due to pre processing this is compiled as undefined.usersJSON

Desired behavior:

compile and run as this.usersJSON, or documentation updated with new examples

Steps to reproduce:

Using Cypress 2.1.0, follow the examples on the documentation for fixtures.

        cy.fixture('example').as('usersJSON');
        cy.route('GET', '/users/**', '@usersJSON')
            .then((xhr) => {
                expect(xhr.response.name).to.eq('Using fixtures to represent data');
                expect(this.usersJSON.name).to.eq('Using fixtures to represent data'); // THIS FAILS, but in the inspector I can see `this.usersJSON.name` no problem
            }).then(() => {
                cy.log("FIXTURES SUCCESS");
            });

Versions

Cypress 2.1.0

Chrome 65.0.3325.181

Ubuntu

I believe this is related to : #533

[brian-mann]

@stevenalanstark this has nothing to do with Cypress and has everything to do with how Javascript works with the fat arrow. My guess is that you've put your test in a fat arrow, which then preserves the outer context outside of the test.

If you used function() { } it would work. Fat arrows preserve context and it's why Mocha does not suggest using fat arrows as test functions.

https://mochajs.org/#arrow-functions

This doc does a really good job highlighting all of this here: https://docs.cypress.io/guides/core-concepts/variables-and-aliases.html

[stevenalanstark]

@brian-mann you're absolutely right, and I knew this. oops.

I've been working in ES6 for so long, it's easy to forget when to NOT use the arrow functions.

The only one I needed to change was the .then handler.

thank you for your time, cheers.