Cypress使用fixture报'TravelData未定义'的TypeError报错如何解决

触发报错的两个直接原因 #

• fixture 路径与实际文件名不匹配：你在 cypress/fixtures 目录下创建的文件是 travelData.json，但代码中 cy.fixture() 传入的参数是 travel.testData，完全无法匹配到对应文件，fixture 数据根本没有加载。注：cy.fixture() 的参数默认相对于 fixtures 目录解析，无需手动加 .json 后缀。
• it 钩子使用箭头函数导致 this 指向错误：Cypress 基于 Mocha 运行，要读取挂在测试上下文 this 上的变量，it、beforeEach 这类钩子如果需要操作 this，必须使用普通函数声明。箭头函数没有自身的 this，会继承外层定义时的上下文，此时访问到的 this 不是 Mocha 的测试实例，自然找不到 travelData 属性。

修正代码 #

方案1：直接修复原有代码的两个问题 #

context('Travel Portal Regression Test', () => {
  beforeEach(function () {
    // 修正fixture参数，匹配实际的travelData.json
    cy.fixture('travelData').then((travelData) => {
      this.travelData = travelData;
    });
  });

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

  // 将it的箭头函数改为普通函数，保证this指向正确
  it('Testing ThoughtCoders Homepage', function () {
    cy.log('Testing ThoughtCoders Homepage');
    cy.log(this.travelData.FIRSTNAME);
  });
});

方案2：更稳妥的闭包变量写法（规避this上下文坑） #

不需要依赖 this 挂载变量，直接在 context 作用域下定义变量存储 fixture 数据即可，后续哪怕用箭头函数写测试也不会出现 this 指向问题：

context('Travel Portal Regression Test', () => {
  // 定义变量存储fixture数据
  let travelData;

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

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

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

内容的提问来源于stack exchange，提问作者Ajeet Yadawa