Cypress中beforeEach调用Fixture报错：Cannot set properties of undefined

错误原因 #

你遇到的Cannot set properties of undefined (setting 'data')错误，核心原因是箭头函数绑定了外层的this，导致在Cypress钩子中this指向undefined。如果之前用普通函数写法能正常工作，大概率是后来误将beforeEach的回调改成了箭头函数，或者Cypress版本更新后对箭头函数的上下文处理更严格。

解决方案 #

方案1：改用普通函数作为beforeEach回调 #

将箭头函数换成普通函数，此时this会指向Cypress的测试上下文，就能正常赋值：

beforeEach(function() {
  cy.fixture('tabNetwork.json').then(data => {
    this.data = data;
  });
});

// 测试用例中访问数据
it('示例测试', function() {
  console.log(this.data); // 正常访问fixture数据
});

方案2：使用Cypress.env()存储数据 #

如果习惯用箭头函数，可以借助Cypress的环境变量存储数据，全局可访问：

beforeEach(() => {
  cy.fixture('tabNetwork.json').then(data => {
    Cypress.env('tabNetworkData', data);
  });
});

// 测试用例中访问
it('示例测试', () => {
  const data = Cypress.env('tabNetworkData');
  // 使用data进行操作
});

方案3：使用闭包变量存储 #

在测试套件外层定义变量，通过闭包直接赋值和访问：

let tabNetworkData;

beforeEach(() => {
  cy.fixture('tabNetwork.json').then(data => {
    tabNetworkData = data;
  });
});

// 测试用例中访问
it('示例测试', () => {
  // 直接使用tabNetworkData
  console.log(tabNetworkData);
});

内容的提问来源于stack exchange，提问作者Тест работа