Cypress Fixture - TypeError: Cannot read property 'travelData' of undefined

Question

Getting error in Cypress test execution with fixture - "TypeError: Cannot read property 'travelData' of undefined"

Here are the steps:

1 - Created a travelData.json file and put it into the fixtures folder:

{
  "FIRSTNAME": "TESTTRAVEL",
  "LASTNAME": "USER",
  "MOBILE": "581234567",
  "EMAIL": "test@test.com",
  "PASSPORT": "AB1234",
  "CURRENCY": "AED"
}

2 - Write a Cypress test and put into the integration folder. Code is below:

context('Travel Portal Regression Test', () => {
  beforeEach(function () {
    cy.fixture('travel.testData').then((travelData) => {
      this.travelData = travelData;
    });
  });
  beforeEach(() => {
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.log(this.travelData.FIRSTNAME);
  });
});

When I run the Cypress test then I get the error "TypeError: Cannot read property 'travelData' of undefined".

Please correct me.

Answer 1

Take a look at the Fixture Example Recipe which shows a simple way to load the fixture once only and persist it for each test in the spec

The pattern is to add an additional beforeEach() in between your before() and current beforeEach().

Example recipe

context('loading once and using @', () => {
  let city
  let country

  before(() => {
    // load fixtures just once, need to store in
    // closure variables because Mocha context is cleared
    // before each test
    cy.fixture('city').then((c) => {
      city = c
    })

    cy.fixture('country').then((c) => {
      country = c
    })
  })

  beforeEach(() => {
    // we can put data back into the empty Mocha context before each test
    // by the time this callback executes, "before" hook has finished
    cy.wrap(city).as('city')
    cy.wrap(country).as('country')
  })

  it('has loaded fixtures', function () {
    // again, the test has to use "function" callback
    // to make sure "this" points at the Mocha context
    expect(this.city).to.deep.equal({ name: 'Atlanta' })
    expect(this.country).to.deep.equal({ name: 'United States' })
  })
})

Three key points you need are

1. use a closure variable
2. use a beforeEach() to "put back" the variable after clearing
3. use a "function () {}" style test

In your test

context('loading once and persisting the fixture', () => {

  let travelData                                                 // key point #1

  before(() => {
    cy.fixture('travelData').then((data) => {                  
      travelData = data;
    });
  })

  beforeEach(() => {                                             // key point #2
    cy.wrap(travelData).as('travelData')
  })

  beforeEach(() => {
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', function () {             // key point #3 
    expect(this.travelData."FIRSTNAME").to.equal("TESTTRAVEL")   // passes
  })
})

Answer 2

Solution 1:

You can use the wrap() method which yields the object passed as a param if it resolves like so:

context('Travel Portal Regression Test', () => {
  beforeEach(() => {
    cy.fixture('travelData').then((data) => cy.wrap(data).as('getTravelData'));
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.get('@getTravelData').then((res) => cy.log(res.FIRSTNAME));
  });
});

Solution 2:

You can declare a variable called travelData on the upper scope of your test spec & reassign its value to data received from the json file like so:

context('Travel Portal Regression Test', () => {
  let travelData;

  beforeEach(() => {
    cy.fixture('travelData').then((data) => {
      travelData = data;
      return travelData;
    });
    // cy.viewport('iphone-6')
    cy.viewport(360, 640);
    cy.visit('https://thoughtcoders.com/');
  });

  it('Testing ThoughtCoders Homepage', () => {
    cy.log('Testing ThoughtCoders Homepage');
    cy.log(travelData.FIRSTNAME);
  });
});

Here it's the screenshot with the test results: