Cypress V10. Not Reading data in BDD test: TypeError: Cannot read properties of undefined (reading 'mobileHandset')

Question

I hope someone can help, I've just converted a Cypress Mocha framework to BDD. Before converting it was running perfectly and the test was running smoothly. Now I've converted it I seem to be getting an error message Cannot read properties of undefined (reading 'mobileHandset'). I never had this issue before so I'm very confused. here is the code and watch this video

Feature:

Feature: End to End Shopping Purchase Validation

 Registered user will be able to purchase an item and have it shipped to their country

    Scenario: Customer Purchase and delivery
    
    Given  I am on the eCommerce page
    When I add items to cart 
    And I confirm shopping cart total
    Then I select my delivery country and see a thank for your order notification

Step Definition

import { Given, And, Then, When } from "@badeball/cypress-cucumber-preprocessor";
import Homepage from '../../../support/pageObjects/Homepage'
import orderSummaryPage from '../../../support/pageObjects/orderSummaryPage'
import completeOrderPage from '../../../support/pageObjects/completeOrderPage'
const data = require ('../../../fixtures/example.json');

const homepage = new Homepage()
const StartCheckout = new orderSummaryPage()
const CompleteOrder = new completeOrderPage()



Given(/^I am on the eCommerce page$/, () => {
    cy.visit(``+"/angularpractice/")

});

When(/^I add items to cart$/, function() {
    
  homepage.getShopTab().click({force:true}) 

    this.data.mobileHandset.forEach(function(element) {// this custom commad will add items to your cart

          cy.AddToCart(element)  
        }); 

        StartCheckout.getBasketCheckoutButton().click()

});

When(/^I confirm shopping cart total$/, () => {

    let sum=0
   
    CompleteOrder.getProductCost().each(($e1, index, $list) =>{

      const unitCost=$e1.text()  
      let res= unitCost.split(" ") 
      res= res[1].trim() 
      sum=Number(sum)+Number(res)
      
  }).then(function() 
  {
      cy.log(sum)
  
  })
});

Then(/^I select my delivery country and see a thank for your order notification$/, () => {
    
    StartCheckout.getStartCheckoutButton().click()
    CompleteOrder.getShippingCountry().type('United Kingdom')
    CompleteOrder.getShippingCountryConfirm().click()
    CompleteOrder.getTermsConditionsCheckbox().click({force: true})
    CompleteOrder.getPurchaseButton().click()
    
    CompleteOrder.getPurchaseAlert().then(function(element){

      
       const actualText= element.text()
      expect(actualText.includes('Success')).to.be.true
   
     }) 
    
});

Here is the data

{
  "name": "MY_NAME",
  "gender": "Female",
  "mobileHandset": ["Blackberry", "Nokia Edge"]
  
  
}

BeforeEach

beforeEach(function()
{

    cy.fixture('example').then(function(data){ 
 
        this.data=data 

       })

})

After discussion I moved the BeforeEach file to Support. Still getting the original error

Answer 1

Your beforeEach() should be working, but it's not necessary you can just refer to data instead of this.data.

const data = require ('../../../fixtures/example.json');  // data available anywhere in this step
...
When(/^I add items to cart$/, () => {
  ...
  data.mobileHandset.forEach(element => {
    cy.AddToCart(element)  
  })
  ...
})

---

The convention is to use cy.fixture()

When(/^I add items to cart$/, () => {
  ...
  cy.fixture('example.json').then(data => {    // no ../.. needed
    data.mobileHandset.forEach(element => {
      cy.AddToCart(element)  
    })
  }) 
  ...
});

Answer 2

You don't need to import the data fixture if you already have it in the cypress/fixtures folder.

You can load the fixture in the Before hook before your tests.

import { 
    Given,
    And,
    Then,
    When,
    Before 
} from "@badeball/cypress-cucumber-preprocessor";
//...

Before(function() {
    cy.fixture('example').then((data) => {
        this.data = data;
    });
});
//...